refactor(account-center): use global loading layer (#8002)

Author: wangsijie

packages/account-center/src/App.tsx

@@ -4,6 +4,7 @@ import { useContext, useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import AppBoundary from '@ac/Providers/AppBoundary';
+import LoadingContextProvider from '@ac/Providers/LoadingContextProvider';
 
 import styles from './App.module.scss';
 import Callback from './Callback';
@@ -79,20 +80,22 @@ const App = () => (
         scopes: [UserScope.Profile, UserScope.Email, UserScope.Phone, UserScope.Identities],
       }}
     >
-      <PageContextProvider>
-        <AppBoundary>
-          <div className={styles.app}>
-            <BrandingHeader />
-            <div className={styles.layout}>
-              <div className={styles.container}>
-                <main className={styles.main}>
-                  <Main />
-                </main>
+      <LoadingContextProvider>
+        <PageContextProvider>
+          <AppBoundary>
+            <div className={styles.app}>
+              <BrandingHeader />
+              <div className={styles.layout}>
+                <div className={styles.container}>
+                  <main className={styles.main}>
+                    <Main />
+                  </main>
+                </div>
               </div>
             </div>
-          </div>
-        </AppBoundary>
-      </PageContextProvider>
+          </AppBoundary>
+        </PageContextProvider>
+      </LoadingContextProvider>
     </LogtoProvider>
   </BrowserRouter>
 );

packages/account-center/src/Providers/LoadingContextProvider/LoadingContext.tsx

