Crud Membership

src/pages/Membership/Membership.js

@@ -1,8 +1,25 @@
 import React, { useEffect, useState } from "react";
-import {Button, Card, Col, Divider, Input, List, message, Modal, Row, Space, Table, Tag} from "antd";
+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 {
+  ExclamationCircleOutlined,
+  FilterOutlined,
+  PlusSquareOutlined,
+} from "@ant-design/icons";
 import { MembershipModal } from "./MembershipModal";
 import { BreadcumbComponent } from "../../component/BreadcumbComponent";
 import { format } from "date-fns";
@@ -11,25 +28,22 @@ const {Search} = Input;
 
 export const Membership = observer(() => {
   const store = useStore();
-  const [visibleModal, setVisibleModal] = useState(false)
+  const [visibleModal, setVisibleModal] = useState(false);
-  const [initialData, setInitialData] = useState({})
+  const [initialData, setInitialData] = useState({});
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
   const init = async () => {
     try {
-      setIsLoading(true)
+      setIsLoading(true);
       await store.membership.getData();
-      setIsLoading(false)
+      setIsLoading(false);
     } catch (e) {
-      setIsLoading(false)
+      setIsLoading(false);
-    }
     }
+  };
   useEffect(() => {
-    
+    init();
-
-    init()
-
   }, []);
 
   const columns = [
@@ -52,24 +66,30 @@ export const Membership = observer(() => {
           color={record?.isActive === true ? "processing" : "#E3E8EE"}
           style={{ color: "#4F566B" }}
         >
-            {record?.status}
+          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
-    )
+      ),
     },
     {
       title: "Action",
       key: "action",
       render: (text, record) => (
         <Space size="middle">
-            <Button onClick={() => {
+          <Button
-              setVisibleModal(true)
+            onClick={() => {
-              setInitialData(record)
+              setVisibleModal(true);
-            }}>Edit</Button>
+              setInitialData(record);
-            <Button onClick={async () => {
-              handleDelete(record.id)
-
             }}
-            >Delete</Button>
+          >
+            Edit
+          </Button>
+          <Button
+            onClick={async () => {
+              handleDelete(record.id);
+            }}
+          >
+            Delete
+          </Button>
         </Space>
       ),
     },
@@ -88,53 +108,54 @@ export const Membership = observer(() => {
 
   const onSubmit = async (data) => {
     if (initialData.id) {
-      setInitialData({})
+      setInitialData({});
       setConfirmLoading(true);
       try {
-        await store.membership.update(initialData.id, data)
+        await store.membership.update(initialData.id, data);
-        message.success("Success Update Data Member")
+        message.success("Success Update Data Member");
+        await store.membership.getData();
       } catch (e) {
-        message.error("Failed Update Data Member")
+        message.error("Failed Update Data Member");
       }
       setConfirmLoading(false);
       setVisibleModal(false);
     } else {
-      setInitialData({})
+      setInitialData({});
       setConfirmLoading(true);
       try {
-        await store.membership.create(data)
+        await store.membership.create(data);
-        message.success("Success Add New Member")
+        message.success("Success Add New Member");
+        await store.membership.getData();
       } catch (e) {
-        console.log(e, "apa errornya")
+        console.log(e, "apa errornya");
-        message.error("Failed Add Member")
+        message.error("Failed Add Member");
       }
       setConfirmLoading(false);
       setVisibleModal(false);
     }
-  }
+  };
 
   const handleDelete = (record) => {
     Modal.confirm({
-      title: 'Are you sure reject this record?',
+      title: "Are you sure reject this record?",
       icon: <ExclamationCircleOutlined />,
-      okText: 'Yes',
+      okText: "Yes",
-      okType: 'primary',
+      okType: "primary",
-      cancelText: 'Cancel',
+      cancelText: "Cancel",
       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.id)
-          message.success('Success Delete Data')
+          message.success("Success Delete Data");
         } catch (e) {
-          message.error("Failed Delete Data")
+          message.error("Failed Delete Data");
         }
       },
       onCancel() {
-        console.log('Cancel');
+        console.log("Cancel");
       },
     });
-  }
+  };
-
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -157,14 +178,13 @@ export const Membership = observer(() => {
               </Button>
             </Col>
           </Row>
-
           {store.ui.mediaQuery.isDesktop && (
             <Table
               key="1"
               hasEmpty
               size={"small"}
               columns={columns}
-                    dataSource={store.membership.data[0]}
+              dataSource={store.membership.data}
               bordered
               // pagination={{
               //   total: store.membership.total_data,
@@ -179,7 +199,8 @@ export const Membership = observer(() => {
               // }}
               // current={store.membership.page}
               // loading={store.membership.pageSize}
-                />)}
+            />
+          )}
 
           {store.ui.mediaQuery.isMobile && (
             <List
@@ -194,7 +215,7 @@ export const Membership = observer(() => {
                 pageSize: store.membership.pageSize,
                 total: store.membership.total_data,
                 current: store.membership.page,
-                      style: {marginBottom: '1rem', marginRight: '1rem'}
+                style: { marginBottom: "1rem", marginRight: "1rem" },
               }}
               dataSource={store.membership.data}
               style={{ padding: 0 }}
@@ -215,11 +236,11 @@ export const Membership = observer(() => {
                     >
                       <List.Item.Meta
                         className={["cariparkir-container"].join(" ")}
-                                  title={item.name}
+                        title={item.username}
                         description={
                           <div style={{}}>
                             <p>
-                                        <small>Email : {item.email}</small> <br/>
+                              <small>Username : {item.username}</small> <br />
                             </p>
                           </div>
                         }
@@ -231,7 +252,7 @@ export const Membership = observer(() => {
                             margin: 0,
                           }}
                         >
-                                  {format(new Date(item.created_at), "dd-MM-yyyy")}
+                          {item.username}
                         </p>
                       </div>
                     </List.Item>
@@ -243,16 +264,18 @@ export const Membership = observer(() => {
           )}
         </div>
       </Card>
-        <MembershipModal visible={visibleModal}
+      <MembershipModal
+        visible={visibleModal}
         confirmLoading={confirmLoading}
         initialData={initialData}
         onCreate={async (data) => {
-                           onSubmit(data)
+          onSubmit(data);
         }}
         onCancel={() => {
-                           setInitialData({})
+          setInitialData({});
           setVisibleModal(false);
-                         }}/>
+        }}
+      />
     </div>
   );
 });

src/pages/Membership/MembershipModal.js

@@ -9,13 +9,13 @@ export const MembershipModal = ({
                                 }) => {
     const [form] = Form.useForm();
     const {Option} = Select;
-    const dataStatus = ['Active', 'Inactive']
+    const dataStatus = ["true", "false"]
 
 
     return (
         <Modal
             visible={visible}
-            title={initialData.id ? "Edit Member" : "Create a new Member"}
+            title={initialData.id ? "Edit Member" : "Create a new Membership"}
             okText={initialData.id ? "Edit" : "Create"}
             cancelText="Cancel"
             onCancel={() => {
@@ -40,13 +40,7 @@ export const MembershipModal = ({
                 name="form_in_modal"
                 initialValues={initialData}
             >
-                <Form.Item
+                
-                    name="name"
-                    label="Name"
-                    rules={[{required: true, message: 'Please input Name!'}]}
-                >
-                    <Input/>
-                </Form.Item>
                 <Form.Item
                     name="username"
                     label="Username"
@@ -55,10 +49,23 @@ export const MembershipModal = ({
                     <Input/>
                 </Form.Item>
                 <Form.Item
-                    name="status"
+                    name="password"
-                    label="Status"
+                    label="Password"
-
+                    rules={[{required: true, message: 'Please input password!'}]}
-                    rules={[{required: true, message: 'Please select Status!'}]}
+                >
+                    <Input/>
+                </Form.Item>
+                <Form.Item
+                    name="roleId"
+                    label="Role Id"
+                    rules={[{required: true, message: 'Please input role id!'}]}
+                >
+                    <Input/>
+                </Form.Item>
+                <Form.Item
+                    name="superior"
+                    label="Superior"
+                    rules={[{required: true, message: 'Please select superior status!'}]}
                 >
                     <Select
                         showSearch

src/store/membership.js

@@ -23,16 +23,16 @@ export class Membership {
 
     @action
     async create(data) {
-        return await http.post('/user').send(data)
+        return await http.post('/users').send(data)
     }
 
     @action
     async update(id, data) {
-        return await http.put('/user/' + id).send(data);
+        return await http.put('/users/' + id).send(data);
     }
 
     async delete(id) {
-        return await http.del('/user/' + id);
+        return await http.del('/users/' + id);
     }
 }