keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-05-14 10:31:07 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Separated session checker and page login verifier into components

Browse source
This commit is contained in:
Keannu Christian Bernasol 2023-03-06 20:09:14 +08:00
parent b12f205efd
commit c3ae196b6c
10 changed files with 101 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,18 +8,12 @@ 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 { Navigate } from "react-router-dom";
import { LoginState } from "../../Interfaces/Interfaces";
import { useSelector } from "react-redux";
import LoginChecker from "../../Components/LoginChecker/LoginChecker";
export default function Dashboard() {
const logged_in = useSelector((state: LoginState) => state.logged_in.value);
if (!logged_in) {
return <Navigate to="/Login" replace />;
}
return (
<div>
<LoginChecker />
<div style={styles.flex_row}>
<HomeIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>Dashboard</h1>

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

@ -10,17 +10,12 @@ import {
TableRow,
} from "@mui/material";
import { SampleLogData } from "../../Components/SampleData/SampleData";
import { Navigate } from "react-router-dom";
import { LoginState } from "../../Interfaces/Interfaces";
import { useSelector } from "react-redux";
import LoginChecker from "../../Components/LoginChecker/LoginChecker";
export default function Logs() {
const logged_in = useSelector((state: LoginState) => state.logged_in.value);
if (!logged_in) {
return <Navigate to="/Login" replace />;
}
return (
<div>
<LoginChecker />
<div style={styles.flex_row}>
<LogsIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>Logs</h1>

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

@ -8,10 +8,9 @@ import { LoginState } from "../../Interfaces/Interfaces";
import { useSelector } from "react-redux";
import { AddProduct } from "../../Components/Api/Api";
import { useMutation, useQueryClient } from "react-query";
import LoginChecker from "../../Components/LoginChecker/LoginChecker";
export default function NewProduct() {
const navigate = useNavigate();
const logged_in = useSelector((state: LoginState) => state.logged_in.value);
const [product, setProduct] = useState("");
const queryClient = useQueryClient();
const mutation = useMutation({
@ -20,11 +19,9 @@ export default function NewProduct() {
queryClient.invalidateQueries("products");
},
});
if (!logged_in) {
return <Navigate to="/Login" replace />;
}
return (
<div>
<LoginChecker />
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<AddIcon size={64} color="white" />

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

@ -2,30 +2,58 @@ import * as React from "react";
import styles from "../../styles";
import { Button } from "@mui/material";
import { useParams } from "react-router-dom";
import { Navigate } from "react-router-dom";
import { LoginState } from "../../Interfaces/Interfaces";
import { useSelector } from "react-redux";
import LoginChecker from "../../Components/LoginChecker/LoginChecker";
import { GetProduct } from "../../Components/Api/Api";
import { useQuery } from "react-query";
export default function Product() {
let { id } = useParams();
const logged_in = useSelector((state: LoginState) => state.logged_in.value);
if (!logged_in) {
return <Navigate to="/Login" replace />;
const {
data: product,
isLoading,
error,
} = useQuery({
queryKey: ["product", Number(id)],
queryFn: () => GetProduct(Number(id)),
});
if (isLoading) {
return (
<div>
<LoginChecker />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
Individual Product View for id {id}
</h1>
<div style={styles.content_center}>
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
Loading product...
</h1>
</div>
</div>
);
}
return (
<div>
<LoginChecker />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
Individual Product View for id {id}
</h1>
<Button
style={{
...styles.button_baseline,
...{ backgroundColor: "#80b38b" },
}}
variant="contained"
>
Login
</Button>
<div style={styles.content_center}>
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
Product Name: {product.name}
</h1>
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
Date Added: {product.date_added}
</h1>
<Button
style={{
...styles.button_baseline,
...{ backgroundColor: "#80b38b", justifySelf: "center" },
}}
variant="contained"
>
Login
</Button>
</div>
</div>
);
}

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

@ -6,26 +6,21 @@ 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 { Navigate } from "react-router-dom";
import { LoginState } from "../../Interfaces/Interfaces";
import { useSelector } from "react-redux";
import { useQuery } from "react-query";
import { GetProducts } from "../../Components/Api/Api";
import LoginChecker from "../../Components/LoginChecker/LoginChecker";
export default function Products() {
const navigate = useNavigate();
const logged_in = useSelector((state: LoginState) => state.logged_in.value);
const {
data: products,
isLoading,
error,
} = useQuery("products", GetProducts, { retry: 0 });
if (!logged_in) {
return <Navigate to="/Login" replace />;
}
if (isLoading) {
return (
<div>
<LoginChecker />
<div style={styles.content_row}>
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>