ssr member

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

@@ -1,7 +1,7 @@
 import { DataTable } from '@/components/ui/DataTable';
 import { apiConfig } from '@/config/api.config';
 import { getColumns, Members, initialMember } from './Columns';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
 import DetailMember from './blocks/DetailMember';
 import ConfirmDialog from '@/components/confirm';
@@ -29,7 +29,7 @@ const ManageMembers = () => {
   const [groups, setGroups] = useState([]);
   const [isReloading, setIsReloading] = useState(false);
   const [currentPage, setCurrentPage] = useState(0);
-  const [totalItems, setTotalItems] = useState(10);
+  const [pageSize, setPageSize] = useState(10);
   
   const closeDialog = () => {
     setIsDialogOpen(false);
@@ -38,40 +38,129 @@ const ManageMembers = () => {
   const { getUser } = useAuthContext();
 
   useEffect(() => {
-    fetchCustomers();
+    // fetchCustomers();
     fetchMasters();
   }, []);
   
-  async function fetchCustomers(): Promise<void> {
+  // async function fetchCustomers(): Promise<any> {
-    setIsReloading(true);
+  //   setIsReloading(true);
-    try {
+  //   try {
-      let customers = await axios.get(`${BASE_URL}/customer/list`, {
+  //     let customers = await axios.get(`${BASE_URL}/customer/list`, {
+  //       params: {
+  //         limit: pageSize,
+  //         page: 1 + currentPage,
+  //         with_deleted: false,
+  //         order_field: 'created_at',
+  //         order_direction: 'DESC'
+  //       }
+  //     });
+  //     let temp = 1;
+  //     let resMembers = customers.data.data.list.map((el: any) => {
+  //       el.no = temp++;
+  //       if (el.date_birth) {
+  //         const d = new Date(el.date_birth);
+  //         el.date_birth = d.toLocaleString('sv-SE');
+  //       }
+  //       el.name = el.fullname;
+  //       return el;
+  //     });
+  //     setMembers(resMembers);
+  //     return {
+  //       data: resMembers,
+  //       totalCount: customers.data.data.total_count,
+  //     }
+  //   } catch (error: any) {
+  //     toast.error(error.message);
+  //     console.log(error);
+  //   } finally {
+  //     setIsReloading(false);
+  //   }
+  // }
+
+  // const fetchCustomers = useCallback(
+  //   async ({ pageIndex, pageSize }:any) => {
+  //     setIsReloading(true);
+  //     try {
+  //       const res = await axios.get(`${BASE_URL}/customer/list`, {
+  //         params: {
+  //           limit: pageSize,
+  //           page: pageIndex + 1, // +1 because your API uses 1-based pages
+  //           with_deleted: false,
+  //           order_field: 'created_at',
+  //           order_direction: 'DESC',
+  //         },
+  //       });
+
+  //       const customers = res.data.data.list.map((el: any, index: number) => ({
+  //         ...el,
+  //         no: pageIndex * pageSize + index + 1,
+  //         date_birth: el.date_birth
+  //           ? new Date(el.date_birth).toLocaleString('sv-SE')
+  //           : null,
+  //         name: el.fullname,
+  //       }));
+
+  //       return {
+  //         data: customers,
+  //         totalCount: res.data.data.total_count,
+  //       };
+  //     } catch (error: any) {
+  //       toast.error(error.message);
+  //       console.error(error);
+  //       return { data: [], totalCount: 0 };
+  //     } finally {
+  //       setIsReloading(false);
+  //     }
+  //   },
+  //   []
+  // );
+
+  const fetchCustomers = async (
+    page: number,
+    limit: number,
+    sorting: any,
+    filter: any
+  ) => {
+    // [ SAMPLE
+    //     {
+    //         "id": "username",
+    //         "value": "d"
+    //     },
+    //     {
+    //         "id": "group_name",
+    //         "value": "Bank"
+    //     },
+    //     {
+    //         "id": "msisdn",
+    //         "value": "88"
+    //     }
+    // ]
+    sorting = sorting.length == 0 ? [{ id: 'name', desc: true }] : sorting;
+    // filter = filter.length ? { any: filter[0].value?.toLowerCase() } : {};
+    filter = filter.length ? filter : {};
+    
+    const res = await axios.get(`${BASE_URL}/customer/list`, {
       params: {
-          limit: 30,
+        limit: limit,
-          page: 1 + currentPage,
+        page: page + 1, // +1 because your API uses 1-based pages
         with_deleted: false,
         order_field: 'created_at',
-          order_direction: 'DESC'
+        order_direction: 'DESC',
-        }
+        filter: JSON.stringify(filter),
+        specialFilter: true
+      },
     });
-      let temp = 1;
+
-      let resMembers = customers.data.data.list.map((el: any) => {
+    const customers = res.data.data.list.map((el: any, index: number) => ({
-        el.no = temp++;
+      ...el,
-        if (el.date_birth) {
+      no: page * pageSize + index + 1,
-          const d = new Date(el.date_birth);
+      date_birth: el.date_birth
-          el.date_birth = d.toLocaleString('sv-SE');
+        ? new Date(el.date_birth).toLocaleString('sv-SE')
-        }
+        : null,
-        el.name = el.fullname;
+      name: el.fullname,
-        return el;
+    }));
-      });
+    return { data: customers, totalCount: res?.data.data.total_count };
-      setMembers(resMembers);
+  };
-    } catch (error: any) {
-      toast.error(error.message);
-      console.log(error);
-    } finally {
-      setIsReloading(false);
-    }
-  }
 
   async function fetchMasters(): Promise<void> {
     setIsReloading(true);
@@ -123,9 +212,10 @@ const ManageMembers = () => {
     setDialogOpen(true);
   }
 
-  const handleReload = () => {
+  const handleReload = async () => {
     setIsReloading(true);
-    fetchCustomers();
+    await fetchCustomers(currentPage, pageSize, '','');
+    setIsReloading(false);
   };
 
   const handleYes = async () => {
@@ -213,7 +303,6 @@ const ManageMembers = () => {
     } finally {
       setDialogOpen(false);
       closeDialog();
-      await fetchCustomers();
       // setLoading(false);
       setIsReloading(false);
     }
@@ -222,7 +311,6 @@ const ManageMembers = () => {
   function setShowAddDialog(el: any) {
     setIsDialogOpen(el);
   }
-  // if (isReloading) return <DataGridLoader />;
 
   return (
     <>
@@ -245,7 +333,7 @@ const ManageMembers = () => {
             handleClose={closeDialog}
             handleSubmit={handleSubmit}
             initialData={member}
-            fetchCustomers={fetchCustomers}
+            fetchCustomers={handleReload}
             profession={profession}
             dialogType={dialogType}
           />
@@ -265,26 +353,22 @@ const ManageMembers = () => {
             <span className="text-sm">Manage Members</span>
           </Link>
         </Breadcrumbs>
-        {/* <div className="w-full overflow-x-auto px-4"> */}
 
         <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
           {isReloading && (
             <DataGridLoader />
-            // <div className="fixed inset-0 bg-transparent flex items-center justify-center z-50 text-muted-foreground px-4 py-2">
-            //   <div className="bg-card flex items-center border shadow-sm rounded-md">
-            //     <div className="flex flex-col items-center">
-            //       <RefreshCw className="animate-spin h-8 w-8 text-slate-500 mb-2" />
-            //       <span className="text-slate-500 font-medium">Refreshing data...</span>
-            //     </div>
-            //   </div>
-            // </div>
           )}
+          {!isReloading && (
             <DataGridProvider
-            data={members}
+            // data={members}
-            pagination={{ size: totalItems }}
+            pagination={{ size: pageSize }}
             columns={getColumns(handleUpdate)}
             layout={{ card: true }}
-            serverSide={false}
+            serverSide={true}
+            // onFetchData={fetchCustomers}
+            onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
+              fetchCustomers(pageIndex, pageSize, sorting, columnFilters)
+            }
             toolbar={
               <ListToolbar
                 createMember={createMember}
@@ -298,6 +382,7 @@ const ManageMembers = () => {
               if (selectedRow) handleUpdate(selectedRow.original);
             }}
           ></DataGridProvider>
+          )}
         </div>
         {/* </div> */}
       </Container>