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,6 +185,16 @@ 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"}
@@ -409,6 +418,7 @@ export const ProductComponent = observer((props) => {
                   setFilterSupplier(val);
                 }}
                 style={{marginBottom: "20px", width: "100%"}}
+                value={filterSupplier}
             >
               {store.supplier.data.map((item) => (
                   <Option value={item.id} key={item.id}>
@@ -424,12 +434,9 @@ export const ProductComponent = observer((props) => {
             <Select
                 mode={"multiple"}
                 placeholder="Choose Category"
-              onChange={async (val) => {
-                setFilterCategories(val);
-                store.product.filterByCategory = val;
-                await store.product.getDataSubCategories();
-              }}
+                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}>
@@ -449,6 +456,7 @@ export const ProductComponent = observer((props) => {
                   setFilterSubCategories(val);
                 }}
                 style={{marginBottom: "20px", width: "100%"}}
+                value={filterSubCategories}
             >
               {store.product.dataSubCategories.map((item) => (
                   <Option value={item.id} key={item.id}>

src/pages/Product/Product.js

@@ -21,7 +21,7 @@ export const Product = observer(() => {
         await Promise.allSettled([
           store.supplier.getData(),
           store.category.getData(),
-          store.category.getDataSubCategories(),
+          store.product.getDataSubCategories(),
         ]);
         await store.product.getData();
         modalLoader.setLoading(false);

src/store/product.js

@@ -21,7 +21,7 @@ export class Product {
     pageSizeSubCategories = 10
     dataSubCategories = [];
     total_dataSubCategories = 0;
-    filterByCategory = null;
+    filterCategory = null;
 
     constructor(ctx) {
         this.ctx = ctx;
@@ -44,7 +44,7 @@ export class Product {
 
     async getDataSubCategories() {
         try {
-            const response = await http.get(`/product/sub-categories?category=${this.filterByCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
+            const response = await http.get(`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
             this.dataSubCategories = response.body.data.map((item, idx) => {
                 item.key = idx;
                 return item