feat: rewrite component use effect

This commit is contained in:
caturbgs
2021-12-20 13:32:08 +07:00
parent 2e0eb03d3a
commit f89a1620db
6 changed files with 48 additions and 111 deletions

View File

@@ -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;
}}
/>

View File

@@ -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;

View File

@@ -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 (
<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;