diff --git a/package.json b/package.json index a356ebf..2ec0235 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "semver": "7.3.5", "style-loader": "1.3.0", "superagent": "^6.1.0", + "superagent-intercept": "^0.1.2", "terser-webpack-plugin": "4.2.3", "ts-pnp": "1.2.0", "url-loader": "4.1.1", 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 5ec507a..ef52e21 100644 --- a/src/component/ProductComponent.js +++ b/src/component/ProductComponent.js @@ -43,32 +43,32 @@ export const ProductComponent = observer((props) => { }, { title: "Produk", - dataIndex: "name", + dataIndex: ["name"], key: "name", }, { title: "Harga Beli", - dataIndex: "price", - key: "price", + dataIndex: ["currentPrice","price"], + key: ["currentPrice","price"], }, { title: "Harga Jual", - dataIndex: "basePrice", - key: "basePrice", - }, - { - title: "Gangguan", - dataIndex: "status", - key: "status", - render: (text, record) => ( - - {capitalize(record?.status)} - - ), + dataIndex: ["currentPrice","mark_up_price"], + key: ["currentPrice","mark_up_price"], }, + // { + // title: "Gangguan", + // dataIndex: "status", + // key: "status", + // render: (text, record) => ( + // + // {capitalize(record?.status)} + // + // ), + // }, { title: "Tersedia", dataIndex: "tersedia", @@ -78,7 +78,7 @@ export const ProductComponent = observer((props) => { color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"} style={{color: "#4F566B"}} > - {record?.status === "ACTIVE" ? " Ya" : "Tidak"} + {record?.status === "ACTIVE" ? " Tersedia" : "Tidak"} ), } @@ -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 diff --git a/src/utils/http.js b/src/utils/http.js index a63234c..a752a36 100644 --- a/src/utils/http.js +++ b/src/utils/http.js @@ -1,31 +1,49 @@ import superagent from "superagent"; +import superagentIntercept from 'superagent-intercept'; import {appConfig} from "../config/app"; import {TokenUtil} from "./token"; +import {attachSuperagentLogger} from "./http_logger"; + +let authIntercept = superagentIntercept((err, res) => { + if (res && res.status === 401) { + TokenUtil.clearAccessToken(); + TokenUtil.persistToken(); + window.location.href = "/login"; + } +}); export const http = { get: (url, opts = {}) => { - let req = superagent.get(appConfig.apiUrl + url); + let req = superagent.get(appConfig.apiUrl + url) + .use(authIntercept) + .use(attachSuperagentLogger); if (TokenUtil.accessToken) { req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken); } return req; }, post: (url, opts) => { - let req = superagent.post(appConfig.apiUrl + url); + let req = superagent.post(appConfig.apiUrl + url) + .use(authIntercept) + .use(attachSuperagentLogger); if (TokenUtil.accessToken) { req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken); } return req; }, put: (url, opts) => { - let req = superagent.put(appConfig.apiUrl + url); + let req = superagent.put(appConfig.apiUrl + url) + .use(authIntercept) + .use(attachSuperagentLogger); if (TokenUtil.accessToken) { req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken); } return req; }, del: (url, opts) => { - let req = superagent.del(appConfig.apiUrl + url); + let req = superagent.del(appConfig.apiUrl + url) + .use(authIntercept) + .use(attachSuperagentLogger); if (TokenUtil.accessToken) { req = req.set('Authorization', 'Bearer ' + TokenUtil.accessToken); } @@ -34,13 +52,17 @@ export const http = { upload: (file) => { const request = superagent .post(appConfig.apiUrl + '/files') - .attach('file', file); + .attach('file', file) + .use(authIntercept) + .use(attachSuperagentLogger); return request; }, uploadAntd: (args) => { const file = args.file; - const request = http.upload(file); + const request = http.upload(file) + .use(authIntercept) + .use(attachSuperagentLogger); request .on('progress', event => { args.onProgress(event); diff --git a/src/utils/http_logger.js b/src/utils/http_logger.js new file mode 100644 index 0000000..bb6c35c --- /dev/null +++ b/src/utils/http_logger.js @@ -0,0 +1,17 @@ +export function attachSuperagentLogger(req) { + const callback = req.callback; + console.log('%s %s %s', + req.method.padEnd('delete'.length, " "), + req.url, + '(pending)' + ); + + req.callback = function (err, res) { + console.log('%s %s %s', + req.method.padEnd('delete'.length, " "), + req.url, + res ? res.status : '-' + ); + callback.call(req, err, res); + }; +}