Move xstate transitions to provider

coder · Parkreiner · Oct 11, 2023 · Oct 10, 2023 · Oct 10, 2023 · Oct 10, 2023
commit 10f3c100c77147648fe124b734a796f65d6bca6c
diff --git a/site/src/components/AuthProvider/AuthProvider.tsx b/site/src/components/AuthProvider/AuthProvider.tsx
@@ -1,36 +1,63 @@
 import { useActor, useInterpret } from "@xstate/react";
-import { createContext, FC, PropsWithChildren, useContext } from "react";
+import { UpdateUserProfileRequest } from "api/typesGenerated";
+import {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+} from "react";
 import { authMachine } from "xServices/auth/authXService";
 import { ActorRefFrom } from "xstate";
 
-interface AuthContextValue {
+type AuthContextValue = {
+  signOut: () => void;
+  signIn: (email: string, password: string) => void;
+  updateProfile: (data: UpdateUserProfileRequest) => void;
   authService: ActorRefFrom<typeof authMachine>;
-}
+};
 
 const AuthContext = createContext<AuthContextValue | undefined>(undefined);
 
 export const AuthProvider: FC<PropsWithChildren> = ({ children }) => {
   const authService = useInterpret(authMachine);
 
+  const signOut = useCallback(() => {
+    authService.send("SIGN_OUT");
+  }, [authService]);
+
+  const signIn = useCallback(
+    (email: string, password: string) => {
+      authService.send({ type: "SIGN_IN", email, password });
+    },
+    [authService],
+  );
+
+  const updateProfile = useCallback(
+    (data: UpdateUserProfileRequest) => {
+      authService.send({ type: "UPDATE_PROFILE", data });
+    },
+    [authService],
+  );
+
   return (
-    <AuthContext.Provider value={{ authService }}>
+    <AuthContext.Provider
+      value={{ authService, signOut, signIn, updateProfile }}
+    >
       {children}
     </AuthContext.Provider>
   );
 };
 
