Redirect once done adding new product

This commit is contained in:
Keannu Christian Bernasol 2023-03-06 15:38:21 +08:00
parent 325fbf87db
commit 2dedfdbe04
7 changed files with 137 additions and 59 deletions

View file

@ -1,4 +1,4 @@
import React, { useEffect } from "react";
import React from "react";
import styles from "../../styles";
import { useNavigate } from "react-router-dom";
import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
@ -9,13 +9,57 @@ 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";
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>
<div style={styles.content_row}>
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<ProductsIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
Products
</h1>
</div>
</div>
<h1 style={{ ...styles.text_white, ...styles.text_L }}>
Loading Products...
</h1>
</div>
</div>
);
} else if (error) {
return (
<div>
<div style={styles.content_row}>
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<ProductsIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
Products
</h1>
</div>
</div>
<h1 style={{ ...styles.text_red, ...styles.text_L }}>
Error loading products
</h1>
</div>
</div>
);
}
return (
<div>
<div style={styles.content_row}>
@ -33,7 +77,7 @@ export default function Products() {
}}
>
<Button
onClick={() => navigate("/AddProduct")}
onClick={() => navigate("/NewProduct")}
style={styles.button_add_product}
>
<AddIcon size={32} color="white" />
@ -44,7 +88,7 @@ export default function Products() {
</div>
</div>
</div>
<ViewManager Products={SampleProducts} />
<ViewManager Products={products} />
</div>
);
}