feat: change status partner & membership

src/pages/Membership/Membership.js

@@ -1,13 +1,30 @@
-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";
+import { LINKS } from "../../routes/app";
 
-const {Search} = Input;
+const { Search } = Input;
 
 export const Membership = observer(() => {
   const store = useStore();
@@ -31,6 +48,21 @@ export const Membership = observer(() => {
     init();
   }, []);
 
+  const changeStatus = async (id, isActive) => {
+    const status = isActive ? "inactive" : "active";
+    const status2 = isActive ? "Inactivating" : "Activating";
+    try {
+      const response = await store.membership.changeStatus(id, status);
+
+      response?.body?.statusCode === 201
+        ? message.success(`Success ${status2} Membership`)
+        : message.error(`Failed ${status2} Membership`);
+    } catch (err) {
+      console.log("error", err);
+      message.error(`Failed ${status2} Membership`);
+    }
+  };
+
   const columns = [
     {
       title: "Name",
@@ -48,10 +80,11 @@ export const Membership = observer(() => {
       key: "status",
       render: (text, record) => (
         <Tag
-          color={record?.isActive === true ? "blue" : "#E3E8EE"}
-          style={{ color: "#4F566B" }}
+          color={record?.status === true ? "processing" : "#E3E8EE"}
+          style={{ color: "#4F566B", cursor: "pointer" }}
+          onClick={() => changeStatus(record?.id, record?.status)}
         >
-          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
+          {record?.status === true ? " ACTIVE" : "INACTIVE"}
         </Tag>
       ),
     },
@@ -188,26 +221,26 @@ export const Membership = observer(() => {
           </Row>
           {store.ui.mediaQuery.isDesktop && (
             <Table
-                key="1"
-                hasEmpty
-                columns={columns}
-                dataSource={store.membership.data}
-                bordered
-                pagination={{
-                  pageSize: store.membership.pageSize,
-                  total: store.membership.total_data,
-                  current: store.membership.page + 1,
-                  showSizeChanger: true,
-                  simple: false
-                }}
-                onChange={async (page) => {
-                  let pageNumber = page.current;
-                  store.membership.pageSize = page.pageSize;
-                  store.membership.page = pageNumber - 1;
-                  // store.membership.isLoading = true;
-                  await store.membership.getData();
-                  // store.membership.isLoading = false;
-                }}
+              key="1"
+              hasEmpty
+              columns={columns}
+              dataSource={store.membership.data}
+              bordered
+              pagination={{
+                pageSize: store.membership.pageSize,
+                total: store.membership.total_data,
+                current: store.membership.page + 1,
+                showSizeChanger: true,
+                simple: false,
+              }}
+              onChange={async (page) => {
+                let pageNumber = page.current;
+                store.membership.pageSize = page.pageSize;
+                store.membership.page = pageNumber - 1;
+                // store.membership.isLoading = true;
+                await store.membership.getData();
+                // store.membership.isLoading = false;
+              }}
             />
           )}