chore(site): replace setup machine by react-query (#9809)

site/src/api/queries/users.ts

@@ -10,3 +10,9 @@ export const updatePassword = () => {
       API.updateUserPassword(userId, request),
   };
 };
+
+export const createFirstUser = () => {
+  return {
+    mutationFn: API.createFirstUser,
+  };
+};

site/src/pages/SetupPage/SetupPage.tsx

@@ -1,30 +1,15 @@
-import { useMachine } from "@xstate/react";
 import { useAuth } from "components/AuthProvider/AuthProvider";
 import { FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { pageTitle } from "utils/page";
-import { setupMachine } from "xServices/setup/setupXService";
 import { SetupPageView } from "./SetupPageView";
 import { Navigate } from "react-router-dom";
+import { useMutation } from "@tanstack/react-query";
+import { createFirstUser } from "api/queries/users";
 
 export const SetupPage: FC = () => {
   const [authState, authSend] = useAuth();
-  const [setupState, setupSend] = useMachine(setupMachine, {
-    actions: {
-      onCreateFirstUser: ({ firstUser }) => {
-        if (!firstUser) {
-          throw new Error("First user was not defined.");
-        }
-        authSend({
-          type: "SIGN_IN",
-          email: firstUser.email,
-          password: firstUser.password,
-        });
-      },
-    },
-  });
-  const { error } = setupState.context;
-
+  const createFirstUserMutation = useMutation(createFirstUser());
   const userIsSignedIn = authState.matches("signedIn");
   const setupIsComplete =
     !authState.matches("loadingInitialAuthData") &&
@@ -46,10 +31,15 @@ export const SetupPage: FC = () => {
         <title>{pageTitle("Set up your account")}</title>
       </Helmet>
       <SetupPageView
-        isLoading={setupState.hasTag("loading")}
-        error={error}
-        onSubmit={(firstUser) => {
-          setupSend({ type: "CREATE_FIRST_USER", firstUser });
+        isLoading={createFirstUserMutation.isLoading}
+        error={createFirstUserMutation.error}
+        onSubmit={async (firstUser) => {
+          await createFirstUserMutation.mutateAsync(firstUser);
+          authSend({
+            type: "SIGN_IN",
+            email: firstUser.email,
+            password: firstUser.password,
+          });
         }}
       />
     </>

site/src/xServices/setup/setupXService.ts

@@ -1,81 +0,0 @@
-import * as API from "api/api";
-import * as TypesGen from "api/typesGenerated";
-import { assign, createMachine } from "xstate";
-
-export interface SetupContext {
-  error?: unknown;
-  firstUser?: TypesGen.CreateFirstUserRequest;
-}
-
-export type SetupEvent = {
-  type: "CREATE_FIRST_USER";
-  firstUser: TypesGen.CreateFirstUserRequest;
-};
-
-export const setupMachine =
-  /** @xstate-layout N4IgpgJg5mDOIC5QGUwBcCuAHZaCGaYAdAJYQA2YAxAMIBKAogIIAqDA+gGICSdyL7AKrIGdRKCwB7WCTQlJAO3EgAHogDMAViKaAnPoDsABgBMRgCy6jpkwBoQAT0QBGI+qIA2N0ePOAHJqa-qYAviH2qJg4+IREAMYATmAEJApQnCQJsGiCsGAJVBCKxKkAbpIA1sSJyYQZWTl5CcpSMnKKymoI6ibuzmZGuiYG6kYemn4eHvZOCObOzjom-X7qHsZGmuq6mmER6Ni4BNVJKWn12bn5VPkJkglEWOQEAGb3ALbxp3WZl00t0lk8iUSFUGl07g8-XMxlWmmsWnUMxcUyIzg86hhPgWvg8JjC4RACkkEDgykihxiJQoYABbWBnUQflcRAMZlc6jWwwMfmRCDM2ksfgMzl0Bisbj85j8exAFOixy+tVS6V+jXydKBHVBXQAtDsiOyeVp-OoFrpnHyzboiKZ1CMDCNzEY-H4xbL5UdYi81VcEjRvpBNe0QaAuoEbZzpfaRh4rFM+eYTOZbcsTBD0b0bB6DgrCMGGTrELrzYajM5jUFVubLY4NIsvKM2eMtKZNOMCSEgA */
-  createMachine(
-    {
-      id: "SetupState",
-      predictableActionArguments: true,
-      tsTypes: {} as import("./setupXService.typegen").Typegen0,
-      schema: {
-        context: {} as SetupContext,
-        events: {} as SetupEvent,
-        services: {} as {
-          createFirstUser: {
-            data: TypesGen.CreateFirstUserResponse;
-          };
-        },
-      },
-      initial: "idle",
-      states: {
-        idle: {
-          on: {
-            CREATE_FIRST_USER: {
-              actions: "assignFirstUserData",
-              target: "creatingFirstUser",
-            },
-          },
-        },
-        creatingFirstUser: {
-          entry: "clearError",
-          invoke: {
-            src: "createFirstUser",
-            id: "createFirstUser",
-            onDone: [
-              {
-                actions: "onCreateFirstUser",
-                target: "firstUserCreated",
-              },
-            ],
-            onError: {
-              actions: "assignError",
-              target: "idle",
-            },
-          },
-          tags: "loading",
-        },
-        firstUserCreated: {
-          tags: "loading",
-          type: "final",
-        },
-      },
-    },
-    {
-      services: {
-        createFirstUser: (_, event) => API.createFirstUser(event.firstUser),
-      },
-      actions: {
-        assignFirstUserData: assign({
-          firstUser: (_, event) => event.firstUser,
-        }),
-        assignError: assign({
-          error: (_, event) => event.data,
-        }),
-        clearError: assign({
-          error: (_) => undefined,
-        }),
-      },
-    },
-  );