chore(site): replace create user machine by react-query (#9810)

BrunoQuaresma · web-flow · commit f6ee08d10078 · 2023-09-22T13:28:56.000-03:00
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -11,6 +11,12 @@ export const updatePassword = () => {
   };
 };
 
+export const createUser = () => {
+  return {
+    mutationFn: API.createUser,
+  };
+};
+
 export const createFirstUser = () => {
   return {
     mutationFn: API.createFirstUser,
diff --git a/site/src/pages/CreateUserPage/CreateUserPage.test.tsx b/site/src/pages/CreateUserPage/CreateUserPage.test.tsx
@@ -6,7 +6,6 @@ import {
   renderWithAuth,
   waitForLoaderToBeRemoved,
 } from "testHelpers/renderHelpers";
-import { Language as CreateUserLanguage } from "xServices/users/createUserXService";
 import { CreateUserPage } from "./CreateUserPage";
 
 const renderCreateUserPage = async () => {
@@ -47,7 +46,7 @@ describe("Create User Page", () => {
     await renderCreateUserPage();
     await fillForm({});
     const successMessage = await screen.findByText(
-      CreateUserLanguage.createUserSuccess,
+      "Successfully created user.",
     );
     expect(successMessage).toBeDefined();
   });
diff --git a/site/src/pages/CreateUserPage/CreateUserPage.tsx b/site/src/pages/CreateUserPage/CreateUserPage.tsx
@@ -1,15 +1,14 @@
-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 { createUserMachine } from "xServices/users/createUserXService";
-import * as TypesGen from "api/typesGenerated";
 import { CreateUserForm } from "./CreateUserForm";
 import { Margins } from "components/Margins/Margins";
 import { pageTitle } from "utils/page";
 import { getAuthMethods } from "api/api";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { createUser } from "api/queries/users";
+import { displaySuccess } from "components/GlobalSnackbar/utils";
 
 export const Language = {
   unknownError: "Oops, an unknown error occurred.",
@@ -18,15 +17,7 @@ export const Language = {
 export const CreateUserPage: FC = () => {
   const myOrgId = useOrganizationId();
   const navigate = useNavigate();
-  const [createUserState, createUserSend] = useMachine(createUserMachine, {
-    actions: {
-      redirectToUsersPage: () => {
-        navigate("/users");
-      },
-    },
-  });
-  const { error } = createUserState.context;
-
+  const createUserMutation = useMutation(createUser());
   // TODO: We should probably place this somewhere else to reduce the number of calls.
   // This would be called each time this page is loaded.
   const { data: authMethods } = useQuery({
@@ -41,16 +32,17 @@ export const CreateUserPage: FC = () => {
       </Helmet>
 
       <CreateUserForm
-        error={error}
+        error={createUserMutation.error}
         authMethods={authMethods}
-        onSubmit={(user: TypesGen.CreateUserRequest) =>
-          createUserSend({ type: "CREATE", user })
-        }
+        onSubmit={async (user) => {
+          await createUserMutation.mutateAsync(user);
+          displaySuccess("Successfully created user.");
+          navigate("/users");
+        }}
         onCancel={() => {
-          createUserSend("CANCEL_CREATE_USER");
           navigate("/users");
         }}
-        isLoading={createUserState.hasTag("loading")}
+        isLoading={createUserMutation.isLoading}
         myOrgId={myOrgId}
       />
     </Margins>
diff --git a/site/src/xServices/users/createUserXService.ts b/site/src/xServices/users/createUserXService.ts
