Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend into develop

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",

src/component/CategoryComponent.js

@@ -1,19 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, {useState} from "react";
-import {
+import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
-  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";
 
@@ -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,
+          pageSize: store.category.pageSize,
-          total: store.product.total_data,
+          total: store.category.total_data,
-          current: store.product.page + 1,
+          current: store.category.page + 1,
           showSizeChanger: true,
           simple: false,
         }}
         onChange={async (page) => {
           let pageNumber = page.current;
-          store.product.pageSize = page.pageSize;
+          store.category.pageSize = page.pageSize;
-          store.product.page = pageNumber - 1;
+          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

@@ -43,32 +43,32 @@ export const ProductComponent = observer((props) => {
         },
         {
             title: "Produk",
-            dataIndex: "name",
+            dataIndex: ["name"],
             key: "name",
         },
         {
             title: "Harga Beli",
-            dataIndex: "price",
+            dataIndex: ["currentPrice","price"],
-            key: "price",
+            key: ["currentPrice","price"],
         },
         {
             title: "Harga Jual",
-            dataIndex: "basePrice",
+            dataIndex:  ["currentPrice","mark_up_price"],
-            key: "basePrice",
+            key:  ["currentPrice","mark_up_price"],
-        },
-        {
-            title: "Gangguan",
-            dataIndex: "status",
-            key: "status",
-            render: (text, record) => (
-                <Tag
-                    color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
-                    style={{color: "#4F566B"}}
-                >
-                    {capitalize(record?.status)}
-                </Tag>
-            ),
         },
+        // {
+        //     title: "Gangguan",
+        //     dataIndex: "status",
+        //     key: "status",
+        //     render: (text, record) => (
+        //         <Tag
+        //             color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
+        //             style={{color: "#4F566B"}}
+        //         >
+        //             {capitalize(record?.status)}
+        //         </Tag>
+        //     ),
+        // },
         {
             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"}
                 </Tag>
             ),
         }
@@ -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 React, {useState} from "react";
-import {
+import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
-  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";
 
 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,
+          pageSize: store.subcategory.pageSize,
-          total: store.product.total_data,
+          total: store.subcategory.total_data,
-          current: store.product.page + 1,
+          current: store.subcategory.page + 1,
           showSizeChanger: true,
           simple: false,
         }}
         onChange={(page) => {
           let pageNumber = page.current;
-          store.product.pageSize = page.pageSize;
+          store.subcategory.pageSize = page.pageSize;
-          store.product.page = pageNumber - 1;
+          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 {Button, Card, Col, Input, Row} from "antd";
-import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
+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

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

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);
+    };
+}