yarn and member

src/pages/members/manage-members/ManageMembers.tsx

@@ -3,37 +3,18 @@ import { apiConfig } from '@/config/api.config';
 import { columns, Members } from './Columns';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
+import CustomerDialog from './CustomerDetailModal';
+import { initialMember } from "./Columns";
+import ConfirmDialog from '@/components/confirm';
 const BASE_URL = apiConfig.service_customer;
 
-const dataMembers: Members[] = [
-  {
-    id: 37026,
-    username: 67076807158,
-    name: 'Jumentino Carlos Luis da Costa',
-    group: 'REGULER',
-    email: 'Jumentinocldacoata@gmail.com',
-    createdDate: new Date('2025-02-21')
-  },
-  {
-    id: 37027,
-    username: 67071827345,
-    name: 'Diego Costa',
-    group: 'REGULER',
-    email: 'DiegoCosta@gmail.com',
-    createdDate: new Date('2025-02-21')
-  },
-  {
-    id: 37028,
-    username: 56123764212,
-    name: 'Luis Da Vista',
-    group: 'SUPERVISOR',
-    email: 'LuisdaVista@gmail.com',
-    createdDate: new Date('2024-01-21')
-  }
-];
-
 const ManageMembers = () => {
   const [members, setMembers] = useState([]);
+  const [member, setMember] = useState(initialMember);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [dialogType, setDialogType] = useState('');
+  const closeDialog = () => setIsDialogOpen(false);
 
   useEffect(() => {
     fetchGroups()
@@ -47,30 +28,60 @@ const ManageMembers = () => {
           page: 1,
           with_deleted: false,
           order_field: 'fullname',
-          order_direction: 'ASC'
+          order_direction: 'ASC',
+          // type: "Reguler"
         }
       });
-      setMembers(groups.data.data.list)
+      let temp = 1
+      let resGroups = groups.data.data.list.map((el: any) => {
+        el.no = temp++
+        el.name = el.fullname
+        return el
+      })
+      setMembers(resGroups)
     } catch (error: any) {
       alert(error.message)
       console.log(error);
     }
   }
 
-  const handleUpdate = (member: any) => {
-    console.log(members);
-    
+  const handleUpdate = (data: any) => {
+    console.log(data);
+    setMember(data)
+    setIsDialogOpen(true)
   }
 
-  const handleDelete = (member: any) => {
-    
+  async function handleSubmit(data: any) {
+    setDialogType('update')
+    console.log(data);
+    setMember(data)
+    setDialogOpen(true)
+  }
+
+  const handleYes = async () => {
+    try {
+      await axios.put(`${BASE_URL}/customer/update/${member.id}`, member)
+      setIsDialogOpen(false)
+    } catch (error: any) {
+      alert(error.message)
+      setIsDialogOpen(false)
+    }
   }
 
   return (
     <div>
       <div className="container mx-auto p-5">
+      <ConfirmDialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        title="Confirm Action"
+        content={`Are you sure you want to `+( dialogType === 'create' ? "create?" : ( dialogType === 'update' ? "update?" : "delete?"))}
+        onYes={handleYes}
+        onNo={() => setDialogOpen(false)}
+      />
+        <CustomerDialog open={isDialogOpen} handleClose={closeDialog} handleSubmit={handleSubmit} initialData={member}/>
         <h1 className="text-xl font-medium leading-none text-gray-900">Manage Members</h1>
-        <DataTable data={dataMembers} columns={columns} onUpdate={handleUpdate} onDelete={handleDelete}/>
+        <DataTable data={members} columns={columns} onUpdate={handleUpdate} onDelete={null}/>
       </div>
     </div>
   );