fixing refresh & sorting manage groups

src/pages/groups/ManageGroups.tsx

@@ -24,8 +24,10 @@ import CloseIcon from '@mui/icons-material/Close';
 import Divider from '@mui/material/Divider';
 import ConfirmDialog from '@/components/confirm';
 import { toast } from 'sonner';
-import { Container, DataGridProvider } from '@/components';
+import { Container, DataGridProvider, LoaderTransparant } from '@/components';
 import { ListToolBar } from './ListToolbar';
+import { RefreshCw } from 'lucide-react';
+import { setgroups } from 'process';
 // import { DialogHeader } from '@/components/ui/dialog';
 // import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 const BASE_URL = apiConfig.service_customer;
@@ -42,37 +44,52 @@ let initGroup = {
 
 const ManageGroups = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [dataGroup, setDataGroup] = useState([]);
   const [formData, setFormData] = useState(initGroup);
   const [pageIndex, setPageIndex] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [dialogType, setDialogType] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [isReloading, setIsReloading] = useState(false);
+  // const closeDialog = () => {
+  //   setIsDialogOpen(false);
+  //   setgroups(initGroup);
+  // };
 
   useEffect(() => {
+    setLoading(true);
     fetchGroups();
+    setLoading(false);
   }, []);
 
-  async function fetchGroups() {
+  async function fetchGroups(): Promise<void> {
     try {
       let groups = await axios.get(`${BASE_URL}/groups/list`, {
         params: {
-          limit: pageSize,
-          page: pageIndex,
+          limit: 20,
+          page: 1,
           with_deleted: false,
-          order_field: 'name',
-          order_direction: 'ASC'
+          order_field: 'created_at',
+          order_direction: 'DESC'
         }
       });
       let temp = 1;
       let resGroups = groups.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');
+        }
         return el;
-      })
+      });
       setDataGroup(resGroups);
     } catch (error: any) {
       alert(error.message);
       console.log(error);
+    } finally {
+      setLoading(false);
+      setIsReloading(false);
     }
   }
 
@@ -127,6 +144,11 @@ const ManageGroups = () => {
     setDialogOpen(true);
   };
 
+  const handleReload = () => {
+    setIsReloading(true);
+    fetchGroups();
+  };
+
   const handleYes = async () => {
     try {
       if (dialogType === 'create') {
@@ -153,12 +175,19 @@ const ManageGroups = () => {
       console.log(error);
       toast.error(error.message);
     } finally {
-      await fetchGroups();
       setDialogOpen(false);
       closeDialog();
+      await fetchGroups();
+      setLoading(false);
     }
   };
 
+  function setShowAddDialog(el: any) {
+    setIsDialogOpen(el);
+  }
+
+  if (loading) return <LoaderTransparant />;
+
   return (
     <>
       <Helmet>
@@ -191,21 +220,28 @@ const ManageGroups = () => {
           </Link>
         </Breadcrumbs>
         {/* <div className="w-full overflow-x-auto px-4"> */}
-        <div className="grid gap-5 lg:gap-7.5 mt-5">
-          {/* <DataTable
-          data={dataGroup}
-          columns={columns}
-          createData={createGroup}
-          onUpdate={handleUpdate}
-          onDelete={null}
-          /> */}
+
+        <div className="grid gap-5 lg:gap-7.5 mt-5 relative">
+          {isReloading && (
+            <div className="fixed inset-0 flex items-center justify-center z-50 bg-white/70">
+              <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>
+          )}
           <DataGridProvider
             data={dataGroup}
             columns={getColumns(handleUpdate)}
             pagination={{ size: 25 }}
-            toolbar={<ListToolBar createGroup={createGroup} />}
+            toolbar={
+              <ListToolBar
+                createGroup={createGroup}
+                onReload={handleReload}
+                isReloading={isReloading}
+              />
+            }
             layout={{ card: true }}
-            sorting={[{ id: 'created_at', desc: true }]}
             serverSide={false}
             onRowSelectionChange={(selected, table: any) => {
               const selectedRow = table.getSelectedRowModel().rows[0];