Filtering By Grades Data Is Connected But Doesn't add Just Shows

src/views/Product/Desktop/ProductOverAll/index.js

@@ -118,7 +118,7 @@ export const ProductOverAll = ({
           sendingTime={20}
           numberOfSuggest={160}
           profit={12000}
-          // showProduct
+          showProduct
           productCat={grades[book?.gradeId]}
           productImg={`https://dnvn.ir/api/v1/file/${book?.fileIds}`}
           productName={type === "digital"

src/views/Products/index.js

@@ -47,6 +47,8 @@ export const Products = ({
     gradeFilter(filter.grade);
   }, [filter]);
 
+
+
   const Product = ({ productsType, product, index }) => {
     return (
       <>
@@ -148,6 +150,7 @@ export const Products = ({
                     />
                   ))
                 : books?.map((product, index) => (
+                  
                     <Product
                       key={index}
                       productsType={filter.productsType}
@@ -163,7 +166,7 @@ export const Products = ({
             // style={{ height: 1500 }}
           >
             <Sidebar onChange={onChange}/>
-            <Main />
+            <Main filter={filter}/>
           </div>
         )}
       </div>

src/views/Products/layouts/Main.js

@@ -15,17 +15,9 @@ export const Main = ({ isMobile,
   selectedGrade,
   gradeFilterBooks,
   setHeaderOptions,
-  headerOptions, }) => {
-  const [filter, setFilter] = useState({
-    search: "",
-    grade: "",
-    productsType: "کتاب",
-  });
-  const [desktopContentTransform, setDesktopContentTransform] = useState(false);
+  headerOptions,
+  filter }) => {
 
-  const onChange = (name, value) => {
-    setFilter({ ...filter, [name]: value });
-  };
 
   const filteringNavItems = [
     {
@@ -60,7 +52,7 @@ export const Main = ({ isMobile,
         }
       </ul>
     </div>
-    
+     
       <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-between">
         {selectedGrade
           ? gradeFilterBooks?.map((product, index) => (
@@ -70,6 +62,15 @@ export const Main = ({ isMobile,
               product={product}
               index={Number(index)}
               grades={grades}
+              roductName={`کتاب ${product?.name}`}
+                productCat={`پایه ${grades[product?.gradeId]}`}
+                productPrice={100000}
+                productImg={"https://dnvn.ir/api/v1/file/" + product?.fileIds}
+                numberOfRegards={160}
+                productTitleColor='text-blue5F'
+                productCatTextColor='text-blueC0'
+                productHolderBorder=''
+                productHolderHoverBorder='shadow-md'
             />
           ))
           : books?.map((product, index) => (

src/views/Products/layouts/Sidebar.js

@@ -59,10 +59,10 @@ export const Sidebar = ({onChange}) => {
     },
   ]
   return <div className="flex flex-col w-1/4 p-4">
-          <VerticalExpandableProductFilter onChange={onChange} name="grade" preName='پایه' btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
-          <VerticalExpandableProductFilter name="category"  list={categories} title="دسته بندی" searchAble={false}/>
-          
-  </div>;
+  <VerticalExpandableProductFilter onChange={onChange} name="grade" preName='پایه' btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
+  <VerticalExpandableProductFilter name="category"  list={categories} title="دسته بندی" searchAble={false}/>
+  
+</div>;
 };
 
 const mapStateToProps = (state) => ({});