reza fixed mobile products bug

src/components/Select/index.js

@@ -22,7 +22,7 @@ function Select({
         defaultValue={defaultValue}
       >
         {options.map((option, index) => (
-          <option key={index} className="">
+          <option key={index} className="text-sm lg:text-tiny">
             {option}
           </option>
         ))}

src/redux/reducers/book.js

@@ -16,19 +16,23 @@ const initialState = {
   sortFilterCourse: null,
   selectedGrade: null,
   selectedSort: "پربازدید ترین ها",
-  productTypes: [
-    "کتاب فیزیکی",
-    "کتاب دیجیتال",
-    "دوره ویدئویی",
-    "بسته های آموزشی",
-  ],
+  productTypes:
+    window.innerWidth >= 1024
+      ? ["کتاب فیزیکی", "کتاب دیجیتال", "دوره ویدئویی", "بسته های آموزشی"]
+      : [
+          "نوع محصول",
+          "کتاب فیزیکی",
+          "کتاب دیجیتال",
+          "دوره ویدئویی",
+          "بسته های آموزشی",
+        ],
   filterOptions: {
     grade: "",
     subject: "",
     productType: null,
     available: false,
     sort: null,
-    search : "",
+    search: "",
   },
 };
 

src/redux/reducers/public.js

@@ -41,21 +41,38 @@ const initialState = {
   activeCategory: null,
   categories: null,
   bookSection: null,
-  grades: {
-    0: "پیش دبستان",
-    1: "اول",
-    2: "دوم",
-    3: "سوم",
-    4: "چهارم",
-    5: "پنجم",
-    6: "ششم",
-    7: "هفتم",
-    8: "هشتم",
-    9: "نهم",
-    10: "دهم",
-    11: "یازدهم",
-    12: "دوازدهم",
-  },
+  grades:
+    window.innerWidth >= 1024
+      ? {
+          0: "پیش دبستان",
+          1: "اول",
+          2: "دوم",
+          3: "سوم",
+          4: "چهارم",
+          5: "پنجم",
+          6: "ششم",
+          7: "هفتم",
+          8: "هشتم",
+          9: "نهم",
+          10: "دهم",
+          11: "یازدهم",
+          12: "دوازدهم",
+        }
+      : {
+          0: "پایه تحصیلی",
+          1: "اول",
+          2: "دوم",
+          3: "سوم",
+          4: "چهارم",
+          5: "پنجم",
+          6: "ششم",
+          7: "هفتم",
+          8: "هشتم",
+          9: "نهم",
+          10: "دهم",
+          11: "یازدهم",
+          12: "دوازدهم",
+        },
   headerOptions: {
     shown: false,
     logo: false,

src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { userAddress, userFactor } from "../../../../../redux/actions";
+import { userAddress, userFactor, publicApi } from "../../../../../redux/actions";
 import { Link, useNavigate } from "react-router-dom";
 
 //components
@@ -19,6 +19,8 @@ const ProfileAddress = ({
   closeBottomSheet,
   mobile,
   isDark,
+  headerOptions,
+  setHeaderOptions
 }) => {
   const navigation = useNavigate();
   const Location = ({ address, active }) => {
@@ -97,6 +99,7 @@ const ProfileAddress = ({
   };
 
   React.useEffect(() => {
+    setHeaderOptions(headerOptions);
     getFactorInfo({ userId });
     getList();
   }, []);
@@ -140,6 +143,7 @@ const mapDispatchToProps = {
   getFactorInfo: userFactor.info,
   update: userFactor.update,
   getList: userAddress.list,
+  setHeaderOptions: publicApi.setHeaderOptions,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(ProfileAddress);

src/views/Products/layouts/Mobile/Header.js

@@ -13,10 +13,13 @@ export const Header = ({
   filterOptions,
   levels,
   productTypes,
-  isDark
+  isDark,
 }) => {
   return (
-    <header className="w-full px-4 fixed top-0 left-0  pb-5 z-10" style={{backgroundColor: isDark ? '#061B30' : 'white'}}>
+    <header
+      className="w-full px-4 fixed top-0 left-0  pb-5 z-10"
+      style={{ backgroundColor: isDark ? "#061B30" : "white" }}
+    >
       <Search
         backgroundColor="bg-gray-100"
         borderColor="border-grayDB dark:border-gray45"
@@ -34,7 +37,9 @@ export const Header = ({
           borderColor="border-grayDB dark:border-gray45"
           backgroundColor="bg-gray-100"
           onChange={(name, value) =>
-            setFilterOptions({ ...filterOptions, [name]: value })
+            value === "نوع محصول"
+              ? setFilterOptions({ ...filterOptions, [name]: null })
+              : setFilterOptions({ ...filterOptions, [name]: value })
           }
           name="productType"
           options={productTypes}
@@ -45,7 +50,9 @@ export const Header = ({
           borderColor="border-grayDB dark:border-gray45"
           backgroundColor="bg-gray-100"
           onChange={(name, value) =>
-            setFilterOptions({ ...filterOptions, [name]: value })
+            value === "پایه تحصیلی"
+              ? setFilterOptions({ ...filterOptions, [name]: null })
+              : setFilterOptions({ ...filterOptions, [name]: value })
           }
           name="grade"
           options={Object.values(levels)}
@@ -59,7 +66,7 @@ const mapStateToProps = (state) => ({
   levels: state.publicApi.grades,
   productTypes: state.book.productTypes,
   filterOptions: state.book.filterOptions,
-  isDark: state.publicApi.isDark
+  isDark: state.publicApi.isDark,
 });
 
 const mapDispatchToProps = {

src/views/Products/layouts/Mobile/Main.js

@@ -88,17 +88,17 @@ export const Main = ({ books, filterOptions, grades }) => {
             </div>
           </Link>
         ))
-      : bySearchFilter?.map((product, index) => (
+      : bySearchFilter?.map((product) => (
           <>
             {(productType ? productType === "کتاب دیجیتال" : true) && (
               <Link
-                key={index}
+                key={product?.product[0]?.id}
                 to={"/products/" + product?.id}
                 className={`w-1/2 flex flex-col p-3`}
               >
                 <img
                   src={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
-                  className="w-full rounded-md mb-3"
+                  className="w-full rounded-md mb-3 object-contain"
                 />
                 <strong className="text-blue5F dark:text-white text-tiny font-bold lg:text-sm lg:font-medium mb-2">
                   {"کتاب دیجیتال" + " " + product?.name}
@@ -113,7 +113,7 @@ export const Main = ({ books, filterOptions, grades }) => {
             )}
             {(productType ? productType === "کتاب فیزیکی" : true) && (
               <Link
-                key={index}
+                key={product?.product[1]?.id}
                 to={"/products/" + product?.id}
                 className={`w-1/2 flex flex-col p-3`}
               >