Side Bar Filtering Works But Has Errors (Not Loading The Data)

src/components/Checkbox/index.js

@@ -17,7 +17,7 @@ export default function Checkbox(props) {
       </svg>
 
       <div className="checkbox-container">
-        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick} />
+        <input className="checkbox-input" name={props.name} id={"ch"+props.name} type="checkbox" checked={props.checked} onClick={props.onclick}/>
         <label className="checkbox" htmlFor={"ch"+props.name}>
           <span>
             <svg width="12px" height="10px">

src/components/VerticalExpandableProductFilter/index.js

@@ -66,9 +66,11 @@ export default function VerticalExpandableProductFilter(props) {
                 <Checkbox name={`ch${name}_${i}`} checked={checkedBox[i]} onclick={(e) => {
                   checkedBox[i] = !checkedBox[i]
                   setChecked(checkedBox)
-                }}/>
+                  props.onChange(name , item1.name);
+                  
+                }} />
                 <strong className="text-xs font-light text-gray-500">
-                  {item1.name}
+                  {props.preName ? props.preName + ' ' + item1.name : item1.name}
                 </strong>
               </div>
 

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

@@ -45,55 +45,55 @@ export const ProductOverAll = ({
               {"پایه" + " " + grades[book?.gradeId]}
             </div>
             <div className="flex float-left justify-end">
-            <div className="p-2">
-              <StarRating />
+              <div className="p-2">
+                <StarRating />
+              </div>
+              <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
+                بیش از 160 نفر امتیاز داده اند
+              </div>
             </div>
-            <div className="p-2 border-0 border-solid border-r border-gray-100 text-sm text-gray-400">
-              بیش از 160 نفر امتیاز داده اند
-                          </div>
-          </div>
           </div>
 
-      <div className="py-4 border-0 border-b border-solid border-gray-100">
-        <div className="flex items-center py-2">
-        <h1>نوع کتاب</h1>
-        <p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p>
-        </div>
-          <div className="w-full flex flex-row justify-between items-center mt-4">
-        <Button
-          title="نسخه فیزیکی"
-          backgroundColor={isDark ? "bg-transparent" : "bg-white"}
-          border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
-          color={isDark ? "text-white" : "text-blueC0"}
-          active={type === "physical"}
-          selectable={true}
-          onClick={() => setType("physical")}
-          borderType='dashed'
-          customStyle=''
-          twPaddings='py-4 px-12'
-          radius={false}
-        />
-        <Button
-          title="نسخه دیجیتال"
-          backgroundColor={isDark ? "bg-transparent" : "bg-white"}
-          border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
-          selectable={true}
-          active={type === "digital"}
-          color={isDark ? "text-white" : "text-blueC0"}
-          onClick={() => setType("digital")}
-          radius={false}
-          twPaddings='py-4 px-12'
-        />
-        <Button
-          title="مشاهده نمونه"
-          backgroundColor={isDark ? "bg-transparent" : "bg-white"}
-          border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }}
-          radius={false}
-          twPaddings='py-4 px-6'
-          color={isDark ? "text-white" : "text-red19"}
-        />
-      </div>
-      </div>
+          <div className="py-4 border-0 border-b border-solid border-gray-100">
+            <div className="flex items-center py-2">
+              <h1>نوع کتاب</h1>
+              <p className=" text-xs px-4 text-blueE8">به من کمک کن انتخاب کنم</p>
+            </div>
+            <div className="w-full flex flex-row justify-between items-center mt-4">
+              <Button
+                title="نسخه فیزیکی"
+                backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+                border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+                color={isDark ? "text-white" : "text-blueC0"}
+                active={type === "physical"}
+                selectable={true}
+                onClick={() => setType("physical")}
+                borderType='dashed'
+                customStyle=''
+                twPaddings='py-4 px-12'
+                radius={false}
+              />
+              <Button
+                title="نسخه دیجیتال"
+                backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+                border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
+                selectable={true}
+                active={type === "digital"}
+                color={isDark ? "text-white" : "text-blueC0"}
+                onClick={() => setType("digital")}
+                radius={false}
+                twPaddings='py-4 px-12'
+              />
+              <Button
+                title="مشاهده نمونه"
+                backgroundColor={isDark ? "bg-transparent" : "bg-white"}
+                border={{ color: isDark ? "#ffffff55" : "#C01919", width: "1px" }}
+                radius={false}
+                twPaddings='py-4 px-6'
+                color={isDark ? "text-white" : "text-red19"}
+              />
+            </div>
+          </div>
         </div>
         <div>
           <h1>aopdjsoqweqweqweqweqweWajsduh</h1>

src/views/Products/index.js

@@ -33,6 +33,10 @@ export const Products = ({
   const onChange = (name, value) => {
     setFilter({ ...filter, [name]: value });
   };
+  const onchange1 = (name, value) =>{
+    console.log(name)
+    console.log(value)
+  }
 
   useEffect(() => {
     getList();
@@ -158,7 +162,7 @@ export const Products = ({
             className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3`}
             // style={{ height: 1500 }}
           >
-            <Sidebar />
+            <Sidebar onChange={onChange}/>
             <Main />
           </div>
         )}

src/views/Products/layouts/Sidebar.js

@@ -3,12 +3,12 @@ import { connect } from "react-redux";
 import Checkbox from "../../../components/Checkbox";
 import VerticalExpandableProductFilter from "../../../components/VerticalExpandableProductFilter";
 
-export const Sidebar = ({}) => {
+export const Sidebar = ({onChange}) => {
 
   const filteronGrade = [
     {
       id:0,
-      name: "پایه اول",
+      name: "اول",
       expaneded: false,
       subList: [{
         id:1,
@@ -17,7 +17,7 @@ export const Sidebar = ({}) => {
     },
     {
       id:1,
-      name: "پایه دوم",
+      name: "دوم",
       expaneded: false,
       subList: [{
         id:1,
@@ -26,7 +26,7 @@ export const Sidebar = ({}) => {
     },
     {
       id:2,
-      name: "پایه سوم",
+      name: "سوم",
       expaneded: false,
       subList: [],
     },
@@ -59,7 +59,7 @@ export const Sidebar = ({}) => {
     },
   ]
   return <div className="flex flex-col w-1/4 p-4">
-          <VerticalExpandableProductFilter name="grades" btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
+          <VerticalExpandableProductFilter onChange={onChange} name="grade" preName='پایه' btnTitle='مشاهده همه ی کالاهای آموزشی' list={filteronGrade} title="پایه تحصیلی" searchAble={true}/>
           <VerticalExpandableProductFilter name="category"  list={categories} title="دسته بندی" searchAble={false}/>
           
   </div>;