From 6082c572d2fe4c117ff3cc664ce48ec362ddc4ff Mon Sep 17 00:00:00 2001 From: keannu125 Date: Wed, 15 Mar 2023 22:50:32 +0800 Subject: [PATCH] Polished and removed redundant type interfaces for redux states --- .../SessionStatsWidget/SessionStatsWidget.tsx | 6 ++-- src/Components/Login/Login.tsx | 7 ++-- src/Components/LoginChecker/LoginChecker.tsx | 6 ++-- .../PreviousSessionChecker.tsx | 36 ++++++++++--------- src/Components/Sidebar/Sidebar.tsx | 8 ++--- src/Interfaces/Interfaces.tsx | 30 ---------------- src/Plugins/Redux/Store/Store.tsx | 9 ++++- src/Routes/DailyView/DailyView.tsx | 6 ++-- src/Routes/Dashboard/Dashboard.tsx | 16 ++------- src/Routes/Logs/Logs.tsx | 12 +++---- src/Routes/Product/Product.tsx | 8 ++--- src/Routes/Products/Products.tsx | 7 ++-- src/routes/Inventory/Inventory.tsx | 11 +++--- 13 files changed, 58 insertions(+), 104 deletions(-) diff --git a/src/Components/DashboardPage/SessionStatsWidget/SessionStatsWidget.tsx b/src/Components/DashboardPage/SessionStatsWidget/SessionStatsWidget.tsx index 900d1b5..32bf35c 100644 --- a/src/Components/DashboardPage/SessionStatsWidget/SessionStatsWidget.tsx +++ b/src/Components/DashboardPage/SessionStatsWidget/SessionStatsWidget.tsx @@ -3,16 +3,16 @@ import styles from "../../../styles"; import ColoredCube from "../../ColoredCube/ColoredCube"; import StatsIcon from "../../Icons/StatsIcon/StatsIcon"; import { useSelector } from "react-redux"; -import { SessionTransactions } from "../../../Interfaces/Interfaces"; +import { RootState } from "../../../Plugins/Redux/Store/Store"; export interface props {} export default function SessionStatsWidget() { const session_added = useSelector( - (state: SessionTransactions) => state.session_transactions.added + (state: RootState) => state.session_transactions.added ); const session_removed = useSelector( - (state: SessionTransactions) => state.session_transactions.removed + (state: RootState) => state.session_transactions.removed ); return (
state.logged_in.value); + const logged_in = useSelector((state: RootState) => state.logged_in.value); const logged_in_user = useSelector( - (state: LoggedInUserState) => state.logged_in_user.value + (state: RootState) => state.logged_in_user.value ); const navigate = useNavigate(); if (logged_in) { diff --git a/src/Components/LoginChecker/LoginChecker.tsx b/src/Components/LoginChecker/LoginChecker.tsx index 07d8bed..c273127 100644 --- a/src/Components/LoginChecker/LoginChecker.tsx +++ b/src/Components/LoginChecker/LoginChecker.tsx @@ -2,14 +2,14 @@ import * as React from "react"; import { Navigate } from "react-router-dom"; import { useSelector } from "react-redux"; -import { LoginState, OldSessionState } from "../../Interfaces/Interfaces"; +import { RootState } from "../../Plugins/Redux/Store/Store"; export interface props {} export default function LoginChecker() { - const logged_in = useSelector((state: LoginState) => state.logged_in.value); + const logged_in = useSelector((state: RootState) => state.logged_in.value); const old_session_checked = useSelector( - (state: OldSessionState) => state.old_session_checked.value + (state: RootState) => state.old_session_checked.value ); if (!logged_in && !old_session_checked) { } else if (!logged_in && old_session_checked) { diff --git a/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx b/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx index d0945af..1513740 100644 --- a/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx +++ b/src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx @@ -1,30 +1,32 @@ import * as React from "react"; -import { useEffect } from "react"; +import { useEffect, useCallback } from "react"; import { useDispatch, useSelector } from "react-redux"; import { UserInfo } from "../Api/Api"; import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice"; import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice"; -import { LoginState } from "../../Interfaces/Interfaces"; import { set_checked } from "../../Features/Redux/Slices/OldSession/OldSessionSlice"; +import { RootState } from "../../Plugins/Redux/Store/Store"; export default function PreviousSessionChecker() { const dispatch = useDispatch(); - const logged_in = useSelector((state: LoginState) => state.logged_in.value); + const logged_in = useSelector((state: RootState) => state.logged_in.value); // Function to check for previous login session - useEffect(() => { - async function check() { - if (await UserInfo()) { - if (logged_in !== true) { - console.log("Previous session found. Restoring"); - await dispatch(toggle_login()); - await dispatch(SetUser(await UserInfo())); - } - } else { - console.log("No old session found"); - localStorage.removeItem("token"); + const check = useCallback(async () => { + if (await UserInfo()) { + if (logged_in !== true) { + console.log("Previous session found. Restoring"); + await dispatch(toggle_login()); + await dispatch(SetUser(await UserInfo())); } - await dispatch(set_checked()); + } else { + console.log("No old session found"); + localStorage.removeItem("token"); } - check(); - }, []); + await dispatch(set_checked()); + }, [dispatch, logged_in]); + useEffect(() => { + if (!logged_in) { + check(); + } + }, [check, logged_in]); return
; } diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx index 1da4f53..b6c622e 100644 --- a/src/Components/Sidebar/Sidebar.tsx +++ b/src/Components/Sidebar/Sidebar.tsx @@ -10,15 +10,11 @@ import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon"; import LogsIcon from "../Icons/LogsIcon/LogsIcon"; import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon"; import TodayIcon from "../Icons/TodayIcon/TodayIcon"; +import { RootState } from "../../Plugins/Redux/Store/Store"; -export interface state { - logged_in: { - value: boolean; - }; -} export default function Sidebar() { const navigate = useNavigate(); - const logged_in = useSelector((state: state) => state.logged_in.value); + const logged_in = useSelector((state: RootState) => state.logged_in.value); function LogoutButton() { if (!logged_in) { return
; diff --git a/src/Interfaces/Interfaces.tsx b/src/Interfaces/Interfaces.tsx index a6519c7..5cb725c 100644 --- a/src/Interfaces/Interfaces.tsx +++ b/src/Interfaces/Interfaces.tsx @@ -39,36 +39,6 @@ export interface ProductLog { history_user: string; } -// Redux Interfaces -export interface LoginState { - logged_in: { - value: boolean; - }; -} - -export interface OldSessionState { - old_session_checked: { - value: boolean; - }; -} - -export interface LoggedInUserState { - logged_in_user: { - value: { - email: string; - id: number; - username: string; - }; - }; -} - -export interface SessionTransactions { - session_transactions: { - added: number; - removed: number; - }; -} - // Component Props Interfaces export interface IconProps { diff --git a/src/Plugins/Redux/Store/Store.tsx b/src/Plugins/Redux/Store/Store.tsx index 1a1fdf9..d7d9c0e 100644 --- a/src/Plugins/Redux/Store/Store.tsx +++ b/src/Plugins/Redux/Store/Store.tsx @@ -4,7 +4,7 @@ import LoggedInUserReducer from "../../../Features/Redux/Slices/LoggedInUserSlic import OldSessionReducer from "../../../Features/Redux/Slices/OldSession/OldSessionSlice"; import TransactionsThisSessionReducer from "../../../Features/Redux/Slices/TransactionsThisSessionSlice/TransactionsThisSessionSlice"; -export default configureStore({ +const store = configureStore({ reducer: { logged_in: LoginReducer, logged_in_user: LoggedInUserReducer, @@ -12,3 +12,10 @@ export default configureStore({ session_transactions: TransactionsThisSessionReducer, }, }); + +export default store; + +// Infer the `RootState` and `AppDispatch` types from the store itself +export type RootState = ReturnType; +// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} +export type AppDispatch = typeof store.dispatch; diff --git a/src/Routes/DailyView/DailyView.tsx b/src/Routes/DailyView/DailyView.tsx index dd2aef1..8f8e23f 100644 --- a/src/Routes/DailyView/DailyView.tsx +++ b/src/Routes/DailyView/DailyView.tsx @@ -8,7 +8,7 @@ import { GetLowestStockedProduct, GetProducts, } from "../../Components/Api/Api"; -import { OldSessionState, Product } from "../../Interfaces/Interfaces"; +import { Product } from "../../Interfaces/Interfaces"; import { useSelector } from "react-redux"; import TodayIcon from "../../Components/Icons/TodayIcon/TodayIcon"; import moment from "moment"; @@ -16,13 +16,13 @@ import GetToday from "../../Components/GetToday/GetToday"; import Moment from "react-moment"; import { useNavigate } from "react-router-dom"; import { - Button, TableBody, TableCell, TableContainer, TableHead, TableRow, } from "@mui/material"; +import { RootState } from "../../Plugins/Redux/Store/Store"; export default function DailyView() { const logs = useQuery("logs", GetLogs, { retry: 0 }); @@ -35,7 +35,7 @@ export default function DailyView() { } ); const old_session_checked = useSelector( - (state: OldSessionState) => state.old_session_checked.value + (state: RootState) => state.old_session_checked.value ); const navigate = useNavigate(); if ( diff --git a/src/Routes/Dashboard/Dashboard.tsx b/src/Routes/Dashboard/Dashboard.tsx index fdf1d57..a9f2117 100644 --- a/src/Routes/Dashboard/Dashboard.tsx +++ b/src/Routes/Dashboard/Dashboard.tsx @@ -1,13 +1,7 @@ -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 +9,13 @@ import { GetLowestStockedProduct, GetProducts, } from "../../Components/Api/Api"; -import { - OldSessionState, - ProductLog, - SessionTransactions, -} 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 RecentTransactionsWidget from "../../Components/DashboardPage/RecentTransactionsWidget/RecentTransactionsWidget"; +import { RootState } from "../../Plugins/Redux/Store/Store"; export default function Dashboard() { const logs = useQuery("logs", GetLogs, { retry: 0 }); @@ -38,7 +28,7 @@ export default function Dashboard() { } ); const old_session_checked = useSelector( - (state: OldSessionState) => state.old_session_checked.value + (state: RootState) => state.old_session_checked.value ); if ( logs.isLoading || diff --git a/src/Routes/Logs/Logs.tsx b/src/Routes/Logs/Logs.tsx index 7376047..9b47957 100644 --- a/src/Routes/Logs/Logs.tsx +++ b/src/Routes/Logs/Logs.tsx @@ -10,23 +10,19 @@ import { TableHead, TableRow, } from "@mui/material"; -import { SampleLogData } from "../../Components/SampleData/SampleData"; import LoginChecker from "../../Components/LoginChecker/LoginChecker"; import { useQuery } from "react-query"; -import { GetLogs, UserInfo } from "../../Components/Api/Api"; -import { - OldSessionState, - ProductLog, - ProductLogEntry, -} from "../../Interfaces/Interfaces"; +import { GetLogs } from "../../Components/Api/Api"; +import { ProductLog } from "../../Interfaces/Interfaces"; import { useState } from "react"; import { useSelector } from "react-redux"; import GetToday from "../../Components/LogsPage/GetToday/GetToday"; +import { RootState } from "../../Plugins/Redux/Store/Store"; export default function Logs() { const logs = useQuery("logs", GetLogs, { retry: 0 }); const old_session_checked = useSelector( - (state: OldSessionState) => state.old_session_checked.value + (state: RootState) => state.old_session_checked.value ); const [searchTerm, setSearchTerm] = useState(""); const [searchToday, setSearchToday] = useState(""); diff --git a/src/Routes/Product/Product.tsx b/src/Routes/Product/Product.tsx index a45d1dd..0f9f41b 100644 --- a/src/Routes/Product/Product.tsx +++ b/src/Routes/Product/Product.tsx @@ -14,11 +14,9 @@ import { DeleteProduct, GetProduct } from "../../Components/Api/Api"; import { useMutation, useQuery, useQueryClient } from "react-query"; import ProductIcon from "../../Components/Icons/ProductIcon/ProductIcon"; import { useSelector } from "react-redux"; -import { - OldSessionState, - ProductHistoryEntry, -} from "../../Interfaces/Interfaces"; +import { ProductHistoryEntry } from "../../Interfaces/Interfaces"; import moment from "moment"; +import { RootState } from "../../Plugins/Redux/Store/Store"; export default function Product() { const navigate = useNavigate(); @@ -41,7 +39,7 @@ export default function Product() { }, }); const old_session_checked = useSelector( - (state: OldSessionState) => state.old_session_checked.value + (state: RootState) => state.old_session_checked.value ); if (isLoading || !old_session_checked) { return ( diff --git a/src/Routes/Products/Products.tsx b/src/Routes/Products/Products.tsx index a48a69a..23d1dc5 100644 --- a/src/Routes/Products/Products.tsx +++ b/src/Routes/Products/Products.tsx @@ -1,16 +1,15 @@ -import React, { useState } from "react"; +import React from "react"; import styles from "../../styles"; import { useNavigate } from "react-router-dom"; import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon"; import AddIcon from "../../Components/Icons/AddIcon/AddIcon"; import { Button } from "@mui/material"; -import { SampleProducts } from "../../Components/SampleData/SampleData"; import ViewManager from "../../Components/ProductsPage/ViewManager"; import { useQuery } from "react-query"; import { GetProducts } from "../../Components/Api/Api"; import LoginChecker from "../../Components/LoginChecker/LoginChecker"; import { useSelector } from "react-redux"; -import { OldSessionState } from "../../Interfaces/Interfaces"; +import { RootState } from "../../Plugins/Redux/Store/Store"; export default function Products() { const navigate = useNavigate(); @@ -20,7 +19,7 @@ export default function Products() { error, } = useQuery("products", GetProducts, { retry: 0 }); const old_session_checked = useSelector( - (state: OldSessionState) => state.old_session_checked.value + (state: RootState) => state.old_session_checked.value ); if (isLoading || !old_session_checked) { return ( diff --git a/src/routes/Inventory/Inventory.tsx b/src/routes/Inventory/Inventory.tsx index 23b0803..a0aaa79 100644 --- a/src/routes/Inventory/Inventory.tsx +++ b/src/routes/Inventory/Inventory.tsx @@ -4,22 +4,19 @@ import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon"; import { Button, Table, - TableBody, TableCell, TableContainer, TableHead, TableRow, } from "@mui/material"; -import { SampleInventoryData } from "../../Components/SampleData/SampleData"; -import StockRenderer from "../../Components/InventoryPage/StockRenderer/StockRenderer"; import LoginChecker from "../../Components/LoginChecker/LoginChecker"; -import { GetProducts, UpdateProduct } from "../../Components/Api/Api"; -import { useMutation, useQuery, useQueryClient } from "react-query"; +import { GetProducts } from "../../Components/Api/Api"; +import { useQuery } from "react-query"; import RowRenderer from "../../Components/InventoryPage/RowRenderer/RowRenderer"; import AddIcon from "../../Components/Icons/AddIcon/AddIcon"; import { useNavigate } from "react-router-dom"; import { useSelector } from "react-redux"; -import { OldSessionState } from "../../Interfaces/Interfaces"; +import { RootState } from "../../Plugins/Redux/Store/Store"; export default function Inventory() { const { @@ -29,7 +26,7 @@ export default function Inventory() { } = useQuery("products", GetProducts, { retry: 0 }); const navigate = useNavigate(); const old_session_checked = useSelector( - (state: OldSessionState) => state.old_session_checked.value + (state: RootState) => state.old_session_checked.value ); if (isLoading || !old_session_checked) { return (