feat: rewrite component use effect

src/component/CategoryComponent.js

@@ -1,19 +1,7 @@
-import React, { useEffect, useState } from "react";
-import {
-  Button,
-  Form,
-  Input,
-  message,
-  Modal,
-  Select,
-  Space,
-  Table,
-  Tag,
-} from "antd";
+import React, {useState} from "react";
+import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
 import {observer} from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
 import {useHistory} from "react-router-dom";
-import { capitalize } from "lodash";
 import {useStore} from "../utils/useStore";
 import {LINKS} from "../routes/app";
 
@@ -26,21 +14,6 @@ export const CategoryComponent = observer((props) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    const init = async () => {
-      try {
-        setIsLoading(true);
-        //store.product.pageCategories=StrToLower(props.category)
-        await store.product.getDataSubCategories();
-        setIsLoading(false);
-      } catch (e) {
-        setIsLoading(false);
-      }
-    };
-
-    init();
-  }, []);
-
   const handleEditButton = (data) => {
     console.log(data, "isi data");
     form.setFieldsValue({
@@ -154,18 +127,18 @@ export const CategoryComponent = observer((props) => {
         dataSource={store.category.data}
         bordered
         pagination={{
-          pageSize: store.product.pageSize,
-          total: store.product.total_data,
-          current: store.product.page + 1,
+          pageSize: store.category.pageSize,
+          total: store.category.total_data,
+          current: store.category.page + 1,
           showSizeChanger: true,
           simple: false,
         }}
         onChange={async (page) => {
           let pageNumber = page.current;
-          store.product.pageSize = page.pageSize;
-          store.product.page = pageNumber - 1;
+          store.category.pageSize = page.pageSize;
+          store.category.page = pageNumber - 1;
           // store.membership.isLoading = true;
-          await store.product.getData();
+          await store.category.getData();
           // store.membership.isLoading = false;
         }}
       />

src/component/ProductComponent.js

@@ -149,7 +149,6 @@ export const ProductComponent = observer((props) => {
 
     const handleRemoveFilter = async () => {
         store.product.filterSupplier = null;
-        store.product.filterCategory = null;
         store.product.filterSubCategory = null;
         setFilterSupplier(null);
         setFilterCategories(null);
@@ -167,7 +166,6 @@ export const ProductComponent = observer((props) => {
 
     const handleSubmitFilter = async () => {
         store.product.filterSupplier = filterSupplier;
-        store.product.filterCategory = filterCategories;
         store.product.filterSubCategory = filterSubCategories;
         await store.product.getData();
         store.product.visibleModalFilterProduct = false;

src/component/Subcategory.js

@@ -1,21 +1,8 @@
-import React, { useEffect, useState } from "react";
-import {
-  Button,
-  Form,
-  Input,
-  message,
-  Modal,
-  Select,
-  Space,
-  Table,
-  Tag,
-} from "antd";
+import React, {useState} from "react";
+import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
 import {observer} from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
 import {useHistory} from "react-router-dom";
-import { capitalize } from "lodash";
 import {useStore} from "../utils/useStore";
-import { LINKS } from "../routes/app";
 
 export const SubcategoryComponent = observer((props) => {
   const store = useStore();
@@ -26,24 +13,9 @@ export const SubcategoryComponent = observer((props) => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
-  useEffect(() => {
-    const init = async () => {
-      try {
-        setIsLoading(true);
-        //store.product.pageCategories=StrToLower(props.category)
-        getData();
-        setIsLoading(false);
-      } catch (e) {
-        setIsLoading(false);
-      }
-    };
-
-    init();
-  }, []);
-
   const getData = async () => {
-    await store.subcategory.getData();
     await store.category.getData();
+    await store.subcategory.getData();
   };
 
   const handleEditButton = (data) => {
@@ -120,7 +92,7 @@ export const SubcategoryComponent = observer((props) => {
       form.resetFields();
     }
   };
-  //console.log()
+
   return (
     <div>
       <Table
@@ -129,16 +101,16 @@ export const SubcategoryComponent = observer((props) => {
         dataSource={store.subcategory.data}
         bordered
         pagination={{
-          pageSize: store.product.pageSize,
-          total: store.product.total_data,
-          current: store.product.page + 1,
+          pageSize: store.subcategory.pageSize,
+          total: store.subcategory.total_data,
+          current: store.subcategory.page + 1,
           showSizeChanger: true,
           simple: false,
         }}
         onChange={(page) => {
           let pageNumber = page.current;
-          store.product.pageSize = page.pageSize;
-          store.product.page = pageNumber - 1;
+          store.subcategory.pageSize = page.pageSize;
+          store.subcategory.page = pageNumber - 1;
           // store.membership.isLoading = true;
           getData();
           // store.membership.isLoading = false;

src/pages/Product/Category.js

@@ -18,7 +18,6 @@ export const Category = observer(() => {
     const init = async () => {
       try {
         setIsLoading(true);
-        //await store.product.getDataCategories();
         await store.category.getData();
         setIsLoading(false);
       } catch (e) {
@@ -29,11 +28,6 @@ export const Category = observer(() => {
     init();
   }, []);
 
-  const handleChangeTabPane = async (key) => {
-    store.product.filterCategory = key;
-    console.log(key);
-  };
-
   const routeData = [
     {
       route: LINKS.HOME,

src/pages/Product/Subcategory.js

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from "react";
-import { Button, Card, Col, Input, Row, Tabs } from "antd";
-import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
+import {Button, Card, Col, Input, Row} from "antd";
+import {PlusSquareOutlined} from "@ant-design/icons";
 import {BreadcumbComponent} from "../../component/BreadcumbComponent";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
@@ -17,7 +17,7 @@ export const Subcategory = observer(() => {
     const init = async () => {
       try {
         setIsLoading(true);
-        // await getData();
+        getData();
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
@@ -31,6 +31,7 @@ export const Subcategory = observer(() => {
     await store.category.getData();
     await store.subcategory.getData();
   };
+
   const routeData = [
     {
       route: LINKS.HOME,

src/store/product.js

@@ -7,7 +7,6 @@ export class Product {
     data = [];
     total_data = 0;
     filterSupplier = null;
-    filterCategory = null;
     filterSubCategory = null;
     visibleModalProduct = false;
     visibleModalFilterProduct = false;
@@ -31,7 +30,7 @@ export class Product {
 
     async getData() {
         try {
-            const response = await http.get(`/product/all?supplier=${this.filterSupplier}&category=${this.filterCategory}&sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
+            const response = await http.get(`/product/all?supplier=${this.filterSupplier}&sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
             this.data = response.body.data.map((item, idx) => {
                 item.key = idx;
                 return item