feat(Admin): enhance user management with improved mutation handling and UI updates

Author: sanjaypinna

app/[locale]/dashboard/[entityType]/[entitySlug]/admin/page.tsx

@@ -1,19 +1,21 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import { graphql } from '@/gql';
-import { useQuery } from '@tanstack/react-query';
-import { Button, DataTable, SearchInput, Text } from 'opub-ui';
+import { AddRemoveUserToOrganizationInput } from '@/gql/generated/graphql';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { Button, DataTable, Icon, SearchInput, Text, toast } from 'opub-ui';
 
 import { GraphQL } from '@/lib/api';
 import { formatDate } from '@/lib/utils';
+import { Icons } from '@/components/icons';
 import { Loading } from '@/components/loading';
 import AddUser from './addUser';
 
 const usersListDoc: any = graphql(`
-  query userByOrganization {
-    users {
+  query userByOrg {
+    userByOrganization {
       id
       fullName
       organizationMemberships {
@@ -28,15 +30,49 @@ const usersListDoc: any = graphql(`
   }
 `);
 
+const removeUserDoc: any = graphql(`
+  mutation removeUserFromOrganization(
+    $input: AddRemoveUserToOrganizationInput!
+  ) {
+    removeUserFromOrganization(input: $input) {
+      success
+      message
+    }
+  }
+`);
+
 const Admin = () => {
-  const params = useParams();
+  const params = useParams<{ entityType: string; entitySlug: string }>();
   const usersList: { data: any; isLoading: boolean; refetch: any } = useQuery(
     [`fetch_users_list_admin_members`],
-    () => GraphQL(usersListDoc, {}, [])
+    () => GraphQL(usersListDoc, {
+      [params.entityType]: params.entitySlug,
+    }, [])
   );
   const [isOpen, setIsOpen] = useState(false);
   const [isEdit, setIsEdit] = useState(false);
   const [selectedUser, setSelectedUser] = useState({});
+  const [refetch,setRefetch]=useState(false)
+
+  const { mutate, isLoading: removeUserLoading } = useMutation(
+    (input: { input: AddRemoveUserToOrganizationInput }) =>
+      GraphQL(
+        removeUserDoc,
+        {
+          [params.entityType]: params.entitySlug,
+        },
+        input
+      ),
+    {
+      onSuccess: (res: any) => {
+        toast('User removed successfully');
+        usersList.refetch();
+      },
+      onError: (err: any) => {
+        toast('Failed to remove user');
+      },
+    }
+  );
 
   const table = {
     columns: [
@@ -45,43 +81,66 @@ const Admin = () => {
         header: 'Name',
       },
       { accessorKey: 'role', header: 'Role' },
-      { accessorKey: 'created', header: 'Date Created' },
       { accessorKey: 'modified', header: 'Date Modified' },
       {
         accessorKey: 'edit',
         header: 'Edit',
         cell: ({ row }: any) => (
-          <Button
-            onClick={() => {
-              setSelectedUser({
-                id: row.original.id,
-                name: row.original.name,
-                role: {
-                  id: row.original.roleId,
-                  name: row.original.role,
-                },
-              });
-              setIsOpen(true);
-              setIsEdit(true)
-            }}
-          >
-            Edit
-          </Button>
+          <div className="">
+            <Button
+              onClick={() => {
+                setSelectedUser({
+                  id: row.original.id,
+                  name: row.original.name,
+                  role: {
+                    id: row.original.roleId,
+                    name: row.original.role,
+                  },
+                });
+                setIsOpen(true);
+                setIsEdit(true);
+              }}
+              kind="tertiary"
+            >
+              <Icon source={Icons.pencil} size={24} color="warning" />
+            </Button>
+          </div>
+        ),
+      },
+      {
+        accessorKey: 'delete',
+        header: 'Delete',
+        cell: ({ row }: any) => (
+          <div className="">
+            <Button
+              onClick={() => {
+                mutate({
+                  input: {
+                    userId: row.original.id,
+                    roleId: row.original.roleId,
+                  },
+                });
+              }}
+              kind="tertiary"
+            >
+              <Icon source={Icons.delete} size={24} color="warning" />
+            </Button>
+          </div>
         ),
       },
     ],
+
     rows:
-      usersList.data?.users.map((item: any) => ({
+      usersList.data?.userByOrganization.map((item: any) => ({
         name: item.fullName,
         role: item.organizationMemberships[0]?.role?.name || 'N/A',
         roleId: item.organizationMemberships[0]?.role?.id || '',
-        created:
-          formatDate(item.organizationMemberships[0]?.createdAt) || 'N/A',
         modified:
           formatDate(item.organizationMemberships[0]?.updatedAt) || 'N/A',
         id: item.id,
       })) || [],
   };
+  
 
   const [filteredRows, setFilteredRows] = React.useState<any[]>(table.rows);
   const handleSearchChange = (e: string) => {
@@ -92,10 +151,18 @@ const Admin = () => {
     setFilteredRows(filtered);
   };
 
+  useEffect(() => {
+    usersList.refetch();
+    setRefetch(false);
+  }, [refetch]);
+
   return (
     <div>
-      <div className="my-4 lg:my-8 flex flex-wrap items-center justify-between gap-4 lg:gap-6 px-4 lg:flex-nowrap">
-        <Text>Showing {usersList.data?.users?.length || 0} of {usersList.data?.users?.length || 0} People</Text>
+      <div className="my-4 flex flex-wrap items-center justify-between gap-4 px-4 lg:my-8 lg:flex-nowrap lg:gap-6">
+        <Text>
+          Showing {usersList.data?.userByOrganization?.length || 0} of{' '}
+          {usersList.data?.userByOrganization?.length || 0} People
+        </Text>
         <SearchInput
           className="w-full lg:w-1/2 "
           placeholder="Search for a person"
@@ -114,7 +181,7 @@ const Admin = () => {
                   name: '',
                 },
               });
-              setIsEdit(false)
+              setIsEdit(false);
               setIsOpen(true);
             }}
           >
@@ -125,23 +192,22 @@ const Admin = () => {
           <AddUser
             setIsOpen={setIsOpen}
             selectedUser={selectedUser}
-            title="Add User"
             isOpen={isOpen}
-            refetchUsers={usersList.refetch()}
             isEdit={isEdit}
+            setRefetch={setRefetch}
           />
         )}
       </div>
       <div>
-        {usersList.data?.users?.length > 0 ? (
+        {usersList.data?.userByOrganization?.length > 0 ? (
           <DataTable
             columns={table.columns}
             rows={table.rows}
             hideSelection
             hideViewSelector
           />
         ) : (
-          <Loading />
+          <Loading/>
         )}
       </div>
     </div>