Remove create group service

BrunoQuaresma · BrunoQuaresma · commit 6b93fcc795ea · 2023-09-15T13:14:02.000Z
diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
@@ -1,8 +1,23 @@
+import { QueryClient } from "@tanstack/react-query";
 import * as API from "api/api";
+import { CreateGroupRequest } from "api/typesGenerated";
 
 export const groups = (organizationId: string) => {
   return {
     queryKey: ["groups"],
     queryFn: () => API.getGroups(organizationId),
   };
 };
+
+export const createGroup = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({
+      organizationId,
+      ...request
+    }: CreateGroupRequest & { organizationId: string }) =>
+      API.createGroup(organizationId, request),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries(["groups"]);
+    },
+  };
+};
diff --git a/site/src/pages/GroupsPage/CreateGroupPage.tsx b/site/src/pages/GroupsPage/CreateGroupPage.tsx
@@ -1,41 +1,33 @@
-import { useMachine } from "@xstate/react";
 import { useOrganizationId } from "hooks/useOrganizationId";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useNavigate } from "react-router-dom";
 import { pageTitle } from "utils/page";
-import { createGroupMachine } from "xServices/groups/createGroupXService";
 import CreateGroupPageView from "./CreateGroupPageView";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { createGroup } from "api/queries/groups";
 
 export const CreateGroupPage: FC = () => {
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const organizationId = useOrganizationId();
-  const [createState, sendCreateEvent] = useMachine(createGroupMachine, {
-    context: {
-      organizationId,
-    },
-    actions: {
-      onCreate: (_, { data }) => {
-        navigate(`/groups/${data.id}`);
-      },
-    },
-  });
-  const { error } = createState.context;
+  const createGroupMutation = useMutation(createGroup(queryClient));
 
   return (
     <>
       <Helmet>
         <title>{pageTitle("Create Group")}</title>
       </Helmet>
       <CreateGroupPageView
-        onSubmit={(data) => {
-          sendCreateEvent({
-            type: "CREATE",
-            data,
+        onSubmit={async (data) => {
+          const newGroup = await createGroupMutation.mutateAsync({
+            organizationId,
+            ...data,
           });
+          navigate(`/groups/${newGroup.id}`);
         }}
-        formErrors={error}
-        isLoading={createState.matches("creatingGroup")}
+        formErrors={createGroupMutation.error}
+        isLoading={createGroupMutation.isLoading}
       />
     </>
   );
diff --git a/site/src/xServices/groups/createGroupXService.ts b/site/src/xServices/groups/createGroupXService.ts
