keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2024-11-16 22:29:24 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Polished and removed redundant type interfaces for redux states

Browse source
This commit is contained in:
keannu125 2023-03-15 22:50:32 +08:00
parent 3e9a8909a7
commit 6082c572d2
13 changed files with 58 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/Components/DashboardPage/SessionStatsWidget/SessionStatsWidget.tsx
View file

@ -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 (
<div

7
src/Components/Login/Login.tsx
View file

@ -2,13 +2,12 @@ import { useSelector } from "react-redux";
import { Button } from "@mui/material";
import styles from "../../styles";
import { useNavigate } from "react-router-dom";
import { LoggedInUserState } from "../../Interfaces/Interfaces";
import { LoginState } from "../../Interfaces/Interfaces";
import { RootState } from "../../Plugins/Redux/Store/Store";
export default function Login() {
const logged_in = useSelector((state: LoginState) => 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) {

6
src/Components/LoginChecker/LoginChecker.tsx
View file

@ -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) {

36
src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx
View file

@ -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 <div />;
}

8
src/Components/Sidebar/Sidebar.tsx
View file

@ -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 <div />;

30
src/Interfaces/Interfaces.tsx
View file

@ -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 {

9
src/Plugins/Redux/Store/Store.tsx
View file

@ -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<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

6
src/Routes/DailyView/DailyView.tsx
View file

@ -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 (

16
src/Routes/Dashboard/Dashboard.tsx
View file

@ -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 ||

12
src/Routes/Logs/Logs.tsx
View file

@ -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("");

8
src/Routes/Product/Product.tsx
View file

@ -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 (

7
src/Routes/Products/Products.tsx
View file

@ -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 (

11
src/routes/Inventory/Inventory.tsx
View file

@ -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 (