From 1bc3d5029feb269c9b1716d766c2a4d8c345b1f1 Mon Sep 17 00:00:00 2001 From: Mahdi-Ghanbarzadeh Date: Tue, 31 May 2022 18:08:51 +0430 Subject: [PATCH] connect to backend: additional question, order --- src/App.js | 9 +++- src/pages/Product/index.js | 28 +++++++--- .../SellerPanel/Orders/OrderItem/index.js | 18 ++++--- src/pages/SellerPanel/Orders/index.js | 39 +++++--------- .../SellerPanel/SellerPanelSidebar/index.js | 36 +++++++------ src/pages/SellerPanel/index.js | 6 +-- src/pages/ShopInfoPage/index.js | 26 ++++++++++ .../AdditionalQuestion/Question/index.js | 4 +- .../UserPanel/AdditionalQuestion/index.js | 52 ++++++++++--------- src/pages/UserPanel/Orders/OrderItem/index.js | 18 ++++--- src/pages/UserPanel/Orders/index.js | 18 +++++-- src/pages/UserPanel/Sidebar/index.js | 39 ++++++++------ src/store/UserContext.js | 3 ++ 13 files changed, 182 insertions(+), 114 deletions(-) diff --git a/src/App.js b/src/App.js index b710549..1c598ff 100644 --- 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 ( <> diff --git a/src/pages/Product/index.js b/src/pages/Product/index.js index 56fe9df..eb05797 100644 --- 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} - - بزرگ - + + + بزرگ + +
@@ -396,7 +400,15 @@ function Product() { محصولات مشابه
- ( + + ))} + {/* + /> */}
diff --git a/src/pages/SellerPanel/Orders/OrderItem/index.js b/src/pages/SellerPanel/Orders/OrderItem/index.js index 1526ef0..bf5df96 100644 --- 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 = ; const check = ; const shield = ; -const size = ; +const sizeIcon = ; const trash = ; -const color = ; +const colorIcon = ; -function OrderItem({ name, price, img }) { +function OrderItem({ name, price, img, size, color }) { return (
{name} @@ -32,12 +32,16 @@ function OrderItem({ name, price, img }) { {name}
- {size} - XL + + {sizeIcon} + + {size}
- {color} - سبز + + {colorIcon} + + {color}
{money} diff --git a/src/pages/SellerPanel/Orders/index.js b/src/pages/SellerPanel/Orders/index.js index 5459d16..373856f 100644 --- 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() { {!loading && (
- - - - - + {orders.map((element) => ( + + ))}
)}
diff --git a/src/pages/SellerPanel/SellerPanelSidebar/index.js b/src/pages/SellerPanel/SellerPanelSidebar/index.js index 756f176..1981850 100644 --- 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() { - -
  • - - - خروج - -
    • - +
  • + + + خروج + +
    • diff --git a/src/pages/SellerPanel/index.js b/src/pages/SellerPanel/index.js index b3aab28..bac0db4 100644 --- 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 index 3dc493e..1e53208 100644 --- 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 ( <> diff --git a/src/pages/UserPanel/AdditionalQuestion/Question/index.js b/src/pages/UserPanel/AdditionalQuestion/Question/index.js index db4e2dd..0647417 100644 --- 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 }) {
    - +
    diff --git a/src/pages/UserPanel/AdditionalQuestion/index.js b/src/pages/UserPanel/AdditionalQuestion/index.js index b9ea771..f9eb688 100644 --- 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 = ; -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 }); }); }; diff --git a/src/pages/UserPanel/Orders/OrderItem/index.js b/src/pages/UserPanel/Orders/OrderItem/index.js index 1526ef0..bf5df96 100644 --- a/src/pages/UserPanel/Orders/OrderItem/index.js +++ b/src/pages/UserPanel/Orders/OrderItem/index.js @@ -12,11 +12,11 @@ import { faBrush } from "@fortawesome/free-solid-svg-icons"; const money = ; const check = ; const shield = ; -const size = ; +const sizeIcon = ; const trash = ; -const color = ; +const colorIcon = ; -function OrderItem({ name, price, img }) { +function OrderItem({ name, price, img, size, color }) { return (
    {name} @@ -32,12 +32,16 @@ function OrderItem({ name, price, img }) { {name}
    - {size} - XL + + {sizeIcon} + + {size}
    - {color} - سبز + + {colorIcon} + + {color}
    {money} diff --git a/src/pages/UserPanel/Orders/index.js b/src/pages/UserPanel/Orders/index.js index 0f20327..083dcf2 100644 --- a/src/pages/UserPanel/Orders/index.js +++ b/src/pages/UserPanel/Orders/index.js @@ -12,12 +12,13 @@ const override = ` function Orders() { let [loading, setLoading] = useState(true); let [orders, setOrders] = useState([]); + console.log(orders); useEffect(() => { - axiosInstance.get(`/accounts/user_orders`).then((res) => { + axiosInstance.get(`/accounts/user_orders/`).then((res) => { if (res.status === 200) { - setLoading(false); setOrders(res.data); + setLoading(false); } }); }, []); @@ -35,7 +36,16 @@ function Orders() { {!loading && (
    - ( + + ))} + {/* + /> */}
    )}
    diff --git a/src/pages/UserPanel/Sidebar/index.js b/src/pages/UserPanel/Sidebar/index.js index 8ffd1ad..6934108 100644 --- a/src/pages/UserPanel/Sidebar/index.js +++ b/src/pages/UserPanel/Sidebar/index.js @@ -1,12 +1,21 @@ import classes from "./Sidebar.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 } from "react"; import UserContext from "../../../store/UserContext"; function Sidebar() { - 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 ( <> diff --git a/src/store/UserContext.js b/src/store/UserContext.js index 936a021..d00b946 100644 --- a/src/store/UserContext.js +++ b/src/store/UserContext.js @@ -33,6 +33,9 @@ export function UserContextProvider({ children }) { }; const logout = () => { setUser({ + type: "", + username: "", + phoneNumber: "", email: "", auth: false, });