Merge pull request #53 from golnooshasefi/connect-to-backend--additio…

…nal-question,-order connect to backend: additional question, order
golnooshasefi · May 31, 2022 · 65fa6f3 · 65fa6f3
2 parents 0d7914b + 1bc3d50
commit 65fa6f3
Show file tree

Hide file tree

Showing 13 changed files with 182 additions and 114 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { routes } from "./routes";
 import { Route, Routes } from "react-router-dom";
 import ShopInfoPage from "./pages/ShopInfoPage";
@@ -7,8 +7,15 @@ import SellerPanel from "./pages/SellerPanel";
 import ShoppingList from "./pages/ShoppingList";
 import FAQ from "./pages/FAQ";
 import AddProductSurvey from "./pages/SellerPanel/AddProduct/AddProductSurvey";
+import axiosInstance from "./axios";
 
 function App() {
+  useEffect(() => {
+    axiosInstance.post(`/accounts/initialze_recom/`).then((res) => {
+      console.log(res);
+    });
+  }, []);
+
   return (
     <>
       <Routes>

diff --git a/src/pages/Product/index.js b/src/pages/Product/index.js
@@ -2,7 +2,7 @@ import Footer from "../../components/layout/Footer";
 import MainNavigation from "../../components/layout/MainNavigation";
 import Button from "../../components/shared/Button";
 import classes from "./Product.module.scss";
-import { useParams, useNavigate } from "react-router-dom";
+import { useParams, useNavigate, Link } from "react-router-dom";
 import ReactStars from "react-rating-stars-component";
 import axiosInstance from "./../../axios";
 
@@ -43,6 +43,8 @@ function Product() {
   const { productId } = useParams();
   const [product, setProduct] = useState([]);
   const [similar, setSimilar] = useState([]);
+  console.log(similar);
+  console.log("shop id" + product.shop);
 
   const navigate = useNavigate();
 
@@ -339,11 +341,13 @@ function Product() {
                 >
                   {shop}
                 </span>
-                <span
-                  className={classes.Product__sellerBox__nameBox__sellerName}
-                >
-                  بزرگ
-                </span>
+                <Link to={`/shop-page/${product.shop}`}>
+                  <span
+                    className={classes.Product__sellerBox__nameBox__sellerName}
+                  >
+                    بزرگ
+                  </span>
+                </Link>
               </div>
               <div className={classes.Product__sellerBox__featureBox}>
                 <span className={classes.Product__sellerBox__featureBox__icon}>
@@ -396,7 +400,15 @@ function Product() {
                 محصولات مشابه
               </span>
               <div className={classes.Product__similarBox__items}>
-                <SimilarItem
+                {similar.map((element) => (
+                  <SimilarItem
+                    link={element.upload}
+                    name={"شلوار مردانه سیدونا مدل MSI03072-403"}
+                    price={"199999"}
+                    priceOff={"200000"}
+                  />
+                ))}
+                {/* <SimilarItem
                   link={"./images/clothes/11bg.png"}
                   name={"شلوار مردانه سیدونا مدل MSI03072-403"}
                   price={"199999"}
@@ -425,7 +437,7 @@ function Product() {
                   name={"شلوار مردانه سیدونا مدل MSI03072-403"}
                   price={"199999"}
                   priceOff={"200000"}
-                />
+                /> */}
               </div>
             </div>
           </section>

diff --git a/src/pages/SellerPanel/Orders/OrderItem/index.js b/src/pages/SellerPanel/Orders/OrderItem/index.js
@@ -12,11 +12,11 @@ import { faBrush } from "@fortawesome/free-solid-svg-icons";
 const money = <FontAwesomeIcon icon={faMoneyBill} />;
 const check = <FontAwesomeIcon icon={faCircleCheck} />;
 const shield = <FontAwesomeIcon icon={faShield} />;
-const size = <FontAwesomeIcon icon={faRulerVertical} />;
+const sizeIcon = <FontAwesomeIcon icon={faRulerVertical} />;
 const trash = <FontAwesomeIcon icon={faTrashCan} />;
-const color = <FontAwesomeIcon icon={faBrush} />;
+const colorIcon = <FontAwesomeIcon icon={faBrush} />;
 
-function OrderItem({ name, price, img }) {
+function OrderItem({ name, price, img, size, color }) {
   return (
     <div className={classes.OrderItem}>
       <img src={img} className={classes.OrderItem__pic} alt={name} />
@@ -32,12 +32,16 @@ function OrderItem({ name, price, img }) {
           <span className={classes.OrderItem__description__name}>{name}</span>
         </div>
         <div className={classes.OrderItem__description__container}>
-          <span className={classes.OrderItem__description__icon}>{size}</span>
-          <span className={classes.OrderItem__description__price}>XL</span>
+          <span className={classes.OrderItem__description__icon}>
+            {sizeIcon}
+          </span>
+          <span className={classes.OrderItem__description__price}>{size}</span>
         </div>
         <div className={classes.OrderItem__description__container}>
-          <span className={classes.OrderItem__description__icon}>{color}</span>
-          <span className={classes.OrderItem__description__price}>سبز</span>
+          <span className={classes.OrderItem__description__icon}>
+            {colorIcon}
+          </span>
+          <span className={classes.OrderItem__description__price}>{color}</span>
         </div>
         <div className={classes.OrderItem__description__container}>
           <span className={classes.OrderItem__description__icon}>{money}</span>

diff --git a/src/pages/SellerPanel/Orders/index.js b/src/pages/SellerPanel/Orders/index.js
@@ -16,10 +16,11 @@ function Orders() {
   let [orders, setOrders] = useState([]);
 
   useEffect(() => {
-    axiosInstance.get(``).then((res) => {
+    axiosInstance.get(`/accounts/show_order_to_shop/`).then((res) => {
       if (res.status === 200) {
-        setLoading(false);
+        console.log(res);
         setOrders(res.data);
+        setLoading(false);
       }
     });
   }, []);
@@ -47,31 +48,15 @@ function Orders() {
       <BeatLoader color="#6667ab" loading={loading} css={override} size={30} />
       {!loading && (
         <div className={classes.container__orderItems}>
-          <OrderItem
-            name={" شلوار مردانه سیدونا مدل MSI03072-403"}
-            price={199000}
-            img={"./images/clothes/11bg.png"}
-          />
-          <OrderItem
-            name={" شلوار مردانه سیدونا مدل MSI03072-403"}
-            price={199000}
-            img={"./images/clothes/11bg.png"}
-          />
-          <OrderItem
-            name={" شلوار مردانه سیدونا مدل MSI03072-403"}
-            price={199000}
-            img={"./images/clothes/11bg.png"}
-          />
-          <OrderItem
-            name={" شلوار مردانه سیدونا مدل MSI03072-403"}
-            price={199000}
-            img={"./images/clothes/11bg.png"}
-          />
-          <OrderItem
-            name={" شلوار مردانه سیدونا مدل MSI03072-403"}
-            price={199000}
-            img={"./images/clothes/11bg.png"}
-          />
+          {orders.map((element) => (
+            <OrderItem
+              name={element.product_name}
+              price={element.product_price}
+              img={element.upload}
+              size={element.product_size}
+              color={element.product_color}
+            />
+          ))}
         </div>
       )}
     </div>

diff --git a/src/pages/SellerPanel/SellerPanelSidebar/index.js b/src/pages/SellerPanel/SellerPanelSidebar/index.js
@@ -1,13 +1,21 @@
 import classes from "./SellerPanelSidebar.module.scss";
 import MainNavigation from "../../../components/layout/MainNavigation";
 import classNames from "classnames";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useContext, useState } from "react";
 import UserContext from "../../../store/UserContext";
 
 function SellerPanelSidebar() {
   const [subMenuIsOpen, setSubMenuIsOpen] = useState(false);
-  const { user } = useContext(UserContext);
+  const { user, logout } = useContext(UserContext);
+  const navigate = useNavigate();
+
+  function logoutHandler() {
+    logout();
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    navigate("/");
+  }
 
   return (
     <>
@@ -98,19 +106,17 @@ function SellerPanelSidebar() {
             </li>
           </Link>
 
-          <Link to={"/"} className={classes.link}>
-            <li className={classes["side-nav__item"]}>
-              <a href="#" className={classNames(classes["side-nav__link"])}>
-                <i
-                  className={classNames(
-                    classes["side-nav__icon"],
-                    "fa-solid fa-arrow-right-from-bracket"
-                  )}
-                />
-                <span>خروج</span>
-              </a>
-            </li>
-          </Link>
+          <li onClick={logoutHandler} className={classes["side-nav__item"]}>
+            <a href="#/" className={classNames(classes["side-nav__link"])}>
+              <i
+                className={classNames(
+                  classes["side-nav__icon"],
+                  "fa-solid fa-arrow-right-from-bracket"
+                )}
+              />
+              <span>خروج</span>
+            </a>
+          </li>
         </ul>
       </nav>
     </>

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

diff --git a/src/pages/ShopInfoPage/index.js b/src/pages/ShopInfoPage/index.js
@@ -1,7 +1,33 @@
 import classes from "./ShopInfoPage.module.scss";
 import MainNavigation from "../../components/layout/MainNavigation";
 import classNames from "classnames";
+import { useParams } from "react-router-dom";
+import axiosInstance from "../../axios";
+import { useEffect, useState } from "react";
 function ShopInfoPage() {
+  const { shopId } = useParams();
+  const [information, setInformation] = useState([]);
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    console.log(shopId);
+    if (shopId) {
+      axiosInstance.get(`/accounts/product_info/${shopId}/`).then((res) => {
+        if (res.status === 200) {
+          setProducts(res.data);
+          // setLoading(false);
+        }
+      });
+
+      axiosInstance.get(`/accounts/product_info/${shopId}/`).then((res) => {
+        if (res.status === 200) {
+          setProducts(res.data);
+          // setLoading(false);
+        }
+      });
+    }
+  }, [shopId]);
+
   return (
     <>
       <MainNavigation />

diff --git a/src/pages/UserPanel/AdditionalQuestion/Question/index.js b/src/pages/UserPanel/AdditionalQuestion/Question/index.js
@@ -2,7 +2,7 @@ import classes from "./Question.module.scss";
 import { Marginer } from "../../../../components/marginer";
 import ReactStars from "react-rating-stars-component";
 
-function Question({ id, option, onSelect }) {
+function Question({ id, upload, option, onSelect }) {
   const Stars = {
     size: 25,
     count: 5,
@@ -24,7 +24,7 @@ function Question({ id, option, onSelect }) {
       <Marginer direction="vertical" margin="3rem" />
       <div className={classes.Question__container}>
         <div className={classes.Question__container__box}>
-          <img className={classes.Question__img} src={option} alt="" />
+          <img className={classes.Question__img} src={upload} alt="" />
           <ReactStars classNames={classes.Question__star} {...Stars} />
         </div>
       </div>

diff --git a/src/pages/UserPanel/AdditionalQuestion/index.js b/src/pages/UserPanel/AdditionalQuestion/index.js
@@ -17,28 +17,28 @@ import { BeatLoader } from "react-spinners";
 import UserContext from "../../../store/UserContext";
 const questionIcon = <FontAwesomeIcon icon={faCircleQuestion} />;
 
-const questions = [
-  {
-    id: "1",
-    option: "./../images/q7/1.jpg",
-  },
-  {
-    id: "2",
-    option: "./../images/q7/2.jpg",
-  },
-  {
-    id: "3",
-    option: "./../images/q7/3.jpg",
-  },
-  {
-    id: "4",
-    option: "./../images/q7/4.jpg",
-  },
-  {
-    id: "5",
-    option: "./../images/q7/5.jpg",
-  },
-];
+// const questions = [
+//   {
+//     id: "1",
+//     option: "./../images/q7/1.jpg",
+//   },
+//   {
+//     id: "2",
+//     option: "./../images/q7/2.jpg",
+//   },
+//   {
+//     id: "3",
+//     option: "./../images/q7/3.jpg",
+//   },
+//   {
+//     id: "4",
+//     option: "./../images/q7/4.jpg",
+//   },
+//   {
+//     id: "5",
+//     option: "./../images/q7/5.jpg",
+//   },
+// ];
 
 const override = `
   display: inline-block;
@@ -48,10 +48,11 @@ const override = `
 function AdditionalQuestion() {
   const { user } = useContext(UserContext);
 
-  let [loading, setLoading] = useState(false);
+  let [loading, setLoading] = useState(true);
   let [questions, setQuestions] = useState([]);
   const [answers, setAnswers] = useState({});
   const navigate = useNavigate();
+  console.log(questions);
 
   const setAnswerHandler = useCallback((id, option) => {
     setAnswers((answers) => ({ ...answers, [id]: option }));
@@ -79,9 +80,9 @@ function AdditionalQuestion() {
   useEffect(() => {
     axiosInstance.get(`/questions/get_pics/`).then((res) => {
       if (res.status === 200) {
-        setLoading(false);
         console.log(res);
         setQuestions(res.data);
+        setLoading(false);
       }
     });
   }, []);
@@ -94,13 +95,14 @@ function AdditionalQuestion() {
       newAnswers.push(Array.isArray(value) ? value.join(",") : value);
     }
     console.log(newAnswers);
+    console.log(answers);
 
     axiosInstance
       .post(`questions/more_questions/`, {
         data: newAnswers,
       })
       .then((res) => {
-        navigate("/products", { replace: true });
+        navigate("/products-list", { replace: true });
       });
   };