diff --git a/public/index.html b/public/index.html index 0226f9201..3590bc81f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index db58be2a9..610c4fa0b 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -6,12 +6,7 @@ const Footer = () => { diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 55f307060..e4abb3f66 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,43 +1,66 @@ -import React from 'react' -import { NavLink } from 'react-router-dom' -import { useSelector } from 'react-redux' +import React from "react"; +import { NavLink } from "react-router-dom"; +import { useSelector } from "react-redux"; const Navbar = () => { - const state = useSelector(state => state.handleCart) - return ( - - ) -} - -export default Navbar \ No newline at end of file +export default Navbar; diff --git a/src/components/forms/addProduct.jsx b/src/components/forms/addProduct.jsx new file mode 100644 index 000000000..4397641ac --- /dev/null +++ b/src/components/forms/addProduct.jsx @@ -0,0 +1,219 @@ +import { Button, Label } from "flowbite-react"; +import { Formik, Form, Field } from "formik"; +import { object, string } from "zod"; +import { toFormikValidationSchema } from "zod-formik-adapter"; + +const addProudctFormSchema = object({ + title: string({ + required_error: "*Please enter a title", + }), + price: string({ + required_error: "*Please enter an price", + }), + description: string({ + required_error: "*Please enter description", + }), + image: string({ + required_error: "*Image is required", + }), + category: string({ + required_error: "*Category is required", + }), +}); + +export type TProduct = { + id?: string, + title?: string, + price?: string, + description?: string, + image?: string, + category?: string, +}; + +const AddProductForm = ({ + id, + title, + price, + description, + image, + category, +}: TProduct) => { + return ( + <> + { + alert("Form is submitted. Thank You !!"); + + try { + if (id) { + const productResponse = await fetch( + `https://fakestoreapi.com/products/${Number(id)}`, + { + method: "PUT", + body: JSON.stringify({ + title: values.title, + price: Number(values.price), + description: values.description, + image: values.image, + category: values.category, + }), + } + ); + + if (productResponse.ok) { + const data = await productResponse.json(); + console.log("Data updated successfully", data); + resetForm(); + } else { + throw new Error("Error while updating product"); + } + } else { + const productResponse = await fetch( + "https://fakestoreapi.com/products", + { + method: "POST", + body: JSON.stringify({ + title: values.title, + price: Number(values.price), + description: values.description, + image: values.image, + category: values.category, + }), + } + ); + + if (productResponse.ok) { + const data = await productResponse.json(); + console.log("Data added successfully", data); + resetForm(); + } else { + throw new Error("Error while adding product"); + } + } + } catch (error) { + console.log(error); + } + }} + validationSchema={toFormikValidationSchema(addProudctFormSchema)} + > + {(formikSate) => { + const errors = formikSate.errors; + + return ( +
+
+
+
+ +
+ + {!!errors.title && ( +
{errors.title}
+ )} +
+
+ +
+
+
+ +
+ + {!!errors.price && ( +
{errors.title}
+ )} +
+
+ +
+
+
+ +
+ + {!!errors.price && ( +
+ {errors.description} +
+ )} +
+
+ +
+
+
+ +
+ + {!!errors.image && ( +
{errors.image}
+ )} +
+
+ +
+
+
+ +
+ + {!!errors.category && ( +
{errors.category}
+ )} +
+
+ +
+ +
+
+ ); + }} + + + ); +}; + +export default AddProductForm; diff --git a/src/components/main.jsx b/src/components/main.jsx index da21f8be3..76e3f710b 100644 --- a/src/components/main.jsx +++ b/src/components/main.jsx @@ -13,11 +13,11 @@ const Home = () => { />
-
New Season Arrivals
+
+ New Season Arrivals +

- This is a wider card with supporting text below as a natural - lead-in to additional content. This content is a little bit - longer. + Explore the men and women new collection available in the shops.

diff --git a/src/index.js b/src/index.js index 553454b35..6cb4a0c5d 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,7 @@ import { Register, Checkout, PageNotFound, + addProduct, } from "./pages"; import ScrollToTop from "./components/ScrollToTop"; import { Toaster } from "react-hot-toast"; diff --git a/src/pages/Checkout.jsx b/src/pages/Checkout.jsx index d918a9c04..4702dac3b 100644 --- a/src/pages/Checkout.jsx +++ b/src/pages/Checkout.jsx @@ -43,7 +43,8 @@ const Checkout = () => {