improvement: Better group member management (#2851)

* improvement: Better org member management

frontend/src/hooks/api/groups/index.tsx

@@ -1,9 +1,8 @@
 export {
-    useAddUserToGroup,
-    useCreateGroup,
-    useDeleteGroup,
-    useRemoveUserFromGroup,
-    useUpdateGroup} from "./mutations";
-export {
-    useListGroupUsers
-} from "./queries";
+  useAddUserToGroup,
+  useCreateGroup,
+  useDeleteGroup,
+  useRemoveUserFromGroup,
+  useUpdateGroup
+} from "./mutations";
+export { useGetGroupById, useListGroupUsers } from "./queries";

frontend/src/hooks/api/groups/mutations.tsx

@@ -56,8 +56,9 @@ export const useUpdateGroup = () => {
 
       return group;
     },
-    onSuccess: ({ orgId }) => {
+    onSuccess: ({ orgId, id: groupId }) => {
       queryClient.invalidateQueries(organizationKeys.getOrgGroups(orgId));
+      queryClient.invalidateQueries(groupKeys.getGroupById(groupId));
     }
   });
 };
@@ -70,8 +71,9 @@ export const useDeleteGroup = () => {
 
       return group;
     },
-    onSuccess: ({ orgId }) => {
+    onSuccess: ({ orgId, id: groupId }) => {
       queryClient.invalidateQueries(organizationKeys.getOrgGroups(orgId));
+      queryClient.invalidateQueries(groupKeys.getGroupById(groupId));
     }
   });
 };

frontend/src/hooks/api/groups/queries.tsx

@@ -2,7 +2,10 @@ import { useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
+import { EFilterReturnedUsers, TGroup, TGroupUser } from "./types";
+
 export const groupKeys = {
+  getGroupById: (groupId: string) => [{ groupId }, "group"] as const,
   allGroupUserMemberships: () => ["group-user-memberships"] as const,
   forGroupUserMemberships: (slug: string) =>
     [...groupKeys.allGroupUserMemberships(), slug] as const,
@@ -10,22 +13,27 @@ export const groupKeys = {
     slug,
     offset,
     limit,
-    search
+    search,
+    filter
   }: {
     slug: string;
     offset: number;
     limit: number;
     search: string;
-  }) => [...groupKeys.forGroupUserMemberships(slug), { offset, limit, search }] as const
+    filter?: EFilterReturnedUsers;
+  }) => [...groupKeys.forGroupUserMemberships(slug), { offset, limit, search, filter }] as const
 };
 
-type TUser = {
-  id: string;
-  email: string;
-  username: string;
-  firstName: string;
-  lastName: string;
-  isPartOfGroup: boolean;
+export const useGetGroupById = (groupId: string) => {
+  return useQuery({
+    enabled: Boolean(groupId),
+    queryKey: groupKeys.getGroupById(groupId),
+    queryFn: async () => {
+      const { data } = await apiRequest.get<TGroup>(`/api/v1/groups/${groupId}`);
+
+      return { group: data };
+    }
+  });
 };
 
 export const useListGroupUsers = ({
@@ -33,20 +41,23 @@ export const useListGroupUsers = ({
   groupSlug,
   offset = 0,
   limit = 10,
-  search
+  search,
+  filter
 }: {
   id: string;
   groupSlug: string;
   offset: number;
   limit: number;
   search: string;
+  filter?: EFilterReturnedUsers;
 }) => {
   return useQuery({
     queryKey: groupKeys.specificGroupUserMemberships({
       slug: groupSlug,
       offset,
       limit,
-      search
+      search,
+      filter
     }),
     enabled: Boolean(groupSlug),
     keepPreviousData: true,
@@ -54,10 +65,11 @@ export const useListGroupUsers = ({
       const params = new URLSearchParams({
         offset: String(offset),
         limit: String(limit),
-        search
+        search,
+        ...(filter && { filter })
       });
 
-      const { data } = await apiRequest.get<{ users: TUser[]; totalCount: number }>(
+      const { data } = await apiRequest.get<{ users: TGroupUser[]; totalCount: number }>(
         `/api/v1/groups/${id}/users`,
         {
           params

frontend/src/hooks/api/groups/types.ts

@@ -11,7 +11,7 @@ export type TGroup = {
   name: string;
   slug: string;
   orgId: string;
-  createAt: string;
+  createdAt: string;
   updatedAt: string;
   role: string;
 };
@@ -41,3 +41,18 @@ export type TGroupWithProjectMemberships = {
   slug: string;
   orgId: string;
 };
+
+export type TGroupUser = {
+  id: string;
+  email: string;
+  username: string;
+  firstName: string;
+  lastName: string;
+  isPartOfGroup: boolean;
+  joinedGroupAt: Date;
+};
+
+export enum EFilterReturnedUsers {
+  EXISTING_MEMBERS = "existingMembers",
+  NON_MEMBERS = "nonMembers"
+}