Merge pull request #3 from puria-asr/search-page-handeling

Search page handeling
pourya-asrzad · Feb 2, 2023 · 4cef6cc · 4cef6cc
2 parents f980293 + d79a33d
commit 4cef6cc
Show file tree

Hide file tree

Showing 84 changed files with 2,392 additions and 501 deletions.
diff --git a/src/apis/apiSlice.js b/src/apis/apiSlice.js
@@ -8,7 +8,20 @@ const baseQuery = fetchBaseQuery({
   credentials: "same-origin",
   prepareHeaders: (headers, { getState, endpoint }) => {
     const token = localStorage.getItem("token");
-    console.log(endpoint);
+    if (
+      endpoint === "fetchHomeProducts" ||
+      endpoint === "fetchHomecategory" ||
+      endpoint === "fetchCategorysProducts" ||
+      endpoint === "fetchCategoryscategory" ||
+      endpoint === "fetchSubcategory" ||
+      endpoint === "categorysInHome" ||
+      endpoint === "subcategoryHome" ||
+      endpoint === "productsHasDiscount" ||
+      endpoint === "subcategoryHome" ||
+      endpoint === "fetchSingleProduct"
+    ) {
+      return headers;
+    }
     if (endpoint === REFRESH_TOKEN_URL) {
       const token = localStorage.getItem("refreshToken");
       headers.set("refreshToken", token);
@@ -22,15 +35,13 @@ const baseQuery = fetchBaseQuery({
 const baseQueryWithReauth = async (args, api, extraOptions) => {
   let result = await baseQuery(args, api, extraOptions);
   if (result?.error?.originalStatus === 401) {
-    console.log("sending refresh token");
     // send refresh token to get new access token
     const refreshResult = await baseQuery(
       { url: REFRESH_TOKEN_URL, method: "POST" },
       { ...api, endpoint: REFRESH_TOKEN_URL },
       extraOptions
     );
-    console.log(result);
-    console.log(refreshResult);
+
     if (refreshResult?.data) {
       // store the new token
 

diff --git a/src/assets/images/404.gif b/src/assets/images/404.gif
diff --git a/src/assets/styles/public.scss b/src/assets/styles/public.scss
@@ -1,5 +1,5 @@
 @import 'reset.scss';
-
+@import './some-componetns-style//saveBtn.scss';
 @font-face {
     font-family: 'vazir';
     src: url('../font/Vazir-Regular-FD.woff2');
@@ -154,7 +154,7 @@ input:focus + label {
 .Profile-picture{
   position: absolute;
   left: 43%;
-  bottom: -59px;
+  top: 6px;
 }
 .profileimg{
   overflow: hidden;
@@ -164,8 +164,8 @@ input:focus + label {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-radius: 50%;
-  border: 2px solid blue;
+  border-radius: 12%;
+  border: 2px solid #babae7;
 }
 .notDataanimation{
   position: absolute;
@@ -174,4 +174,52 @@ input:focus + label {
   transform: translate(-50%,-50%);
   width: 40rem;
   height: 26rem;
+}
+label{
+  outline: none !important;
+}
+ //delete dafault link style
+.link-route{
+  color: black;
+  text-decoration: none;
+ }
+ .link-route:hover{
+color: black;
+}
+.priceWithoutDiscount{
+
+    position: absolute;
+    bottom: 4px;
+    color: gray;
+    font-size: 14px;
+    right: 40px;
+   .priceWithoutDiscounthr{
+    width: 48px;
+    height: 0.5px;
+    background: #a0a0a0;
+    position: absolute;
+    top: 9px;
+   }
+}
+.priceWithoutDiscountcategory{
+  position: absolute;
+  bottom: -18px;
+  color: gray;
+  font-size: 14px;
+  left: 31px;
+  .priceWithoutDiscounthr{
+    width: 48px;
+    height: 0.5px;
+    background: #a0a0a0;
+    position: absolute;
+    top: 9px;
+   }
+}
+
+
+.centerevrything{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
 }
diff --git a/src/assets/styles/some-componetns-style/saveBtn.scss b/src/assets/styles/some-componetns-style/saveBtn.scss
@@ -0,0 +1,97 @@
+/* CSS */
+.button-82-pushable {
+    position: relative;
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    outline-offset: 4px;
+    transition: filter 250ms;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+  }
+
+  .button-82-shadow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 12px;
+    background: hsl(0deg 0% 0% / 0.25);
+    will-change: transform;
+    transform: translateY(2px);
+    transition:
+      transform
+      600ms
+      cubic-bezier(.3, .7, .4, 1);
+  }
+
+  .button-82-edge {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 12px;
+    background:linear-gradient(to left, hsl(197deg 85% 5%) 0%, hsl(174deg 96% 28%) 8%, hsl(178deg 85% 16%) 92%, hsl(340deg 60% 33%) 100%);
+  }
+
+  .button-82-front {
+    display: block;
+    position: relative;
+    padding: 8px 27px;
+    border-radius: 12px;
+    font-size: 1.1rem;
+    color: white;
+    background: hsl(202deg 98% 47%);
+    will-change: transform;
+    transform: translateY(-4px);
+    transition:
+      transform
+      600ms
+      cubic-bezier(.3, .7, .4, 1);
+  }
+
+  @media (min-width: 768px) {
+    .button-82-front {
+      font-size: 1.25rem;
+      padding: 5px 41px;
+    }
+  }
+
+  .button-82-pushable:hover {
+    filter: brightness(110%);
+    -webkit-filter: brightness(110%);
+  }
+
+  .button-82-pushable:hover .button-82-front {
+    transform: translateY(-6px);
+    transition:
+      transform
+      250ms
+      cubic-bezier(.3, .7, .4, 1.5);
+  }
+
+  .button-82-pushable:active .button-82-front {
+    transform: translateY(-2px);
+    transition: transform 34ms;
+  }
+
+  .button-82-pushable:hover .button-82-shadow {
+    transform: translateY(4px);
+    transition:
+      transform
+      250ms
+      cubic-bezier(.3, .7, .4, 1.5);
+  }
+
+  .button-82-pushable:active .button-82-shadow {
+    transform: translateY(1px);
+    transition: transform 34ms;
+  }
+
+  .button-82-pushable:focus:not(:focus-visible) {
+    outline: none;
+  }
diff --git a/src/components/Form-select/EditFormSelect.jsx b/src/components/Form-select/EditFormSelect.jsx
@@ -0,0 +1,43 @@
+
+import React, { useEffect } from 'react';
+import { useState } from 'react';
+import Form from 'react-bootstrap/Form';
+import { useFetchcategoryQuery, useFetchProductsQuery, useFetchsubcategoryQuery } from '../../store/products/productsApiSlice';
+
+const EditFormSelect = ({ pagenum, handelSelectChange, subcategory = null, placeholder, initialValue,
+    setSubcategory, changeSubcategoryid }) => {
+
+    const { data: catrgory = [] } = useFetchcategoryQuery()
+    const { data: subcatrgoryData = [] } = useFetchsubcategoryQuery()
+    const subcategoryDataFilter = subcatrgoryData.filter((sub) => {
+        return sub.category == changeSubcategoryid
+    })
+    useEffect(() => {
+        console.log(subcategory);
+        if (subcategory && changeSubcategoryid) {
+            if (document.getElementById('filtercategory')) {
+                setSubcategory(subcategoryDataFilter[0].id)
+                console.log(subcategoryDataFilter[0].id)
+            }
+        }
+    }, [changeSubcategoryid]);
+    // if (document.getElementById('filtercategory')) {
+    //     console.log(document.getElementById('filtercategory').value);
+    // }
+    return (
+
+        <form >
+            <Form.Select value={initialValue} onChange={(e) => handelSelectChange(e.target.value)} style={{ width: '6rem' }} id='filtercategory' size="sm">
+                {!initialValue && <option value={'null'}>{placeholder}</option>}
+                {!subcategory ? catrgory.map((element) => {
+                    return <option value={element.id} id={element.id} key={element.id}>{element.name}</option>
+                }) : subcategoryDataFilter.map((element) => {
+                    return <option value={element.id} id={element.id} key={element.id}>{element.name}</option>
+                })}
+            </Form.Select>
+        </form >
+
+    );
+}
+
+export default EditFormSelect;
diff --git a/src/components/Form-select/FormSelect.component.jsx b/src/components/Form-select/FormSelect.component.jsx
@@ -2,26 +2,26 @@
 import React from 'react';
 import { useState } from 'react';
 import Form from 'react-bootstrap/Form';
-import { useFetchcategoryQuery, useFetchProductsQuery } from '../../store/products/productsApiSlice';
+import { useFetchcategoryQuery, useFetchProductsQuery, useFetchsubcategoryQuery } from '../../store/products/productsApiSlice';
 
-const FormSelect = ({ pagenum, handelSelectChange }) => {
+const FormSelect = ({ pagenum, handelSelectChange, subcategory = null, placeholder, initialValue, changeSubcategoryid }) => {
 
     const { data: catrgory = [] } = useFetchcategoryQuery()
-
-    function handelSelectChangeh(e) {
-        handelSelectChange(e.target.value);
-        console.log(e.target.value)
-    }
-
+    const { data: subcatrgoryData = [] } = useFetchsubcategoryQuery()
+    const subcategoryDataFilter = subcatrgoryData.filter((sub) => {
+        return sub.category == changeSubcategoryid
+    })
     return (
         <form >
-            <Form.Select onChange={handelSelectChangeh} style={{ width: '6rem' }} id='filtercategory' size="sm">
-                <option value={"null"}>همه</option>
-                {catrgory.map((element) => {
+            <Form.Select value={initialValue} onChange={(e) => handelSelectChange(e.target.value)} style={{ width: '6rem' }} id='filtercategory' size="sm">
+                {!initialValue && <option value={'null'}>{placeholder}</option>}
+                {!subcategory ? catrgory.map((element) => {
+                    return <option value={element.id} id={element.id} key={element.id}>{element.name}</option>
+                }) : subcategoryDataFilter.map((element) => {
                     return <option value={element.id} id={element.id} key={element.id}>{element.name}</option>
                 })}
             </Form.Select>
-        </form>
+        </form >
 
     );
 }

diff --git a/src/components/add-to-cart-sector/AddToCartSector.component.jsx b/src/components/add-to-cart-sector/AddToCartSector.component.jsx
@@ -6,8 +6,8 @@ import { numberWithCommas } from '../../utils/functions.utils';
 import Styles from './AddToCartSector.module.scss'
 import Hr from '../hr/Hr.component';
 import AddToCartBtn from '../buttons/AddToCartBtn.component';
-const AddToCartSector = () => {
-    const price = numberWithCommas(10000000)
+const AddToCartSector = ({ price }) => {
+    const priceWithComma = numberWithCommas(price)
     return (
         <div className={Styles.AddToCartSector}>
             <div>
@@ -37,9 +37,14 @@ const AddToCartSector = () => {
 
 
                 <div className={Styles.cardpricepart}>
-                    <span>
-                        {price}
-                    </span>
+                    <div style={{ direction: 'rtl' }}>
+                        <span>
+                            {priceWithComma}
+                        </span>
+                        <span>
+                            تومان
+                        </span>
+                    </div>
                     <div>
                         <span>
                             قیمت مصرف کننده

diff --git a/src/components/buttons/SaveBtn.component.jsx b/src/components/buttons/SaveBtn.component.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const SaveBtnComponent = ({ children, type, onClick }) => {
+
+    return (
+        <div type={type} onClick={onClick} style={{ position: 'relative', display: 'flex' }}>
+            <button className="button-82-pushable" role="button">
+                <span className="button-82-shadow"></span>
+                <span className="button-82-edge"></span>
+                <span className="button-82-front ">
+                    {children}
+                </span>
+            </button>
+        </div>
+    );
+}
+
+export default SaveBtnComponent;
diff --git a/src/components/buttons/buttons.module.scss b/src/components/buttons/buttons.module.scss
@@ -7,4 +7,5 @@
     padding: 6px 0;
     display: flex;
     justify-content: center;
-}
+}
+
diff --git a/src/components/category-filter/CategoryFilter.component.jsx b/src/components/category-filter/CategoryFilter.component.jsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import ExistFilter from "./exist-filter/ExistFilter.component";
 import PriceFilter from "./price-filter/PriceFilter.component";
 import Styles from './CategoryFilter.module.scss'
-const CategoryFilter = () => {
+const CategoryFilter = ({ setfilterAsquantity, setFetchObj }) => {
     const [isEnd, setIsEnd] = useState("filters_parent");
     window.onscroll = function () {
         if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
@@ -13,8 +13,8 @@ const CategoryFilter = () => {
     }
     return (
         <div className={`${Styles[isEnd]}`}>
-            <ExistFilter />
-            <PriceFilter />
+            <ExistFilter setfilterAsquantity={setfilterAsquantity} />
+            <PriceFilter setFetchObj={setFetchObj} />
         </div>
     );
 }