Merge pull request #52 from golnooshasefi/connect-to-backend--shoppin…

…g-list-and-favorite connect to backend: shopping list and favorite
golnooshasefi · May 31, 2022 · 0d7914b · 0d7914b
2 parents 72d8075 + 4ae58ac
commit 0d7914b
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 104 deletions.
diff --git a/src/axios.js b/src/axios.js
@@ -1,5 +1,5 @@
 import axios from "axios";
-const baseUrl = "http://127.0.0.1:8000/";
+const baseUrl = "http://45.15.25.48:8000/";
 
 const axiosInstance = axios.create({
   baseURL: baseUrl,

diff --git a/src/pages/AccountBox/index.js b/src/pages/AccountBox/index.js
@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Login } from "./Login";
 import { motion } from "framer-motion";
 import { AccountContext } from "./accountContext";
 import { Signup } from "./Signup";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import classes from "./AccountBox.module.scss";
+import UserContext from "../../store/UserContext";
 
 function getBackdropVariants() {
   return {
@@ -30,6 +31,15 @@ const expandingTransition = {
 };
 
 export default function AccountBox(props) {
+  let { auth, type } = useContext(UserContext);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (auth) {
+      navigate("/");
+    }
+  }, [auth, navigate]);
+
   let backdropVariants = getBackdropVariants();
   const [isExpanded, setExpanded] = useState(false);
   const [active, setActive] = useState("signin");

diff --git a/src/pages/Product/index.js b/src/pages/Product/index.js
@@ -51,14 +51,24 @@ function Product() {
     count: 5,
     color: "#868e96",
     activeColor: "#6667ab",
-    value: 0,
+    value: product.score,
     a11y: true,
     isHalf: true,
     emptyIcon: <i className="far fa-star" />,
     halfIcon: <i className="fa fa-star-half-alt" />,
     filledIcon: <i className="fa fa-star" />,
     onChange: (newValue) => {
       console.log(`Example 2: new value is ${newValue}`);
+      console.log([product.id, newValue]);
+      axiosInstance
+        .post(`/accounts/show_better_clothes/`, {
+          data: [product.id, newValue],
+        })
+        .then((res) => {
+          if (res.status === 200) {
+            setProduct((prev) => ({ ...prev, is_favorite: false }));
+          }
+        });
     },
   };
 
@@ -104,68 +114,52 @@ function Product() {
   // }, [productId]);
 
   const favoriteHandler = () => {
-    console.log(product)
-    if(product.is_favorite) {
+    console.log(product);
+    if (product.is_favorite) {
       axiosInstance
-      .post(`accounts/delete_from_favorite/`, {
-        data: product.id,
-      })
-      .then((res) => {
-        if (res.status === 200) {
-          setProduct(prev => ({...prev, is_favorite: false}))
-        }
-      });
-    }
-    else{
+        .post(`accounts/delete_from_favorite/`, {
+          data: product.id,
+        })
+        .then((res) => {
+          if (res.status === 200) {
+            setProduct((prev) => ({ ...prev, is_favorite: false }));
+          }
+        });
+    } else {
       axiosInstance
-      .post(`accounts/add_to_favorite/`, {
-        data: product.id,
-      })
-      .then((res) => {
-        if (res.status === 200) {
-          setProduct(prev => ({...prev, is_favorite: true}))
-        }
-      });
+        .post(`accounts/add_to_favorite/`, {
+          data: product.id,
+        })
+        .then((res) => {
+          if (res.status === 200) {
+            setProduct((prev) => ({ ...prev, is_favorite: true }));
+          }
+        });
     }
-
   };
 
   const addProductHandler = () => {
-    if(product.is_in_cart) {
+    if (product.is_in_cart) {
       axiosInstance
-      .post(`accounts/delete_from_cart/`, {
-        data: product.id,
-      })
-      .then((res) => {
-        if (res.status === 200) {
-          setProduct(prev => ({...prev, is_in_cart: false}))
-        }
-      });
-    }
-    else {
+        .post(`accounts/delete_from_cart/`, {
+          data: product.id,
+        })
+        .then((res) => {
+          if (res.status === 200) {
+            setProduct((prev) => ({ ...prev, is_in_cart: false }));
+          }
+        });
+    } else {
       axiosInstance
-      .post(`accounts/add_to_cart/`, {
-        data: product.id,
-      })
-      .then((res) => {
-        if (res.status === 200) {
-          setProduct(prev => ({...prev, is_in_cart: true}))
-        }
-      });
+        .post(`accounts/add_to_cart/`, {
+          data: product.id,
+        })
+        .then((res) => {
+          if (res.status === 200) {
+            setProduct((prev) => ({ ...prev, is_in_cart: true }));
+          }
+        });
     }
-
-
-    console.log("add to shop");
-    axiosInstance
-      .post(`accounts/add_to_cart/`, {
-        data: product.id,
-      })
-      .then((res) => {
-        if (res.status === 200) {
-          console.log(res);
-          console.log(res.data);
-        }
-      });
   };
 
   return (
@@ -187,15 +181,22 @@ function Product() {
                 src={product.upload}
                 alt={product.product_name}
               ></img>
-              {!product.is_favorite && <span
-                className={classes.Product__imgBox__regular}
-                onClick={favoriteHandler}
-              >
-                {heart}
-              </span>}
-              {product.is_favorite && <span onClick={favoriteHandler} className={classes.Product__imgBox__solid}>{heartSolid}</span>}
-
-
+              {!product.is_favorite && (
+                <span
+                  className={classes.Product__imgBox__regular}
+                  onClick={favoriteHandler}
+                >
+                  {heart}
+                </span>
+              )}
+              {product.is_favorite && (
+                <span
+                  onClick={favoriteHandler}
+                  className={classes.Product__imgBox__solid}
+                >
+                  {heartSolid}
+                </span>
+              )}
             </div>
             <div className={classes.Product__descriptionBox}>
               <span className={classes.Product__descriptionBox__name}>
@@ -383,7 +384,11 @@ function Product() {
                 isDisable={product.inventory === 0}
                 onClickHandler={addProductHandler}
               >
-                {product.inventory === 0 ? "ناموجود" : !product.is_in_cart ? "افزودن به سبد" : " حذف از سبد"}
+                {product.inventory === 0
+                  ? "ناموجود"
+                  : !product.is_in_cart
+                  ? "افزودن به سبد"
+                  : " حذف از سبد"}
               </Button>
             </div>
             <div className={classes.Product__similarBox}>

diff --git a/src/pages/ProductsList/index.js b/src/pages/ProductsList/index.js
@@ -99,7 +99,7 @@ function ProductsList() {
             price={99000}
             priceOff={100000}
             img={"./images/clothes/11bg.png"}
-          /> */}{" "}
+          />{" "} */}
         </div>
         <div className={classes.Products__filterContainer}>
           <Filter />

diff --git a/src/pages/SellerPanel/index.js b/src/pages/SellerPanel/index.js
@@ -10,24 +10,14 @@ import { useContext, useEffect, useLayoutEffect } from "react";
 import UserContext from "../../store/UserContext";
 
 function SellerPanel() {
-  const { user } = useContext(UserContext);
+  const { auth, type } = useContext(UserContext);
   const navigate = useNavigate();
 
   useEffect(() => {
-    console.log(!user.auth || (!user.auth && user.type !== "user"));
-    if (!user.auth || (!user.auth && user.type !== "seller")) {
-      console.log("sellerrrrr2");
-      // navigate("/404");
+    if (!auth || (!auth && type !== "seller")) {
+      navigate("/404");
     }
-  }, []);
-
-  useLayoutEffect(() => {
-    console.log(!user.auth || (!user.auth && user.type !== "user"));
-    if (!user.auth || (!user.auth && user.type !== "seller")) {
-      console.log("sellerrrrr2");
-      // navigate("/404");
-    }
-  }, [user.auth, user.type, navigate]);
+  }, [auth, type, navigate]);
 
   return (
     <>

diff --git a/src/pages/ShoppingList/ShoppingItem/index.js b/src/pages/ShoppingList/ShoppingItem/index.js
@@ -9,17 +9,30 @@ import { faShield } from "@fortawesome/free-solid-svg-icons";
 import { faRulerVertical } from "@fortawesome/free-solid-svg-icons";
 import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import { faBrush } from "@fortawesome/free-solid-svg-icons";
+import axiosInstance from "../../../axios";
 const money = <FontAwesomeIcon icon={faMoneyBill} />;
 const check = <FontAwesomeIcon icon={faCircleCheck} />;
 const shield = <FontAwesomeIcon icon={faShield} />;
 const size = <FontAwesomeIcon icon={faRulerVertical} />;
 const trash = <FontAwesomeIcon icon={faTrashCan} />;
 const color = <FontAwesomeIcon icon={faBrush} />;
 
-
-function ShoppingItem({ name, price, img, id }) {
+function ShoppingItem({ name, price, img, id, setProducts }) {
   function deleteProductHandler() {
-
+    console.log("delete");
+    axiosInstance
+      .post(`accounts/delete_from_cart/`, {
+        data: id,
+      })
+      .then((res) => {
+        if (res.status === 200) {
+          axiosInstance.get(`/accounts/show_cart/`).then((res) => {
+            if (res.status === 200) {
+              setProducts(res.data);
+            }
+          });
+        }
+      });
   }
   return (
     <div id={id} className={classes.ShoppingItem}>
@@ -57,7 +70,6 @@ function ShoppingItem({ name, price, img, id }) {
         </div>
         <div className={classes.ShoppingItem__description__container}>
           <span className={classes.ShoppingItem__description__icon}>
-
             {shield}
           </span>
           <span className={classes.ShoppingItem__description__price}>
@@ -81,7 +93,10 @@ function ShoppingItem({ name, price, img, id }) {
           </span>
         </div>
       </div>
-      <button className={classes.ShoppingItem__btn} onClick={deleteProductHandler}>
+      <button
+        className={classes.ShoppingItem__btn}
+        onClick={deleteProductHandler}
+      >
         {trash}
         &nbsp; حذف
       </button>