coder
diff --git a/‎site/src/api/api.ts
+18 b/‎site/src/api/api.ts
+18
diff --git a/‎site/src/api/queries/groups.ts
+101 b/‎site/src/api/queries/groups.ts
+101
diff --git a/‎site/src/pages/GroupsPage/CreateGroupPage.tsx
+11-19 b/‎site/src/pages/GroupsPage/CreateGroupPage.tsx
+11-19
@@ -969,6 +969,24 @@ export const patchGroup = async (
   return response.data;
 };
 
+export const addMember = async (groupId: string, userId: string) => {
+  return patchGroup(groupId, {
+    name: "",
+    display_name: "",
+    add_users: [userId],
+    remove_users: [],
+  });
+};
+
+export const removeMember = async (groupId: string, userId: string) => {
+  return patchGroup(groupId, {
+    name: "",
+    display_name: "",
+    add_users: [],
+    remove_users: [userId],
+  });
+};
+
 export const deleteGroup = async (groupId: string): Promise<void> => {
   await axios.delete(`/api/v2/groups/${groupId}`);
 };
 
@@ -0,0 +1,101 @@
+import { QueryClient } from "@tanstack/react-query";
+import * as API from "api/api";
+import { checkAuthorization } from "api/api";
+import {
+  CreateGroupRequest,
+  Group,
+  PatchGroupRequest,
+} from "api/typesGenerated";
+
+const GROUPS_QUERY_KEY = ["groups"];
+
+const getGroupQueryKey = (groupId: string) => ["group", groupId];
+
+export const groups = (organizationId: string) => {
+  return {
+    queryKey: GROUPS_QUERY_KEY,
+    queryFn: () => API.getGroups(organizationId),
+  };
+};
+
+export const group = (groupId: string) => {
+  return {
+    queryKey: getGroupQueryKey(groupId),
+    queryFn: () => API.getGroup(groupId),
+  };
+};
+
+export const groupPermissions = (groupId: string) => {
+  return {
+    queryKey: [...getGroupQueryKey(groupId), "permissions"],
+    queryFn: () =>
+      checkAuthorization({
+        checks: {
+          canUpdateGroup: {
+            object: {
+              resource_type: "group",
+              resource_id: groupId,
+            },
+            action: "update",
+          },
+        },
+      }),
+  };
+};
+
+export const createGroup = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({
+      organizationId,
+      ...request
+    }: CreateGroupRequest & { organizationId: string }) =>
+      API.createGroup(organizationId, request),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries(GROUPS_QUERY_KEY);
+    },
+  };
+};
+
+export const patchGroup = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({
+      groupId,
+      ...request
+    }: PatchGroupRequest & { groupId: string }) =>
+      API.patchGroup(groupId, request),
+    onSuccess: async (updatedGroup: Group) =>
+      invalidateGroup(queryClient, updatedGroup.id),
+  };
+};
+
+export const deleteGroup = (queryClient: QueryClient) => {
+  return {
+    mutationFn: API.deleteGroup,
+    onSuccess: async (_: void, groupId: string) =>
+      invalidateGroup(queryClient, groupId),
+  };
+};
+
+export const addMember = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
+      API.addMember(groupId, userId),
+    onSuccess: async (updatedGroup: Group) =>
+      invalidateGroup(queryClient, updatedGroup.id),
+  };
+};
+
+export const removeMember = (queryClient: QueryClient) => {
+  return {
+    mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
+      API.removeMember(groupId, userId),
+    onSuccess: async (updatedGroup: Group) =>
+      invalidateGroup(queryClient, updatedGroup.id),
+  };
+};
+
+export const invalidateGroup = (queryClient: QueryClient, groupId: string) =>
+  Promise.all([
+    queryClient.invalidateQueries(GROUPS_QUERY_KEY),
+    queryClient.invalidateQueries(getGroupQueryKey(groupId)),
+  ]);
@@ -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}
       />
     </>
   );