Complete basic pre-cleaned group member assignment/unassignment

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

@@ -1,4 +1,9 @@
 export {
     useCreateGroup,
+    useCreateGroupUserMembership,
     useDeleteGroup,
-    useUpdateGroup} from "./mutations";
+    useDeleteGroupUserMembership,
+    useUpdateGroup} from "./mutations";
+export {
+    useGetGroupUserMemberships
+} from "./queries";

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

@@ -3,6 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@app/config/request";
 
 import { organizationKeys } from "../organization/queries";
+import { groupKeys } from "./queries";
 import { TGroup } from "./types";
 
 export const useCreateGroup = () => {
@@ -84,4 +85,48 @@ export const useDeleteGroup = () => {
             queryClient.invalidateQueries(organizationKeys.getOrgGroups(orgId));
         }
     });
+};
+
+export const useCreateGroupUserMembership = () => {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: async ({ 
+            slug,
+            username
+        }: { 
+            slug: string;
+            username: string;
+        }) => {
+            const {
+                data
+            } = await apiRequest.post<TGroup>(`/api/v1/groups/${slug}/users/${username}`);
+
+            return data;
+        },
+        onSuccess: (_, { slug }) => {
+            queryClient.invalidateQueries(groupKeys.getGroupUserMembership(slug));
+        }
+    });
+};
+
+export const useDeleteGroupUserMembership = () => {
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: async ({ 
+            slug,
+            username
+        }: { 
+            slug: string;
+            username: string;
+        }) => {
+            const {
+                data
+            } = await apiRequest.delete<TGroup>(`/api/v1/groups/${slug}/users/${username}`);
+
+            return data;
+        },
+        onSuccess: (_, { slug }) => {
+            queryClient.invalidateQueries(groupKeys.getGroupUserMembership(slug));
+        }
+    });
 };

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

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+export const groupKeys = {
+    getGroupUserMembership: (slug: string) => [{ slug }, "group-user-memberships"] as const
+}
+
+type TUser = {
+  id: string;
+  email: string;
+  username: string;
+  firstName: string;
+  lastName: string;
+  isPartOfGroup: boolean;
+}
+
+export const useGetGroupUserMemberships = (groupSlug: string) => {
+  return useQuery({
+    queryKey: groupKeys.getGroupUserMembership(groupSlug),
+    queryFn: async () => {
+      const {
+        data: users
+      } = await apiRequest.get<TUser[]>(`/api/v1/groups/${groupSlug}/users`);
+      
+      return users;
+    }
+  });
+};