refactor: custom hook for sign in redirection (#2969)

web/components/account/sign-in-forms/email-form.tsx

@@ -84,7 +84,7 @@ export const EmailForm: React.FC<Props> = (props) => {
   return (
     <>
       <h1 className="text-center text-2xl sm:text-2.5xl font-medium text-onboarding-text-100">
-        Get on your flight deck!
+        Get on your flight deck
       </h1>
       <p className="text-center text-sm text-onboarding-text-200 mt-3">
         Sign in with the email you used to sign up for Plane

web/components/account/sign-in-forms/password.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { XCircle } from "lucide-react";
@@ -36,6 +36,8 @@ const authService = new AuthService();
 
 export const PasswordForm: React.FC<Props> = (props) => {
   const { email, updateEmail, handleStepChange, handleSignInRedirection } = props;
+  // states
+  const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false);
   // toast alert
   const { setToastAlert } = useToast();
   // form info
@@ -113,6 +115,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
       return;
     }
 
+    setIsSendingResetPasswordLink(true);
+
     authService
       .sendResetPasswordLink({ email: emailFormValue })
       .then(() => handleStepChange(ESignInSteps.SET_PASSWORD_LINK))
@@ -122,7 +126,8 @@ export const PasswordForm: React.FC<Props> = (props) => {
           title: "Error!",
           message: err?.error ?? "Something went wrong. Please try again.",
         })
-      );
+      )
+      .finally(() => setIsSendingResetPasswordLink(false));
   };
 
   return (
@@ -189,9 +194,12 @@ export const PasswordForm: React.FC<Props> = (props) => {
             <button
               type="button"
               onClick={handleForgotPassword}
-              className="text-xs font-medium text-custom-primary-100"
+              className={`text-xs font-medium ${
+                isSendingResetPasswordLink ? "text-onboarding-text-300" : "text-custom-primary-100"
+              }`}
+              disabled={isSendingResetPasswordLink}
             >
-              Forgot your password?
+              {isSendingResetPasswordLink ? "Sending link..." : "Forgot your password?"}
             </button>
           </div>
         </div>

web/components/account/sign-in-forms/root.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+// hooks
+import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import {
   EmailForm,
@@ -19,33 +21,27 @@ export enum ESignInSteps {
   CREATE_PASSWORD = "CREATE_PASSWORD",
 }
 
-type Props = {
-  handleSignInRedirection: () => Promise<void>;
-};
-
 const OAUTH_HIDDEN_STEPS = [ESignInSteps.OPTIONAL_SET_PASSWORD, ESignInSteps.CREATE_PASSWORD];
 
-export const SignInRoot: React.FC<Props> = (props) => {
+export const SignInRoot = () => {
-  const { handleSignInRedirection } = props;
   // states
   const [signInStep, setSignInStep] = useState<ESignInSteps>(ESignInSteps.EMAIL);
   const [email, setEmail] = useState("");
+  // sign in redirection hook
+  const { handleRedirection } = useSignInRedirection();
 
   return (
     <>
       <div className="mx-auto flex flex-col">
         {signInStep === ESignInSteps.EMAIL && (
-          <EmailForm
+          <EmailForm handleStepChange={(step) => setSignInStep(step)} updateEmail={(newEmail) => setEmail(newEmail)} />
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
-            updateEmail={(newEmail) => setEmail(newEmail)}
-          />
         )}
         {signInStep === ESignInSteps.PASSWORD && (
           <PasswordForm
             email={email}
             updateEmail={(newEmail) => setEmail(newEmail)}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
+            handleStepChange={(step) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleSignInRedirection={handleRedirection}
           />
         )}
         {signInStep === ESignInSteps.SET_PASSWORD_LINK && (
@@ -55,30 +51,30 @@ export const SignInRoot: React.FC<Props> = (props) => {
           <UniqueCodeForm
             email={email}
             updateEmail={(newEmail) => setEmail(newEmail)}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
+            handleStepChange={(step) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleSignInRedirection={handleRedirection}
           />
         )}
         {signInStep === ESignInSteps.OPTIONAL_SET_PASSWORD && (
           <OptionalSetPasswordForm
             email={email}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
+            handleStepChange={(step) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleSignInRedirection={handleRedirection}
           />
         )}
         {signInStep === ESignInSteps.CREATE_PASSWORD && (
           <CreatePasswordForm
             email={email}
-            handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
+            handleStepChange={(step) => setSignInStep(step)}
-            handleSignInRedirection={handleSignInRedirection}
+            handleSignInRedirection={handleRedirection}
           />
         )}
       </div>
       {!OAUTH_HIDDEN_STEPS.includes(signInStep) && (
         <OAuthOptions
           updateEmail={(newEmail) => setEmail(newEmail)}
-          handleStepChange={(step: ESignInSteps) => setSignInStep(step)}
+          handleStepChange={(step) => setSignInStep(step)}
-          handleSignInRedirection={handleSignInRedirection}
+          handleSignInRedirection={handleRedirection}
         />
       )}
     </>

web/components/account/sign-in-forms/set-password-link.tsx

@@ -30,7 +30,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
   const {
     control,
     formState: { errors, isValid },
-    watch,
+    handleSubmit,
   } = useForm({
     defaultValues: {
       email,
@@ -39,11 +39,13 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
     reValidateMode: "onChange",
   });
 
-  const handleSendNewLink = async () => {
+  const handleSendNewLink = async (formData: { email: string }) => {
     setIsSendingNewLink(true);
 
+    updateEmail(formData.email);
+
     const payload: IEmailCheckData = {
-      email: watch("email"),
+      email: formData.email,
       type: "password",
     };
 
@@ -76,7 +78,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
         password
       </p>
 
-      <form className="mt-5 sm:w-96 mx-auto space-y-4">
+      <form onSubmit={handleSubmit(handleSendNewLink)} className="mt-5 sm:w-96 mx-auto space-y-4">
         <div className="space-y-1">
           <Controller
             control={control}
@@ -92,10 +94,7 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
                   name="email"
                   type="email"
                   value={value}
-                  onChange={(e) => {
+                  onChange={onChange}
-                    updateEmail(e.target.value);
-                    onChange(e.target.value);
-                  }}
                   ref={ref}
                   hasError={Boolean(errors.email)}
                   placeholder="orville.wright@firstflight.com"
@@ -112,11 +111,10 @@ export const SetPasswordLink: React.FC<Props> = (props) => {
           />
         </div>
         <Button
-          type="button"
+          type="submit"
           variant="primary"
           className="w-full"
           size="xl"
-          onClick={handleSendNewLink}
           disabled={!isValid}
           loading={isSendingNewLink}
         >

web/components/page-views/signin.tsx

@@ -1,12 +1,13 @@
-import { useState, useEffect, useCallback } from "react";
+import { useEffect } from "react";
 import Link from "next/link";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
 import { useTheme } from "next-themes";
-import { useRouter } from "next/router";
 import { Lightbulb } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useSignInRedirection from "hooks/use-sign-in-redirection";
 // components
 import { SignInRoot } from "components/account";
 // ui
@@ -14,122 +15,84 @@ import { Loader, Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 import latestFeatures from "public/onboarding/onboarding-pages.svg";
-// types
-import { IUser, IUserSettings } from "types";
 
 export type AuthType = "sign-in" | "sign-up";
 
 export const SignInView = observer(() => {
   // store
   const {
-    user: { fetchCurrentUser, fetchCurrentUserSettings },
+    user: { currentUser },
     appConfig: { envConfig },
   } = useMobxStore();
-  // router
-  const router = useRouter();
-  const { next: next_url } = router.query;
-  // states
-  const [isLoading, setLoading] = useState(false);
   // next-themes
   const { resolvedTheme } = useTheme();
-
+  // sign in redirection hook
-  const handleSignInRedirection = useCallback(
+  const { isRedirecting, handleRedirection } = useSignInRedirection();
-    async (user: IUser) => {
-      // if the user is not onboarded, redirect them to the onboarding page
-      if (!user.is_onboarded) {
-        router.push("/onboarding");
-        return;
-      }
-      // if next_url is provided, redirect the user to that url
-      if (next_url) {
-        router.push(next_url.toString());
-        return;
-      }
-
-      // if the user is onboarded, fetch their last workspace details
-      await fetchCurrentUserSettings()
-        .then((userSettings: IUserSettings) => {
-          const workspaceSlug =
-            userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
-          if (workspaceSlug) router.push(`/${workspaceSlug}`);
-          else router.push("/profile");
-        })
-        .catch(() => setLoading(false));
-    },
-    [fetchCurrentUserSettings, router, next_url]
-  );
-
-  const mutateUserInfo = useCallback(async () => {
-    await fetchCurrentUser().then(async (user) => {
-      await handleSignInRedirection(user);
-    });
-  }, [fetchCurrentUser, handleSignInRedirection]);
 
   useEffect(() => {
-    mutateUserInfo();
+    handleRedirection();
-  }, [mutateUserInfo]);
+  }, [handleRedirection]);
+
+  if (isRedirecting || currentUser)
+    return (
+      <div className="grid place-items-center h-screen">
+        <Spinner />
+      </div>
+    );
 
   return (
-    <>
+    <div className="bg-onboarding-gradient-100 h-full w-full">
-      {isLoading ? (
+      <div className="flex items-center justify-between sm:py-5 px-8 pb-4 sm:px-16 lg:px-28 ">
-        <div className="grid place-items-center h-screen">
+        <div className="flex gap-x-2 py-10 items-center">
-          <Spinner />
+          <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+          <span className="font-semibold text-2xl sm:text-3xl">Plane</span>
         </div>
-      ) : (
+      </div>
-        <div className={`bg-onboarding-gradient-100 h-full w-full`}>
+
-          <div className="flex items-center justify-between sm:py-5 px-8 pb-4 sm:px-16 lg:px-28 ">
+      <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
-            <div className="flex gap-x-2 py-10 items-center">
+        <div className="px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
-              <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
+          {!envConfig ? (
-              <span className="font-semibold text-2xl sm:text-3xl">Plane</span>
+            <div className="pt-10 mx-auto flex justify-center">
+              <div>
+                <Loader className="space-y-4 w-full pb-4 mx-auto">
+                  <Loader.Item height="46px" width="360px" />
+                  <Loader.Item height="46px" width="360px" />
+                </Loader>
+
+                <Loader className="space-y-4 w-full pt-4 mx-auto">
+                  <Loader.Item height="46px" width="360px" />
+                  <Loader.Item height="46px" width="360px" />
+                </Loader>
+              </div>
             </div>
-          </div>
+          ) : (
+            <>
+              <SignInRoot />
 
-          <div className="h-full bg-onboarding-gradient-100 md:w-2/3 sm:w-4/5 px-4 pt-4 rounded-t-md mx-auto shadow-sm border-x border-t border-custom-border-200 ">
+              <div className="flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16">
-            <div className="px-7 sm:px-0 bg-onboarding-gradient-200 h-full pt-24 pb-56 rounded-t-md overflow-auto">
+                <Lightbulb className="h-7 w-7 mr-2 mx-3" />
-              {!envConfig ? (
+                <p className="text-sm text-left text-onboarding-text-100">
-                <div className="pt-10 mx-auto flex justify-center">
+                  Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
-                  <div>
+                  <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
-                    <Loader className="space-y-4 w-full pb-4 mx-auto">
+                    <span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
-                      <Loader.Item height="46px" width="360px" />
+                  </Link>
-                      <Loader.Item height="46px" width="360px" />
+                </p>
-                    </Loader>
+              </div>
-
+              <div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
-                    <Loader className="space-y-4 w-full pt-4 mx-auto">
+                <div className="h-[90%]">
-                      <Loader.Item height="46px" width="360px" />
+                  <Image
-                      <Loader.Item height="46px" width="360px" />
+                    src={latestFeatures}
-                    </Loader>
+                    alt="Plane Issues"
-                  </div>
+                    className={`rounded-md h-full ml-8 -mt-2 ${
+                      resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
+                    } `}
+                  />
                 </div>
-              ) : (
+              </div>
-                <>
+            </>
-                  <SignInRoot handleSignInRedirection={mutateUserInfo} />
+          )}
-
-                  <div className="flex py-2 bg-onboarding-background-100 border border-onboarding-border-200 mx-auto rounded-[3.5px] sm:w-96 mt-16">
-                    <Lightbulb className="h-7 w-7 mr-2 mx-3" />
-                    <p className="text-sm text-left text-onboarding-text-100">
-                      Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
-                      <Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
-                        <span className="font-medium text-sm underline hover:cursor-pointer">Learn more</span>
-                      </Link>
-                    </p>
-                  </div>
-                  <div className="border border-onboarding-border-200 sm:w-96 sm:h-52 object-cover mt-8 mx-auto rounded-md bg-onboarding-background-100 overflow-hidden">
-                    <div className="h-[90%]">
-                      <Image
-                        src={latestFeatures}
-                        alt="Plane Issues"
-                        className={`rounded-md h-full ml-8 -mt-2 ${
-                          resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
-                        } `}
-                      />
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
         </div>
-      )}
+      </div>
-    </>
+    </div>
   );
 });

web/hooks/use-sign-in-redirection.ts

@@ -0,0 +1,74 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// types
+import { IUser, IUserSettings } from "types";
+
+type UseSignInRedirectionProps = {
+  error: any | null;
+  isRedirecting: boolean;
+  handleRedirection: () => Promise<void>;
+};
+
+const useSignInRedirection = (): UseSignInRedirectionProps => {
+  // states
+  const [isRedirecting, setIsRedirecting] = useState(true);
+  const [error, setError] = useState<any | null>(null);
+  // router
+  const router = useRouter();
+  const { next_url } = router.query;
+  // mobx store
+  const {
+    user: { fetchCurrentUser, fetchCurrentUserSettings },
+  } = useMobxStore();
+
+  const handleSignInRedirection = useCallback(
+    async (user: IUser) => {
+      // if the user is not onboarded, redirect them to the onboarding page
+      if (!user.is_onboarded) {
+        router.push("/onboarding");
+        return;
+      }
+      // if next_url is provided, redirect the user to that url
+      if (next_url) {
+        router.push(next_url.toString());
+        return;
+      }
+
+      // if the user is onboarded, fetch their last workspace details
+      await fetchCurrentUserSettings()
+        .then((userSettings: IUserSettings) => {
+          const workspaceSlug =
+            userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
+          if (workspaceSlug) router.push(`/${workspaceSlug}`);
+          else router.push("/profile");
+        })
+        .catch((err) => setError(err));
+    },
+    [fetchCurrentUserSettings, router, next_url]
+  );
+
+  const updateUserInfo = useCallback(async () => {
+    setIsRedirecting(true);
+
+    await fetchCurrentUser()
+      .then(async (user) => {
+        await handleSignInRedirection(user)
+          .catch((err) => setError(err))
+          .finally(() => setIsRedirecting(false));
+      })
+      .catch((err) => {
+        setError(err);
+        setIsRedirecting(false);
+      });
+  }, [fetchCurrentUser, handleSignInRedirection]);
+
+  return {
+    error,
+    isRedirecting,
+    handleRedirection: updateUserInfo,
+  };
+};
+
+export default useSignInRedirection;

web/pages/accounts/password.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useCallback } from "react";
+import { ReactElement } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -9,6 +9,7 @@ import { Controller, useForm } from "react-hook-form";
 import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
+import useSignInRedirection from "hooks/use-sign-in-redirection";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
@@ -20,9 +21,6 @@ import latestFeatures from "public/onboarding/onboarding-pages.svg";
 import { checkEmailValidity } from "helpers/string.helper";
 // type
 import { NextPageWithLayout } from "types/app";
-import { useMobxStore } from "lib/mobx/store-provider";
-// types
-import { IUser, IUserSettings } from "types";
 
 type TResetPasswordFormValues = {
   email: string;
@@ -45,10 +43,8 @@ const HomePage: NextPageWithLayout = () => {
   const { resolvedTheme } = useTheme();
   // toast
   const { setToastAlert } = useToast();
-  // mobx store
+  // sign in redirection hook
-  const {
+  const { handleRedirection } = useSignInRedirection();
-    user: { fetchCurrentUser, fetchCurrentUserSettings },
-  } = useMobxStore();
   // form info
   const {
     control,
@@ -61,31 +57,6 @@ const HomePage: NextPageWithLayout = () => {
     },
   });
 
-  const handleSignInRedirection = useCallback(
-    async (user: IUser) => {
-      // if the user is not onboarded, redirect them to the onboarding page
-      if (!user.is_onboarded) {
-        router.push("/onboarding");
-        return;
-      }
-
-      // if the user is onboarded, fetch their last workspace details
-      await fetchCurrentUserSettings().then((userSettings: IUserSettings) => {
-        const workspaceSlug =
-          userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
-        if (workspaceSlug) router.push(`/${workspaceSlug}`);
-        else router.push("/profile");
-      });
-    },
-    [fetchCurrentUserSettings, router]
-  );
-
-  const mutateUserInfo = useCallback(async () => {
-    await fetchCurrentUser().then(async (user) => {
-      await handleSignInRedirection(user);
-    });
-  }, [fetchCurrentUser, handleSignInRedirection]);
-
   const handleResetPassword = async (formData: TResetPasswordFormValues) => {
     if (!uidb64 || !token || !email) return;
 
@@ -95,7 +66,7 @@ const HomePage: NextPageWithLayout = () => {
 
     await authService
       .resetPassword(uidb64.toString(), token.toString(), payload)
-      .then(() => mutateUserInfo())
+      .then(() => handleRedirection())
       .catch((err) =>
         setToastAlert({
           type: "error",