Pages Membership

src/pages/Membership/Membership.js

@@ -1,13 +1,29 @@
-import React, {useEffect, useState} from "react";
-import {Button, Card, Col, Divider, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
-import {useStore} from "../../utils/useStore";
-import {observer} from "mobx-react-lite";
-import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
-import {MembershipModal} from "./MembershipModal";
-import {BreadcumbComponent} from "../../component/BreadcumbComponent";
-import {LINKS} from "../../routes/app";
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Input,
+  List,
+  message,
+  Modal,
+  Row,
+  Space,
+  Table,
+  Tag,
+} from "antd";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import {
+  ExclamationCircleOutlined,
+  FilterOutlined,
+  PlusSquareOutlined,
+} from "@ant-design/icons";
+import { MembershipModal } from "./MembershipModal";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 
-const {Search} = Input;
+const { Search } = Input;
 
 export const Membership = observer(() => {
   const store = useStore();
@@ -89,12 +105,12 @@ export const Membership = observer(() => {
 
   const routeData = [
     {
-      route: LINKS.HOME,
+      route: "/app/home",
       name: "Home",
     },
     {
-      route: LINKS.MEMBERSHIP,
-      name: <span style={{fontWeight: "bold"}}>Membership</span>,
+      route: "/app/membership",
+      name: <span style={{ fontWeight: "bold" }}>Membership</span>,
     },
   ];
 
@@ -103,7 +119,7 @@ export const Membership = observer(() => {
       setInitialData({});
       setConfirmLoading(true);
       try {
-        console.log(data)
+        console.log(data);
         await store.membership.update(initialData.id, data);
         message.success("Success Update Data Member");
         await store.membership.getData();
@@ -128,7 +144,6 @@ export const Membership = observer(() => {
     }
   };
 
-  
   const handleDelete = (record) => {
     Modal.confirm({
       title: "Are you sure delete this record?",
@@ -139,7 +154,7 @@ export const Membership = observer(() => {
       async onOk() {
         try {
           //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
-          await store.membership.delete(record)
+          await store.membership.delete(record);
           message.success("Success Delete Data");
           await store.membership.getData();
         } catch (e) {
@@ -164,20 +179,26 @@ export const Membership = observer(() => {
           <Row style={{ marginBottom: 20 }}>
             <Col span={12}>
               <Button>
-                <FilterOutlined/>
+                <FilterOutlined />
                 Filter
               </Button>
             </Col>
-            <Col span={12} style={{textAlign: "right"}}>
+            <Col span={12} style={{ textAlign: "right" }}>
               <Search
                 placeholder="input search text"
-                  style={{width: 200, marginRight: 10}}
+                style={{
+                  width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+                }}
               />
-              <Button onClick={() => {
+              <Button
+                onClick={() => {
                   setInitialData({});
                   setVisibleModal(true);
-              }}>
-                <PlusSquareOutlined/> New
+                }}
+              >
+                <PlusSquareOutlined /> New
               </Button>
             </Col>
           </Row>