chore(site): replace xstate by react-query on update password (#9696)

BrunoQuaresma · web-flow · commit a2aff1f527e7 · 2023-09-18T11:03:35.000-03:00
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -0,0 +1,12 @@
+import * as API from "api/api";
+import { UpdateUserPasswordRequest } from "api/typesGenerated";
+
+export const updatePassword = () => {
+  return {
+    mutationFn: ({
+      userId,
+      ...request
+    }: UpdateUserPasswordRequest & { userId: string }) =>
+      API.updateUserPassword(userId, request),
+  };
+};
diff --git a/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx b/site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx
@@ -1,29 +1,21 @@
-import { useMachine } from "@xstate/react";
 import { useMe } from "hooks/useMe";
 import { ComponentProps, FC } from "react";
-import { userSecuritySettingsMachine } from "xServices/userSecuritySettings/userSecuritySettingsXService";
-import { Section } from "../../../components/SettingsLayout/Section";
+import { Section } from "components/SettingsLayout/Section";
 import { SecurityForm } from "./SettingsSecurityForm";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { getAuthMethods, getUserLoginType } from "api/api";
 import {
   SingleSignOnSection,
   useSingleSignOnSection,
 } from "./SingleSignOnSection";
 import { Loader } from "components/Loader/Loader";
 import { Stack } from "components/Stack/Stack";
+import { updatePassword } from "api/queries/users";
+import { displaySuccess } from "components/GlobalSnackbar/utils";
 
 export const SecurityPage: FC = () => {
   const me = useMe();
-  const [securityState, securitySend] = useMachine(
-    userSecuritySettingsMachine,
-    {
-      context: {
-        userId: me.id,
-      },
-    },
-  );
-  const { error } = securityState.context;
+  const updatePasswordMutation = useMutation(updatePassword());
   const { data: authMethods } = useQuery({
     queryKey: ["authMethods"],
     queryFn: getAuthMethods,
@@ -43,13 +35,17 @@ export const SecurityPage: FC = () => {
       security={{
         form: {
           disabled: userLoginType.login_type !== "password",
-          error,
-          isLoading: securityState.matches("updatingSecurity"),
-          onSubmit: (data) => {
-            securitySend({
-              type: "UPDATE_SECURITY",
-              data,
+          error: updatePasswordMutation.error,
+          isLoading: updatePasswordMutation.isLoading,
+          onSubmit: async (data) => {
+            await updatePasswordMutation.mutateAsync({
+              userId: me.id,
+              ...data,
             });
+            displaySuccess("Updated password.");
+            // Refresh the browser session. We need to improve the AuthProvider
+            // to include better API to handle these scenarios
+            window.location.href = location.origin;
           },
         },
       }}
diff --git a/site/src/xServices/userSecuritySettings/userSecuritySettingsXService.ts b/site/src/xServices/userSecuritySettings/userSecuritySettingsXService.ts
