Remove edit group service

BrunoQuaresma · BrunoQuaresma · commit 7466c8b7b841 · 2023-09-15T13:28:34.000Z
diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
@@ -1,6 +1,10 @@
 import { QueryClient } from "@tanstack/react-query";
 import * as API from "api/api";
-import { CreateGroupRequest } from "api/typesGenerated";
+import {
+  CreateGroupRequest,
+  Group,
+  PatchGroupRequest,
+} from "api/typesGenerated";
 
 export const groups = (organizationId: string) => {
   return {
@@ -9,6 +13,13 @@ export const groups = (organizationId: string) => {
   };
 };
 
+export const group = (groupId: string) => {
+  return {
+    queryKey: ["group", groupId],
+    queryFn: () => API.getGroup(groupId),
+  };
+};
+
 export const createGroup = (queryClient: QueryClient) => {
   return {
     mutationFn: ({
@@ -21,3 +32,19 @@ export const createGroup = (queryClient: QueryClient) => {
     },
   };
 };
+
+export const patchGroup = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({
+      groupId,
+      ...request
+    }: PatchGroupRequest & { groupId: string }) =>
+      API.patchGroup(groupId, request),
+    onSuccess: async (updatedGroup: Group) => {
+      await Promise.all([
+        queryClient.invalidateQueries(["groups"]),
+        queryClient.invalidateQueries(["group", updatedGroup.id]),
+      ]);
+    },
+  };
+};
diff --git a/site/src/pages/GroupsPage/SettingsGroupPage.tsx b/site/src/pages/GroupsPage/SettingsGroupPage.tsx
@@ -1,33 +1,24 @@
-import { useMachine } from "@xstate/react";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useNavigate, useParams } from "react-router-dom";
 import { pageTitle } from "utils/page";
-import { editGroupMachine } from "xServices/groups/editGroupXService";
 import SettingsGroupPageView from "./SettingsGroupPageView";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { group, patchGroup } from "api/queries/groups";
+import { displayError } from "components/GlobalSnackbar/utils";
+import { getErrorMessage } from "api/errors";
 
 export const SettingsGroupPage: FC = () => {
-  const { groupId } = useParams();
-  if (!groupId) {
-    throw new Error("Group ID not defined.");
-  }
-
+  const { groupId } = useParams() as { groupId: string };
+  const queryClient = useQueryClient();
+  const groupQuery = useQuery(group(groupId));
+  const patchGroupMutation = useMutation(patchGroup(queryClient));
   const navigate = useNavigate();
 
   const navigateToGroup = () => {
     navigate(`/groups/${groupId}`);
   };
 
-  const [editState, sendEditEvent] = useMachine(editGroupMachine, {
-    context: {
-      groupId,
-    },
-    actions: {
-      onUpdate: navigateToGroup,
-    },
-  });
-  const { error, group } = editState.context;
-
   return (
     <>
       <Helmet>
@@ -36,13 +27,23 @@ export const SettingsGroupPage: FC = () => {
 
       <SettingsGroupPageView
         onCancel={navigateToGroup}
-        onSubmit={(data) => {
-          sendEditEvent({ type: "UPDATE", data });
+        onSubmit={async (data) => {
+          try {
+            await patchGroupMutation.mutateAsync({
+              groupId,
+              ...data,
+              add_users: [],
+              remove_users: [],
+            });
+            navigateToGroup();
+          } catch (error) {
+            displayError(getErrorMessage(error, "Failed to update group"));
+          }
         }}
-        group={group}
-        formErrors={error}
-        isLoading={editState.matches("loading")}
-        isUpdating={editState.matches("updating")}
+        group={groupQuery.data}
+        formErrors={groupQuery.error}
+        isLoading={groupQuery.isLoading}
+        isUpdating={patchGroupMutation.isLoading}
       />
     </>
   );
diff --git a/site/src/xServices/groups/editGroupXService.ts b/site/src/xServices/groups/editGroupXService.ts
