feat: rewrite writing variable

src/component/ProductComponent.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, {useContext, useState} from "react";
 import {
   Button,
   Col,
@@ -15,19 +15,19 @@ import {
   Tag,
   Typography,
 } from "antd";
-import { observer } from "mobx-react-lite";
+import {observer} from "mobx-react-lite";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
+import {ExclamationCircleOutlined} from "@ant-design/icons";
-import { useHistory } from "react-router-dom";
+import {useHistory} from "react-router-dom";
-import { useStore } from "../utils/useStore";
+import {useStore} from "../utils/useStore";
-import { LINKS } from "../routes/app";
+import {LINKS} from "../routes/app";
-import { ModalLoaderContext } from "../utils/modal";
+import {ModalLoaderContext} from "../utils/modal";
 
-const { Title, Text } = Typography;
+const {Title, Text} = Typography;
 
 export const ProductComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
-  const { Option } = Select;
+  const {Option} = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
   const [filterSupplier, setFilterSupplier] = useState([]);
@@ -111,7 +111,7 @@ export const ProductComponent = observer((props) => {
       render: (text, record) => (
         <Button
           onClick={async () => {
-            history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
+            history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.id));
             //console.log(record.id)
           }}
         >

src/pages/App/DesktopLayout.js

@@ -220,8 +220,8 @@ export const DesktopLayout = observer(() => {
                 )}
                 {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="payback-from-user">
-                  <Link to={LINKS.PAYBACKFROMUSER}>
+                  <Link to={LINKS.PAYBACK_FROM_USER}>
-                    <AlipayOutlined />
+                      <AlipayOutlined/>
                       <span>Payback</span>
                   </Link>
                 </Menu.Item>

src/pages/App/MenuList.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
-import { Menu } from "antd";
+import {Menu} from "antd";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
 import {
+    AlipayOutlined,
     AppstoreOutlined,
     DatabaseOutlined,
     FileAddOutlined,
@@ -10,22 +11,22 @@ import {
     HomeOutlined,
     MenuUnfoldOutlined,
     MoneyCollectOutlined,
+    PayCircleOutlined,
     ProfileOutlined,
     ProjectOutlined,
     ShoppingCartOutlined,
     UserOutlined,
-  AlipayOutlined,
-  PayCircleOutlined,
 } from "@ant-design/icons";
-import { observer } from "mobx-react-lite";
+import {observer} from "mobx-react-lite";
-import { useStore } from "../../utils/useStore";
+import {useStore} from "../../utils/useStore";
-import { LINKS } from "../../routes/app";
+import {LINKS} from "../../routes/app";
 
-const { SubMenu } = Menu;
+const {SubMenu} = Menu;
 
 export const MenuList = observer((props) => {
     const store = useStore();
-  useEffect(() => {}, []);
+    useEffect(() => {
+    }, []);
 
     const [setKeys, setSetKeys] = useState(["dashboard"]);
 
@@ -137,8 +138,8 @@ export const MenuList = observer((props) => {
         )}
         {store.authentication.userData.role !== "Admin" && (
           <Menu.Item key="payback-from-user">
-            <Link to={LINKS.PAYBACKFROMUSER}>
+              <Link to={LINKS.PAYBACK_FROM_USER}>
-              <AlipayOutlined />
+                  <AlipayOutlined/>
                   <span>Payback</span>
               </Link>
           </Menu.Item>

src/pages/Membership/DetailUser.js

@@ -7,7 +7,7 @@ import {observer} from "mobx-react-lite";
 import {FilterOutlined} from "@ant-design/icons";
 import {format, parseISO} from "date-fns";
 import {ModalLoaderContext} from "../../utils/modal";
-import { useParams } from "react-router-dom";     
+import {useParams} from "react-router-dom";
 
 const {Title, Text} = Typography;
 
@@ -22,7 +22,7 @@ export const DetailUser = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.DETAILUSER,
+      route: LINKS.USER_DETAIL,
       name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
     },
   ];

src/pages/Membership/Membership.js

@@ -212,7 +212,7 @@ export const Membership = observer(() => {
           <Button
             onClick={async () => {
                 await store.transaction.getDataHistoryTopUp(record.id)
-              history.push(LINKS.DETAILUSER.replace(":id", record.id));
+                history.push(LINKS.USER_DETAIL.replace(":id", record.id));
                 console.log(record.id);
             }}
           >

src/pages/Payback/PaybackFromUser.js

@@ -70,7 +70,7 @@ export const PaybackFromUser = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.PAYBACKFROMUSER,
+      route: LINKS.PAYBACK_FROM_USER,
       name: <span style={{fontWeight: "bold"}}>Payback User</span>,
     },
   ];

src/pages/Product/ProductDetail.js

@@ -10,7 +10,7 @@ import {ModalLoaderContext} from "../../utils/modal";
 
 const {Title, Text} = Typography;
 
-export const DetailProduct = observer(() => {
+export const ProductDetail = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
 
@@ -20,8 +20,12 @@ export const DetailProduct = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.DETAILPRODUCT,
+      route: LINKS.PRODUCT,
-      name: <span style={{fontWeight: 'bold'}}>Detail Product</span>,
+      name: <span style={{fontWeight: "bold"}}>Product</span>,
+    },
+    {
+      route: LINKS.PRODUCT_DETAIL,
+      name: <span style={{fontWeight: 'bold'}}>Product Detail</span>,
     },
   ];
 
@@ -75,7 +79,7 @@ export const DetailProduct = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData}/>
       <Card>
-        <Title strong>Detail Product</Title>
+        <Title strong>Product Detail</Title>
         <Row style={{marginBottom: 20}}>
           <Col lg={12} xs={24}>
             <Row>

src/routes/app.js

@@ -4,7 +4,7 @@ import {About} from "../pages/About/About";
 import {Membership} from "../pages/Membership/Membership";
 import {DetailUser} from "../pages/Membership/DetailUser";
 import {Product} from "../pages/Product/Product";
-import {DetailProduct} from "../pages/Product/DetailProduct";
+import {ProductDetail} from "../pages/Product/ProductDetail";
 import {Transaction} from "../pages/Transaction/Transaction";
 import {Profile} from "../pages/Profile/Profile";
 import {Commission} from "../pages/Config/Commission";
@@ -27,10 +27,10 @@ export const LINKS = {
     SUPPLIER: "/app/supplier",
     CATEGORY: "/app/category",
     PAYBACK: "/app/payback",
-    PAYBACKFROMUSER: "/app/payback-from-user",
+    PAYBACK_FROM_USER: "/app/payback-from-user",
     SUBCATEGORY: "/app/subcategory",
-    DETAILUSER: "/app/detail-user",
+    USER_DETAIL: "/app/user-detail",
-    DETAILPRODUCT: "/app/detail-product",
+    PRODUCT_DETAIL: "/app/product-detail",
 };
 
 export const AppRoute = () => {
@@ -38,16 +38,16 @@ export const AppRoute = () => {
         <Route path={LINKS.HOME}>
             <Home/>
         </Route>
-        <Route path={LINKS.DETAILUSER}>
+        <Route path={LINKS.USER_DETAIL}>
             <DetailUser/>
         </Route>
-        <Route path={LINKS.DETAILPRODUCT}>
+        <Route path={LINKS.PRODUCT_DETAIL}>
-            <DetailProduct/>
+            <ProductDetail/>
         </Route>
         <Route path={LINKS.COMMISSION}>
             <Commission/>
         </Route>
-        <Route path={LINKS.PAYBACKFROMUSER}>
+        <Route path={LINKS.PAYBACK_FROM_USER}>
             <PaybackFromUser/>
         </Route>
         <Route path={LINKS.CATEGORY}>