feat: handler modal dynamic

src/component/ProductComponent.js

@@ -15,9 +15,8 @@ export const ProductComponent = observer((props) => {
   const {Option} = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
-  const [filterSupplier, setFilterSupplier] = useState(null);
-  const [filterCategories, setFilterCategories] = useState(null);
-  const [filterSubCategories, setFilterSubCategories] = useState(null);
+  const [filterSupplier, setFilterSupplier] = useState([]);
+  const [filterSubCategories, setFilterSubCategories] = useState([]);
   const modalLoader = useContext(ModalLoaderContext);
 
   const handleEditButton = (data) => {
@@ -163,17 +162,17 @@ export const ProductComponent = observer((props) => {
   const handleRemoveFilter = async () => {
     store.product.filterSupplier = null;
     store.product.filterSubCategory = null;
-    setFilterSupplier(null);
-    setFilterCategories(null);
-    setFilterSubCategories(null);
+    setFilterSupplier([]);
+    store.product.filterCategory = null;
+    setFilterSubCategories([]);
     await store.product.getData();
     store.product.visibleModalFilterProduct = false;
   };
 
   const handleCancelFilter = () => {
-    setFilterSupplier(null);
-    setFilterCategories(null);
-    setFilterSubCategories(null);
+    setFilterSupplier([]);
+    store.product.filterCategory = null;
+    setFilterSubCategories([]);
     store.product.visibleModalFilterProduct = false;
   };
 
@@ -186,14 +185,24 @@ export const ProductComponent = observer((props) => {
     store.product.visibleModalFilterProduct = false;
   };
 
+  const handleFilterCategory = async (value) => {
+    if (value) {
+      store.product.filterCategory = value;
+      await store.product.getDataSubCategories();
+    } else {
+      store.product.filterCategory = null;
+      await store.product.getDataSubCategories();
+    }
+  };
+
   const footerLayoutFilter = [
     <Button
-      key={"remove"}
-      onClick={handleRemoveFilter}
-      style={{
-        backgroundColor: "#e74e5e",
-        color: "#fff",
-      }}
+        key={"remove"}
+        onClick={handleRemoveFilter}
+        style={{
+          backgroundColor: "#e74e5e",
+          color: "#fff",
+        }}
     >
       Remove Filter
     </Button>,
@@ -403,17 +412,18 @@ export const ProductComponent = observer((props) => {
               Filter Supplier
             </Title>
             <Select
-              mode={"multiple"}
-              placeholder="Choose Supplier"
-              onChange={(val) => {
-                setFilterSupplier(val);
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
+                mode={"multiple"}
+                placeholder="Choose Supplier"
+                onChange={(val) => {
+                  setFilterSupplier(val);
+                }}
+                style={{marginBottom: "20px", width: "100%"}}
+                value={filterSupplier}
             >
               {store.supplier.data.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.name}
-                </Option>
+                  <Option value={item.id} key={item.id}>
+                    {item.name}
+                  </Option>
               ))}
             </Select>
           </Col>
@@ -422,19 +432,16 @@ export const ProductComponent = observer((props) => {
               Filter Categories
             </Title>
             <Select
-              mode={"multiple"}
-              placeholder="Choose Category"
-              onChange={async (val) => {
-                setFilterCategories(val);
-                store.product.filterByCategory = val;
-                await store.product.getDataSubCategories();
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
+                mode={"multiple"}
+                placeholder="Choose Category"
+                onChange={async (val) => handleFilterCategory(val)}
+                style={{marginBottom: "20px", width: "100%"}}
+                value={store.product.filterCategory || []}
             >
               {store.category.data.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.name}
-                </Option>
+                  <Option value={item.id} key={item.id}>
+                    {item.name}
+                  </Option>
               ))}
             </Select>
           </Col>
@@ -443,17 +450,18 @@ export const ProductComponent = observer((props) => {
               Filter Sub-Categories
             </Title>
             <Select
-              mode={"multiple"}
-              placeholder="Choose Sub-Category"
-              onChange={(val) => {
-                setFilterSubCategories(val);
-              }}
-              style={{ marginBottom: "20px", width: "100%" }}
+                mode={"multiple"}
+                placeholder="Choose Sub-Category"
+                onChange={(val) => {
+                  setFilterSubCategories(val);
+                }}
+                style={{marginBottom: "20px", width: "100%"}}
+                value={filterSubCategories}
             >
               {store.product.dataSubCategories.map((item) => (
-                <Option value={item.id} key={item.id}>
-                  {item.name}
-                </Option>
+                  <Option value={item.id} key={item.id}>
+                    {item.name}
+                  </Option>
               ))}
             </Select>
           </Col>