keannu125/Ivy-Frontend
1
0
Fork 0
mirror of https://github.com/lemeow125/Ivy-Frontend.git synced 2025-06-29 17:05:44 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Redirect once done adding new product

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

44
src/Routes/AddProduct/AddProduct.tsx
View file

@ -1,44 +0,0 @@
import React, { useEffect } 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 { Navigate } from "react-router-dom";
import { LoginState } from "../../Interfaces/Interfaces";
import { useSelector } from "react-redux";
export default function AddProduct() {
const navigate = useNavigate();
const logged_in = useSelector((state: LoginState) => state.logged_in.value);
if (!logged_in) {
return <Navigate to="/Login" replace />;
}
return (
<div>
<div style={styles.conter_center}>
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<AddIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
Add Product
</h1>
</div>
<div
style={{
...styles.content_row,
...{ justifyContent: "flex-end", flex: 1 },
}}
></div>
</div>
</div>
<Button
onClick={() => navigate("/Products/AddProduct")}
style={styles.button_add_product}
>
<AddIcon size={32} color="white" />
<p style={{ ...styles.text_white, ...styles.text_M }}>Add Product</p>
</Button>
</div>
);
}

76
src/Routes/NewProduct/NewProduct.tsx Normal file
View file

@ -0,0 +1,76 @@
import React, { useEffect, useState } from "react";
import styles from "../../styles";
import { useNavigate } from "react-router-dom";
import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
import { Button } from "@mui/material";
import { Navigate } from "react-router-dom";
import { LoginState } from "../../Interfaces/Interfaces";
import { useSelector } from "react-redux";
import { AddProduct } from "../../Components/Api/Api";
import { useMutation, useQueryClient } from "react-query";
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({
mutationFn: AddProduct,
onSuccess: () => {
queryClient.invalidateQueries("products");
},
});
if (!logged_in) {
return <Navigate to="/Login" replace />;
}
return (
<div>
<div style={{ ...styles.content_row, ...{ flex: 1 } }}>
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
<AddIcon size={64} color="white" />
<h1 style={{ ...styles.text_white, ...styles.text_XL }}>
Add Product
</h1>
</div>
</div>
<div style={styles.content_center}>
<div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
<div style={styles.content_row}>
<p
style={{
...styles.text_white,
...styles.text_M,
...{ marginRight: 4 },
}}
>
Product Name
</p>
<input
style={{ width: "32rem" }}
onChange={(e: { target: { value: any } }) => {
setProduct(e.target.value);
}}
maxLength={20}
/>
</div>
<div style={{ padding: 8 }} />
<Button
onClick={async () => {
try {
await mutation.mutate({
name: product,
});
navigate("/Products");
} catch (error) {}
}}
style={styles.button_add_product}
>
<p style={{ ...styles.text_white, ...styles.text_M }}>
Add Product
</p>
</Button>
</div>
</div>
</div>
);
}

50
src/Routes/Products/Products.tsx
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>
);
}