From b7e91c345ffd7c679620bbee79e3ea208e795420 Mon Sep 17 00:00:00 2001 From: keannu125 Date: Sun, 12 Mar 2023 11:43:42 +0800 Subject: [PATCH] Added daily view page --- package-lock.json | 20 +++++++ package.json | 1 + src/Components/Api/Api.tsx | 85 ++++++++++++------------------ src/Interfaces/Interfaces.tsx | 6 +++ src/Routes/DailyView/DailyView.tsx | 55 ++++++++++++------- 5 files changed, 97 insertions(+), 70 deletions(-) diff --git a/package-lock.json b/package-lock.json index f2fcfb9..1744336 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.3.5", + "react-moment": "^1.1.3", "react-query": "^3.39.3", "react-redux": "^8.0.5", "react-router-dom": "^6.8.1", @@ -12592,6 +12593,15 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.29.4", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz", + "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==", + "peer": true, + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -14881,6 +14891,16 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-moment": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.3.tgz", + "integrity": "sha512-8EPvlUL8u6EknPp1ISF5MQ3wx2OHJVXIP/iZc4wRh3iV3XozftZERDv9ANZeAtMlhNNQHdFoqcZHFUkBSTONfA==", + "peerDependencies": { + "moment": "^2.29.0", + "prop-types": "^15.7.0", + "react": "^16.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-query": { "version": "3.39.3", "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", diff --git a/package.json b/package.json index 17997f8..9e40098 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.3.5", + "react-moment": "^1.1.3", "react-query": "^3.39.3", "react-redux": "^8.0.5", "react-router-dom": "^6.8.1", diff --git a/src/Components/Api/Api.tsx b/src/Components/Api/Api.tsx index 0cfc1f5..db8d4fb 100644 --- a/src/Components/Api/Api.tsx +++ b/src/Components/Api/Api.tsx @@ -8,11 +8,14 @@ import { } from "../../Interfaces/Interfaces"; // Product APIs +const instance = axios.create({ + baseURL: "https://keannu125.pythonanywhere.com", +}); export function GetProducts() { const token = JSON.parse(localStorage.getItem("token") || "{}"); - return axios - .get("https://keannu125.pythonanywhere.com/api/v1/products/", { + return instance + .get("api/v1/products/", { headers: { Authorization: "Token " + token, }, @@ -24,8 +27,8 @@ export function GetProducts() { export function GetProduct(id: number) { const token = JSON.parse(localStorage.getItem("token") || "{}"); - return axios - .get("https://keannu125.pythonanywhere.com/api/v1/products/" + id + "/", { + return instance + .get("api/v1/products/" + id + "/", { headers: { Authorization: "Token " + token, }, @@ -37,18 +40,12 @@ export function GetProduct(id: number) { export function UpdateProduct(product: UpdateProductParams) { const token = JSON.parse(localStorage.getItem("token") || "{}"); - return axios - .patch( - "https://keannu125.pythonanywhere.com/api/v1/products/" + - product.id + - "/", - product, - { - headers: { - Authorization: "Token " + token, - }, - } - ) + return instance + .patch("api/v1/products/" + product.id + "/", product, { + headers: { + Authorization: "Token " + token, + }, + }) .then((response) => { console.log("Product update successful"); return response.data; @@ -61,8 +58,8 @@ export function UpdateProduct(product: UpdateProductParams) { export function GetLowestStockedProduct() { const token = JSON.parse(localStorage.getItem("token") || "{}"); - return axios - .get("https://keannu125.pythonanywhere.com/api/v1/lowest_stock_product/", { + return instance + .get("api/v1/lowest_stock_product/", { headers: { Authorization: "Token " + token, }, @@ -74,8 +71,8 @@ export function GetLowestStockedProduct() { export function GetLogs() { const token = JSON.parse(localStorage.getItem("token") || "{}"); - return axios - .get("https://keannu125.pythonanywhere.com/api/v1/logs/", { + return instance + .get("api/v1/logs/", { headers: { Authorization: "Token " + token, }, @@ -87,8 +84,8 @@ export function GetLogs() { export function AddProduct(note: AddProductParams) { const token = JSON.parse(localStorage.getItem("token") || "{}"); - return axios - .post("https://keannu125.pythonanywhere.com/api/v1/products/", note, { + return instance + .post("api/v1/products/", note, { headers: { Authorization: "Token " + token, }, @@ -104,15 +101,12 @@ export function AddProduct(note: AddProductParams) { export function DeleteProduct(id: number) { const token = JSON.parse(localStorage.getItem("token") || "{}"); - return axios - .delete( - "https://keannu125.pythonanywhere.com/api/v1/products/" + id + "/", - { - headers: { - Authorization: "Token " + token, - }, - } - ) + return instance + .delete("api/v1/products/" + id + "/", { + headers: { + Authorization: "Token " + token, + }, + }) .catch((error) => { console.log("Error deleting product"); return error; @@ -122,11 +116,8 @@ export function DeleteProduct(id: number) { // User APIs export function UserRegister(register: RegistrationParams) { - return axios - .post( - "https://keannu125.pythonanywhere.com/api/v1/accounts/users/", - register - ) + return instance + .post("api/v1/accounts/users/", register) .then(async (response) => { console.log(response.data); return true; @@ -138,11 +129,8 @@ export function UserRegister(register: RegistrationParams) { } export function UserLogin(user: LoginParams) { - return axios - .post( - "https://keannu125.pythonanywhere.com/api/v1/accounts/token/login/", - user - ) + return instance + .post("api/v1/accounts/token/login/", user) .then(async (response) => { localStorage.setItem("token", JSON.stringify(response.data.auth_token)); console.log("Login Success "); @@ -156,8 +144,8 @@ export function UserLogin(user: LoginParams) { export function UserInfo() { const token = JSON.parse(localStorage.getItem("token") || "{}"); - return axios - .get("https://keannu125.pythonanywhere.com/api/v1/accounts/users/me/", { + return instance + .get("api/v1/accounts/users/me/", { headers: { Authorization: "Token " + token, }, @@ -174,8 +162,8 @@ export function UserInfo() { export function QueryUser(id: number) { const token = JSON.parse(localStorage.getItem("token") || "{}"); - return axios - .get("https://keannu125.pythonanywhere.com/api/v1/user_list/" + id, { + return instance + .get("api/v1/user_list/" + id, { headers: { Authorization: "Token " + token, }, @@ -191,11 +179,8 @@ export function QueryUser(id: number) { } export function UserActivate(activation: ActivationParams) { - return axios - .post( - "https://keannu125.pythonanywhere.com/api/v1/accounts/users/activation/", - activation - ) + return instance + .post("api/v1/accounts/users/activation/", activation) .then(async (response) => { console.log("Activation Success"); return true; diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx index c831f44..a6519c7 100644 --- a/src/Interfaces/Interfaces.tsx +++ b/src/Interfaces/Interfaces.tsx @@ -7,6 +7,12 @@ export interface Product { name: string; date_added: string; quantity: number; + history: ProductHistoryEntry[]; +} + +export interface ProductHistoryEntry { + quantity: number; + history_date: string; } export interface ProductLogList { diff --git a/src/Routes/DailyView/DailyView.tsx b/src/Routes/DailyView/DailyView.tsx index d26f460..ab35d0c 100644 --- a/src/Routes/DailyView/DailyView.tsx +++ b/src/Routes/DailyView/DailyView.tsx @@ -1,13 +1,6 @@ -import React, { useState } from "react"; -import TotalProductsIcon from "../../Components/Icons/TotalProductsIcon/TotalProductsIcon"; -import LowStockIcon from "../../Components/Icons/LowStockIcon/LowStockIcon"; -import StatsIcon from "../../Components/Icons/StatsIcon/StatsIcon"; -import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon"; +import React from "react"; import "../../index.css"; import styles from "../../styles"; -import HomeIcon from "../../Components/Icons/HomeIcon/HomeIcon"; -import ColoredCube from "../../Components/ColoredCube/ColoredCube"; -import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon"; import LoginChecker from "../../Components/LoginChecker/LoginChecker"; import { useQuery } from "react-query"; import { @@ -15,17 +8,14 @@ import { GetLowestStockedProduct, GetProducts, } from "../../Components/Api/Api"; -import { - OldSessionState, - ProductLog, - SessionTransactions, -} from "../../Interfaces/Interfaces"; +import { OldSessionState, Product } from "../../Interfaces/Interfaces"; import { useSelector } from "react-redux"; -import LowestStockWidget from "../../Components/DashboardPage/LowestStockWidget/LowestStockWidget"; -import RecentlyAddedWidget from "../../Components/DashboardPage/RecentlyAddedWidget/RecentlyAddedWidget"; -import TotalProductsWidget from "../../Components/DashboardPage/TotalProductsWidget/TotalProductsWidget"; -import SessionStatsWidget from "../../Components/DashboardPage/SessionStatsWidget/SessionStatsWidget"; import TodayIcon from "../../Components/Icons/TodayIcon/TodayIcon"; +import moment from "moment"; +import GetToday from "../../Components/GetToday/GetToday"; +import Moment from "react-moment"; +import { useNavigate } from "react-router-dom"; +import { Button } from "@mui/material"; export default function DailyView() { const logs = useQuery("logs", GetLogs, { retry: 0 }); @@ -40,6 +30,7 @@ export default function DailyView() { const old_session_checked = useSelector( (state: OldSessionState) => state.old_session_checked.value ); + const navigate = useNavigate(); if ( logs.isLoading || products.isLoading || @@ -80,10 +71,34 @@ export default function DailyView() {
-

Daily View

+

+ Products Modified Today +

-
-

Heh

+
+ {products.data + .filter( + (Product: Product) => + moment(Product.history[0].history_date).format("MM-DD-YYYY") === + GetToday() + ) + .map((Product: Product) => ( + + ))}
);