@@ -0,0 +1,14 @@
+import { noop } from '@silverhand/essentials';
+import { createContext } from 'react';
+
+export type LoadingContextValue = {
+  loading: boolean;
+  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const LoadingContext = createContext<LoadingContextValue>({
+  loading: false,
+  setLoading: noop,
+});
+
+export default LoadingContext;

packages/account-center/src/Providers/LoadingContextProvider/index.tsx

@@ -0,0 +1,30 @@
+import { useMemo, useState, type ReactNode } from 'react';
+
+import Loading from '@ac/components/Loading';
+
+import LoadingContext from './LoadingContext';
+
+type Props = {
+  readonly children: ReactNode;
+};
+
+const LoadingContextProvider = ({ children }: Props) => {
+  const [loading, setLoading] = useState(false);
+
+  const value = useMemo(
+    () => ({
+      loading,
+      setLoading,
+    }),
+    [loading]
+  );
+
+  return (
+    <LoadingContext.Provider value={value}>
+      {children}
+      {loading && <Loading />}
+    </LoadingContext.Provider>
+  );
+};
+
+export default LoadingContextProvider;

packages/account-center/src/components/CodeVerification/index.tsx

@@ -10,7 +10,9 @@ import type { TFuncKey } from 'i18next';
 import { useCallback, useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import LoadingContext from '@ac/Providers/LoadingContextProvider/LoadingContext';
 import PageContext from '@ac/Providers/PageContextProvider/PageContext';
+import useApi from '@ac/hooks/use-api';
 import SecondaryPageLayout from '@ac/layouts/SecondaryPageLayout';
 
 import styles from './index.module.scss';
@@ -59,10 +61,11 @@ const CodeVerification = ({
   const { t } = useTranslation();
   const { getAccessToken } = useLogto();
   const { setToast, setVerificationId } = useContext(PageContext);
+  const { loading } = useContext(LoadingContext);
+  const sendCodeRequest = useApi(sendCode);
+  const verifyCodeRequest = useApi(verifyCode);
   const [codeInput, setCodeInput] = useState<string[]>([]);
   const [errorMessage, setErrorMessage] = useState<string>();
-  const [isSending, setIsSending] = useState(false);
-  const [isVerifying, setIsVerifying] = useState(false);
   const [countdown, setCountdown] = useState(0);
   const [pendingVerificationRecord, setPendingVerificationRecord] = useState<{
     recordId: string;
@@ -96,7 +99,7 @@ const CodeVerification = ({
   }, [countdown]);
 
   const handleSendCode = useCallback(async () => {
-    if (!identifier || isSending) {
+    if (!identifier || loading) {
       return;
     }
 
@@ -106,33 +109,30 @@ const CodeVerification = ({
       return;
     }
 
-    setIsSending(true);
+    const [error, result] = await sendCodeRequest(accessToken, identifier);
 
-    try {
-      const result = await sendCode(accessToken, identifier);
-
-      setPendingVerificationRecord({
-        recordId: result.verificationRecordId,
-        expiresAt: result.expiresAt,
-      });
-      setCodeInput([]);
-      setErrorMessage(undefined);
-      setHasSentCode(true);
-      startCountdown();
-    } catch {
+    if (error || !result) {
       setToast(t('account_center.email_verification.error_send_failed'));
-    } finally {
-      setIsSending(false);
+      return;
     }
-  }, [getAccessToken, identifier, isSending, sendCode, setToast, startCountdown, t]);
+
+    setPendingVerificationRecord({
+      recordId: result.verificationRecordId,
+      expiresAt: result.expiresAt,
+    });
+    setCodeInput([]);
+    setErrorMessage(undefined);
+    setHasSentCode(true);
+    startCountdown();
+  }, [getAccessToken, identifier, loading, sendCodeRequest, setToast, startCountdown, t]);
 
   const handleVerify = useCallback(
     async (code: string[]) => {
       if (
         !identifier ||
         !pendingVerificationRecord?.recordId ||
         !pendingVerificationRecord.expiresAt ||
-        isVerifying ||
+        loading ||
         !isCodeReady(code)
       ) {
         return;
@@ -146,32 +146,29 @@ const CodeVerification = ({
         return;
       }
 
-      setIsVerifying(true);
-
-      try {
-        await verifyCode(accessToken, {
-          verificationRecordId: recordId,
-          code: code.join(''),
-          identifier,
-        });
+      const [error] = await verifyCodeRequest(accessToken, {
+        verificationRecordId: recordId,
+        code: code.join(''),
+        identifier,
+      });
 
-        setVerificationId(recordId, expiresAt);
-        setPendingVerificationRecord(undefined);
-      } catch {
+      if (error) {
         setCodeInput([]);
         setErrorMessage(t('account_center.email_verification.error_verify_failed'));
-      } finally {
-        setIsVerifying(false);
+        return;
       }
+
+      setVerificationId(recordId, expiresAt);
+      setPendingVerificationRecord(undefined);
     },
     [
       getAccessToken,
       identifier,
-      isVerifying,
+      loading,
       pendingVerificationRecord,
       setVerificationId,
       t,
-      verifyCode,
+      verifyCodeRequest,
     ]
   );
 
@@ -225,7 +222,7 @@ const CodeVerification = ({
               <button
                 className={styles.resendButton}
                 type="button"
-                disabled={isSending}
+                disabled={loading}
                 onClick={() => {
                   void handleSendCode();
                 }}
@@ -238,7 +235,7 @@ const CodeVerification = ({
             title="action.confirm"
             type="primary"
             className={styles.submit}
-            isLoading={isVerifying}
+            isLoading={loading}
             onClick={() => {
               if (!isCodeReady(codeInput)) {
                 setErrorMessage(t('error.invalid_passcode'));
@@ -263,7 +260,8 @@ const CodeVerification = ({
             title="account_center.email_verification.send"
             type="primary"
             className={styles.prepareAction}
-            isLoading={isSending}
+            disabled={loading}
+            isLoading={loading}
             onClick={() => {
               void handleSendCode();
             }}

packages/account-center/src/components/Loading/index.tsx

@@ -0,0 +1,5 @@
+import LoadingLayer from '@experience/shared/components/LoadingLayer';
+
+const Loading = () => <LoadingLayer />;
+
+export default Loading;

packages/account-center/src/components/PasswordVerification/index.tsx

@@ -4,8 +4,10 @@ import { useLogto } from '@logto/react';
 import { useState, useContext, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import LoadingContext from '@ac/Providers/LoadingContextProvider/LoadingContext';
 import PageContext from '@ac/Providers/PageContextProvider/PageContext';
 import { verifyPassword } from '@ac/apis/verification';
+import useApi from '@ac/hooks/use-api';
 import SecondaryPageLayout from '@ac/layouts/SecondaryPageLayout';
 
 import styles from './index.module.scss';
@@ -18,32 +20,32 @@ const PasswordVerification = ({ onBack }: Props) => {
   const { t } = useTranslation();
   const { setVerificationId, setToast } = useContext(PageContext);
   const { getAccessToken } = useLogto();
+  const { loading } = useContext(LoadingContext);
   const [password, setPassword] = useState('');
-  const [loading, setLoading] = useState(false);
+  const asyncVerifyPassword = useApi(verifyPassword);
 
   const handleVerify = async (event?: FormEvent<HTMLFormElement>) => {
     event?.preventDefault();
 
-    if (!password) {
+    if (!password || loading) {
       return;
     }
 
-    setLoading(true);
-    try {
-      const accessToken = await getAccessToken();
+    const accessToken = await getAccessToken();
 
-      if (!accessToken) {
-        throw new Error('Missing access token');
-      }
+    if (!accessToken) {
+      setToast(t('account_center.password_verification.error_failed'));
+      return;
+    }
+
+    const [error, result] = await asyncVerifyPassword(accessToken, password);
 
-      const result = await verifyPassword(accessToken, password);
-      setVerificationId(result.verificationRecordId, result.expiresAt);
-    } catch {
-      const errorMessage = t('account_center.password_verification.error_failed');
-      setToast(errorMessage);
-    } finally {
-      setLoading(false);
+    if (error || !result) {
+      setToast(t('account_center.password_verification.error_failed'));
+      return;
     }
+
+    setVerificationId(result.verificationRecordId, result.expiresAt);
   };
 
   return (
@@ -67,7 +69,7 @@ const PasswordVerification = ({ onBack }: Props) => {
           className={styles.submit}
           htmlType="submit"
           title="action.confirm"
-          disabled={!password}
+          disabled={!password || loading}
           isLoading={loading}
         />
       </form>

packages/account-center/src/hooks/use-api.ts

@@ -0,0 +1,39 @@
+import type { Nullable } from '@silverhand/essentials';
+import { useCallback, useContext } from 'react';
+
+import LoadingContext from '@ac/Providers/LoadingContextProvider/LoadingContext';
+
+type Options = {
+  silent?: boolean;
+};
+
+const useApi = <Args extends unknown[], Response>(
+  api: (...args: Args) => Promise<Response>,
+  options?: Options
+) => {
+  const { setLoading } = useContext(LoadingContext);
+
+  const request = useCallback(
+    async (...args: Args): Promise<[Nullable<unknown>, Response?]> => {
+      if (!options?.silent) {
+        setLoading(true);
+      }
+
+      try {
+        const result = await api(...args);
+        return [null, result];
+      } catch (error: unknown) {
+        return [error];
+      } finally {
+        if (!options?.silent) {
+          setLoading(false);
+        }
+      }
+    },
+    [api, options?.silent, setLoading]
+  );
+
+  return request;
+};
+
+export default useApi;

packages/experience/src/Providers/LoadingLayerProvider/index.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
-import LoadingMask from '@/components/LoadingMask';
+import { LoadingMask } from '@/shared/components/LoadingLayer';
 
 const LoadingLayerProvider = () => {
   const { loading } = useContext(PageContext);

packages/experience/src/containers/SocialLanding/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 
-import { LoadingIcon } from '@/components/LoadingLayer';
 import useConnectors from '@/hooks/use-connectors';
+import { LoadingIcon } from '@/shared/components/LoadingLayer';
 
 import styles from './index.module.scss';
 

packages/experience/src/pages/DirectSignIn/index.tsx

@@ -3,11 +3,11 @@ import { useContext, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import PageContext from '@/Providers/PageContextProvider/PageContext';
-import { LoadingIconWithContainer } from '@/components/LoadingLayer';
 import useSocial from '@/containers/SocialSignInList/use-social';
 import useFallbackRoute from '@/hooks/use-fallback-route';
 import { useSieMethods } from '@/hooks/use-sie';
 import useSingleSignOn from '@/hooks/use-single-sign-on';
+import { LoadingIconWithContainer } from '@/shared/components/LoadingLayer';
 import { logtoGoogleOneTapCookie } from '@/utils/cookies';
 
 import styles from './index.module.scss';