From f89a1620db9ce47a5f28789cfa5c6aeb84ffd7d1 Mon Sep 17 00:00:00 2001 From: caturbgs Date: Mon, 20 Dec 2021 13:32:08 +0700 Subject: [PATCH] feat: rewrite component use effect --- src/component/CategoryComponent.js | 53 +++++++---------------------- src/component/ProductComponent.js | 2 -- src/component/Subcategory.js | 54 +++++++----------------------- src/pages/Product/Category.js | 26 ++++++-------- src/pages/Product/Subcategory.js | 21 ++++++------ src/store/product.js | 3 +- 6 files changed, 48 insertions(+), 111 deletions(-) diff --git a/src/component/CategoryComponent.js b/src/component/CategoryComponent.js index bff88ca..98a8239 100644 --- a/src/component/CategoryComponent.js +++ b/src/component/CategoryComponent.js @@ -1,46 +1,19 @@ -import React, { useEffect, useState } from "react"; -import { - Button, - Form, - Input, - message, - Modal, - Select, - Space, - Table, - Tag, -} 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"; +import React, {useState} from "react"; +import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd"; +import {observer} from "mobx-react-lite"; +import {useHistory} from "react-router-dom"; +import {useStore} from "../utils/useStore"; +import {LINKS} from "../routes/app"; export const CategoryComponent = observer((props) => { const store = useStore(); const [form] = Form.useForm(); - const { Option } = Select; + const {Option} = Select; const history = useHistory(); const [idData, setIdData] = useState(""); 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; }} /> diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js index 77cd3b2..ef52e21 100644 --- a/src/component/ProductComponent.js +++ b/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; diff --git a/src/component/Subcategory.js b/src/component/Subcategory.js index 0da7987..45d80ff 100644 --- a/src/component/Subcategory.js +++ b/src/component/Subcategory.js @@ -1,49 +1,21 @@ -import React, { useEffect, useState } from "react"; -import { - Button, - Form, - Input, - message, - Modal, - Select, - Space, - Table, - Tag, -} 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"; +import React, {useState} from "react"; +import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd"; +import {observer} from "mobx-react-lite"; +import {useHistory} from "react-router-dom"; +import {useStore} from "../utils/useStore"; export const SubcategoryComponent = observer((props) => { const store = useStore(); const [form] = Form.useForm(); - const { Option } = Select; + const {Option} = Select; const history = useHistory(); const [idData, setIdData] = useState(""); 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 (
{ 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; diff --git a/src/pages/Product/Category.js b/src/pages/Product/Category.js index 0a26060..e3271e0 100644 --- a/src/pages/Product/Category.js +++ b/src/pages/Product/Category.js @@ -1,14 +1,14 @@ -import React, { useEffect, useState } from "react"; -import { Button, Card, Col, Input, Row, Tabs } from "antd"; -import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons"; -import { BreadcumbComponent } from "../../component/BreadcumbComponent"; -import { useStore } from "../../utils/useStore"; -import { observer } from "mobx-react-lite"; -import { LINKS } from "../../routes/app"; -import { CategoryComponent } from "../../component/CategoryComponent"; +import React, {useEffect, useState} from "react"; +import {Button, Card, Col, Input, Row, Tabs} from "antd"; +import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons"; +import {BreadcumbComponent} from "../../component/BreadcumbComponent"; +import {useStore} from "../../utils/useStore"; +import {observer} from "mobx-react-lite"; +import {LINKS} from "../../routes/app"; +import {CategoryComponent} from "../../component/CategoryComponent"; -const { TabPane } = Tabs; -const { Search } = Input; +const {TabPane} = Tabs; +const {Search} = Input; export const Category = observer(() => { const [isLoading, setIsLoading] = useState(false); @@ -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, diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js index 7e7162d..663e4ac 100644 --- a/src/pages/Product/Subcategory.js +++ b/src/pages/Product/Subcategory.js @@ -1,13 +1,13 @@ -import React, { useEffect, useState } from "react"; -import { Button, Card, Col, Input, Row, Tabs } from "antd"; -import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons"; -import { BreadcumbComponent } from "../../component/BreadcumbComponent"; -import { useStore } from "../../utils/useStore"; -import { observer } from "mobx-react-lite"; -import { LINKS } from "../../routes/app"; -import { SubcategoryComponent } from "../../component/Subcategory"; +import React, {useEffect, useState} from "react"; +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"; +import {LINKS} from "../../routes/app"; +import {SubcategoryComponent} from "../../component/Subcategory"; -const { Search } = Input; +const {Search} = Input; export const Subcategory = observer(() => { const [isLoading, setIsLoading] = useState(false); @@ -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, diff --git a/src/store/product.js b/src/store/product.js index 9422e8d..f60eb86 100644 --- a/src/store/product.js +++ b/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