-type UseAuthReturnType = ReturnType<
-  typeof useActor<AuthContextValue["authService"]>
->;
-
-export const useAuth = (): UseAuthReturnType => {
+export const useAuth = () => {
   const context = useContext(AuthContext);
 
   if (!context) {
     throw new Error("useAuth should be used inside of <AuthProvider />");
   }
 
-  const auth = useActor(context.authService);
-
-  return auth;
+  return {
+    ...context,
+    actor: useActor(context.authService),
+  };
 };
diff --git a/site/src/components/Dashboard/Navbar/Navbar.tsx b/site/src/components/Dashboard/Navbar/Navbar.tsx
@@ -9,15 +9,14 @@ import { useProxy } from "contexts/ProxyContext";
 
 export const Navbar: FC = () => {
   const { appearance, buildInfo } = useDashboard();
-  const [_, authSend] = useAuth();
+  const { signOut } = useAuth();
   const me = useMe();
   const permissions = usePermissions();
   const featureVisibility = useFeatureVisibility();
   const canViewAuditLog =
     featureVisibility["audit_log"] && Boolean(permissions.viewAuditLog);
   const canViewDeployment = Boolean(permissions.viewDeploymentValues);
   const canViewAllUsers = Boolean(permissions.readAllUsers);
-  const onSignOut = () => authSend("SIGN_OUT");
   const proxyContextValue = useProxy();
   const dashboard = useDashboard();
 
@@ -27,7 +26,7 @@ export const Navbar: FC = () => {
       logo_url={appearance.config.logo_url}
       buildInfo={buildInfo}
       supportLinks={appearance.config.support_links}
-      onSignOut={onSignOut}
+      onSignOut={signOut}
       canViewAuditLog={canViewAuditLog}
       canViewDeployment={canViewDeployment}
       canViewAllUsers={canViewAllUsers}

diff --git a/site/src/components/RequireAuth/RequireAuth.tsx b/site/src/components/RequireAuth/RequireAuth.tsx
@@ -9,7 +9,8 @@ import { ProxyProvider } from "contexts/ProxyContext";
 import { isApiError } from "api/errors";
 
 export const RequireAuth: FC = () => {
-  const [authState, authSend] = useAuth();
+  const { signOut, actor } = useAuth();
+  const [authState] = actor;
   const location = useLocation();
   const isHomePage = location.pathname === "/";
   const navigateTo = isHomePage
@@ -24,7 +25,7 @@ export const RequireAuth: FC = () => {
         // If we encountered an authentication error, then our token is probably
         // invalid and we should update the auth state to reflect that.
         if (isApiError(error) && error.response.status === 401) {
-          authSend("SIGN_OUT");
+          signOut();
         }
 
         // Otherwise, pass the response through so that it can be displayed in the UI
@@ -35,7 +36,7 @@ export const RequireAuth: FC = () => {
     return () => {
       axios.interceptors.response.eject(interceptorHandle);
     };
-  }, [authSend]);
+  }, [signOut]);
 
   if (authState.matches("signedOut")) {
     return <Navigate to={navigateTo} state={{ isRedirect: !isHomePage }} />;

diff --git a/site/src/hooks/useMe.ts b/site/src/hooks/useMe.ts
@@ -3,7 +3,8 @@ import { useAuth } from "components/AuthProvider/AuthProvider";
 import { isAuthenticated } from "xServices/auth/authXService";
 
 export const useMe = (): User => {
-  const [authState] = useAuth();
+  const { actor } = useAuth();
+  const [authState] = actor;
   const { data } = authState.context;
 
   if (isAuthenticated(data)) {

diff --git a/site/src/hooks/useOrganizationId.ts b/site/src/hooks/useOrganizationId.ts
@@ -2,7 +2,8 @@ import { useAuth } from "components/AuthProvider/AuthProvider";
 import { isAuthenticated } from "xServices/auth/authXService";
 
 export const useOrganizationId = (): string => {
-  const [authState] = useAuth();
+  const { actor } = useAuth();
+  const [authState] = actor;
   const { data } = authState.context;
 
   if (isAuthenticated(data)) {

diff --git a/site/src/hooks/usePermissions.ts b/site/src/hooks/usePermissions.ts
@@ -2,7 +2,8 @@ import { useAuth } from "components/AuthProvider/AuthProvider";
 import { isAuthenticated, Permissions } from "xServices/auth/authXService";
 
 export const usePermissions = (): Permissions => {
-  const [authState] = useAuth();
+  const { actor } = useAuth();
+  const [authState] = actor;
   const { data } = authState.context;
 
   if (isAuthenticated(data)) {

diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
@@ -8,7 +8,8 @@ import { getApplicationName } from "utils/appearance";
 
 export const LoginPage: FC = () => {
   const location = useLocation();
-  const [authState, authSend] = useAuth();
+  const { actor, signIn } = useAuth();
+  const [authState] = actor;
   const redirectTo = retrieveRedirect(location.search);
   const applicationName = getApplicationName();
 
@@ -27,7 +28,7 @@ export const LoginPage: FC = () => {
           isLoading={authState.matches("loadingInitialAuthData")}
           isSigningIn={authState.matches("signingIn")}
           onSignIn={({ email, password }) => {
-            authSend({ type: "SIGN_IN", email, password });
+            signIn(email, password);
           }}
         />
       </>

diff --git a/site/src/pages/SetupPage/SetupPage.tsx b/site/src/pages/SetupPage/SetupPage.tsx
@@ -8,7 +8,8 @@ import { useMutation } from "react-query";
 import { createFirstUser } from "api/queries/users";
 
 export const SetupPage: FC = () => {
-  const [authState, authSend] = useAuth();
+  const { signIn, actor } = useAuth();
+  const [authState] = actor;
   const createFirstUserMutation = useMutation(createFirstUser());
   const userIsSignedIn = authState.matches("signedIn");
   const setupIsComplete =
@@ -35,11 +36,7 @@ export const SetupPage: FC = () => {
         error={createFirstUserMutation.error}
         onSubmit={async (firstUser) => {
           await createFirstUserMutation.mutateAsync(firstUser);
-          authSend({
-            type: "SIGN_IN",
-            email: firstUser.email,
-            password: firstUser.password,
-          });
+          signIn(firstUser.email, firstUser.password);
         }}
       />
     </>

diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountForm.tsx
@@ -1,5 +1,5 @@
 import TextField from "@mui/material/TextField";
-import { FormikContextType, FormikTouched, useFormik } from "formik";
+import { FormikTouched, useFormik } from "formik";
 import { FC } from "react";
 import * as Yup from "yup";
 import {
@@ -10,10 +10,7 @@ import {
 import { LoadingButton } from "components/LoadingButton/LoadingButton";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Form, FormFields } from "components/Form/Form";
-
-export interface AccountFormValues {
-  username: string;
-}
+import { UpdateUserProfileRequest } from "api/typesGenerated";
 
 export const Language = {
   usernameLabel: "Username",
@@ -29,14 +26,14 @@ export interface AccountFormProps {
   editable: boolean;
   email: string;
   isLoading: boolean;
-  initialValues: AccountFormValues;
-  onSubmit: (values: AccountFormValues) => void;
+  initialValues: UpdateUserProfileRequest;
+  onSubmit: (values: UpdateUserProfileRequest) => void;
   updateProfileError?: unknown;
   // initialTouched is only used for testing the error state of the form.
-  initialTouched?: FormikTouched<AccountFormValues>;
+  initialTouched?: FormikTouched<UpdateUserProfileRequest>;
 }
 
-export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
+export const AccountForm: FC<AccountFormProps> = ({
   editable,
   email,
   isLoading,
@@ -45,17 +42,13 @@ export const AccountForm: FC<React.PropsWithChildren<AccountFormProps>> = ({
   updateProfileError,
   initialTouched,
 }) => {
-  const form: FormikContextType<AccountFormValues> =
-    useFormik<AccountFormValues>({
-      initialValues,
-      validationSchema,
-      onSubmit,
-      initialTouched,
-    });
-  const getFieldHelpers = getFormHelpers<AccountFormValues>(
-    form,
-    updateProfileError,
-  );
+  const form = useFormik({
+    initialValues,
+    validationSchema,
+    onSubmit,
+    initialTouched,
+  });
+  const getFieldHelpers = getFormHelpers(form, updateProfileError);
 
   return (
     <>

diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -6,7 +6,8 @@ import { useMe } from "hooks/useMe";
 import { usePermissions } from "hooks/usePermissions";
 
 export const AccountPage: FC = () => {
-  const [authState, authSend] = useAuth();
+  const { updateProfile, actor } = useAuth();
+  const [authState] = actor;
   const me = useMe();
   const permissions = usePermissions();
   const { updateProfileError } = authState.context;
@@ -22,12 +23,7 @@ export const AccountPage: FC = () => {
         initialValues={{
           username: me.username,
         }}
-        onSubmit={(data) => {
-          authSend({
-            type: "UPDATE_PROFILE",
-            data,
-          });
-        }}
+        onSubmit={updateProfile}
       />
     </Section>
   );