Merge pull request #35 from Juanpi92/statistic

feat(AdminProduct.jsx) Add product functionality
Juanpi92 · Sep 14, 2023 · 62af69b · 62af69b
2 parents e9f0e86 + 03e6083
commit 62af69b
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 17 deletions.
diff --git a/src/components/AdminProductsList/index.jsx b/src/components/AdminProductsList/index.jsx
@@ -9,6 +9,7 @@ import {
 } from "@mui/icons-material";
 import { delProduct } from "../../reducer/shoopingReducer";
 import { AppContext } from "../../contexts/AppContext";
+import axios from "axios";
 
 const AdminProductsList = ({ setDataToEdit }) => {
   const state = useSelector((state) => state);
@@ -91,6 +92,7 @@ const ProductsActionBar = ({ product, setProductToShow }) => {
 };
 
 const ProductListItem = ({ product, setDataToEdit }) => {
+  const { setLoader } = useContext(AppContext);
   let { id, name, type, portion, price, src } = product;
   const state = useSelector((state) => state);
   const userAdmin = state.user;
@@ -105,10 +107,12 @@ const ProductListItem = ({ product, setDataToEdit }) => {
           "auth-token": userAdmin.user.token,
         },
       };
-
-      // await axios.request(options);
+      setLoader(true);
+      await axios.request(options);
       dispatch(delProduct(id));
+      setLoader(false);
     } catch (error) {
+      setLoader(false);
       console.log(error);
     }
   };

diff --git a/src/components/AsideAdmin/index.jsx b/src/components/AsideAdmin/index.jsx
@@ -86,7 +86,7 @@ export default function AsideAdmin() {
             </li>
           </ul>
         </nav>
-        {/* {loader && <Loader />} */}
+        {loader && <Loader />}
       </aside>
       <UserAgent data={user} />
     </>

diff --git a/src/components/Loader/index.jsx b/src/components/Loader/index.jsx
@@ -5,7 +5,7 @@ const Loader = () => {
   return (
     <>
       <div className="modal">
-        <div class="lds-ring">
+        <div className="lds-ring">
           <div></div>
           <div></div>
           <div></div>

diff --git a/src/components/Loader/style.css b/src/components/Loader/style.css
@@ -7,7 +7,7 @@
   align-items: center;
   transform: translate(0, 0);
   position: fixed;
-  z-index: 1000;
+  z-index: 1200;
   top: 0;
   left: 0;
   right: 0;

diff --git a/src/pages/AdminProducts/AddProduct/index.jsx b/src/pages/AdminProducts/AddProduct/index.jsx
@@ -1,15 +1,78 @@
 import React, { useContext, useState } from "react";
 import "./styles.css";
 import { AddAPhotoSharp } from "@mui/icons-material";
-import { AppContext } from './../../../contexts/AppContext';
+import { AppContext } from "./../../../contexts/AppContext";
+import axios from "axios";
+import { useDispatch, useSelector } from "react-redux";
+import { addItemProduct } from "../../../reducer/shoopingReducer";
 
 export default function AddProduct() {
   const [imagePreview, setImagePreview] = useState(null);
-  const { setShowProductModal } = useContext(AppContext);
+  const state = useSelector((state) => state);
+  const { user } = state.user;
+  const dispatch = useDispatch();
+  const { setShowProductModal, setIsAddProduct, setLoader } =
+    useContext(AppContext);
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    console.log(e.target.name.value);
+    e.target.file.parentElement.firstElementChild.style.border = "none";
+    e.target.name.style.borderColor = "#000000";
+    e.target.portion.style.borderColor = "#000000";
+    e.target.price.style.borderColor = "#000000";
+    e.target.type.style.borderColor = "#000000";
+    if (e.target.file.files.length === 0) {
+      e.target.file.parentElement.firstElementChild.style.border =
+        "1px solid red";
+      return;
+    }
+    if (e.target.name.value === "") {
+      e.target.name.style.borderColor = "red";
+      return;
+    }
+    if (e.target.portion.value === "") {
+      e.target.portion.style.borderColor = "red";
+      return;
+    }
+    if (e.target.price.value === "") {
+      e.target.price.style.borderColor = "red";
+      return;
+    }
+
+    if (e.target.type.value === "") {
+      e.target.type.style.borderColor = "red";
+      return;
+    }
+    //here we do the form data and send to the backend
+    const product = new FormData();
+    product.append("image", e.target.file.files[0]);
+    product.append("name", e.target.name.value);
+    product.append("portion", e.target.portion.value);
+    product.append("price", e.target.price.value);
+    product.append("type", e.target.type.value);
+    try {
+      const options = {
+        method: "POST",
+        url: "https://vegetanizando-api.vercel.app/product",
+        headers: {
+          "Content-Type":
+            "multipart/form-data; boundary=---011000010111000001101001",
+          "auth-token": user.token,
+        },
+        data: product,
+      };
+      setShowProductModal(false);
+      setIsAddProduct(false);
+      setLoader(true);
+      let newProduct = await axios.request(options);
+      dispatch(addItemProduct(newProduct.data));
+
+      setLoader(false);
+    } catch (error) {
+      setLoader(false);
+      alert("ocorreu um error");
+      console.log(error);
+    }
   };
 
   const handleImageChange = (e) => {
@@ -22,7 +85,7 @@ export default function AddProduct() {
 
   const handleCancel = () => {
     setShowProductModal(false);
-  }
+  };
 
   return (
     <form onSubmit={(e) => handleSubmit(e)} className="form-add-container">
@@ -43,24 +106,40 @@ export default function AddProduct() {
       </label>
       <label htmlFor="portion" className="form-label">
         Porção
-        <input className="form-portion-item" type="text" />
+        <input className="form-portion-item" type="text" name="portion" />
       </label>
       <div className="form-align-content">
         <label htmlFor="price" className="form-label">
           Preço
-          <input className="form-price-item" name="price" type="number" />
+          <input
+            className="form-price-item"
+            name="price"
+            type="number"
+            step="0.01"
+          />
         </label>
         <label htmlFor="" className="form-label">
           Tipo
-          <select className="form-select-content" name="" id="">
-            <option className="form-select-option" defaultValue="">Selecione</option>
-            <option className="form-select-option" value="food">Comida</option>
-            <option className="form-select-option" value="drink">Bebida</option>
+          <select className="form-select-content" name="type" id="type">
+            <option className="form-select-option" default value="">
+              Selecione
+            </option>
+            <option className="form-select-option" value="food">
+              Comida
+            </option>
+            <option className="form-select-option" value="drink">
+              Bebida
+            </option>
           </select>
         </label>
       </div>
       <div className="form-align-content">
-        <input onClick={() => handleCancel()} className="form-btn" type="submit" value="Cancelar" />
+        <input
+          onClick={() => handleCancel()}
+          className="form-btn"
+          type="button"
+          value="Cancelar"
+        />
         <input className="form-btn" type="submit" value="Cadastrar" />
       </div>
     </form>