Handle revalidation error in a single place (#199)

* Handle the 'revalidation_required' error in script.js * Streamline the flow of Modal rendering for DRYness * Clear error when navigating through navigateToScreen
WordPress · Jun 9, 2023 · 0f6c716 · 0f6c716
1 parent 07aecfa
commit 0f6c716
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/settings/src/components/backup-codes.js b/settings/src/components/backup-codes.js
@@ -46,10 +46,11 @@ function Setup( { setRegenerating } ) {
 	const {
 		setGlobalNotice,
 		user: { userRecord },
+		setError,
+		error,
 	} = useContext( GlobalContext );
 	const [ backupCodes, setBackupCodes ] = useState( [] );
 	const [ hasPrinted, setHasPrinted ] = useState( false );
-	const [ error, setError ] = useState( '' );
 
 	// Generate new backup codes and save them in usermeta.
 	useEffect( () => {

diff --git a/settings/src/script.js b/settings/src/script.js
@@ -61,6 +61,7 @@ function Main( { userId } ) {
 		hasPrimaryProvider,
 	} = user;
 	const [ globalNotice, setGlobalNotice ] = useState( '' );
+	const [ error, setError ] = useState( '' );
 
 	let currentUrl = new URL( document.location.href );
 	let initialScreen = currentUrl.searchParams.get( 'screen' );
@@ -131,6 +132,7 @@ function Main( { userId } ) {
 			currentUrl.searchParams.set( 'screen', nextScreen );
 			window.history.pushState( {}, '', currentUrl );
 
+			setError( '' );
 			setGlobalNotice( '' );
 			setScreen( nextScreen );
 		},
@@ -169,23 +171,22 @@ function Main( { userId } ) {
 				<CardBody className={ 'wporg-2fa__' + screen }>{ currentScreen }</CardBody>
 			</Card>
 		);
-	} else if (
+	}
+
+	const isRevalidationExpired =
 		twoFactorRequiredScreens.includes( screen ) &&
 		hasPrimaryProvider &&
-		record[ '2fa_revalidation' ]?.expires_at <= new Date().getTime() / 1000
-	) {
-		screenContent = (
-			<>
-				{ currentScreen }
-				<RevalidateModal />
-			</>
-		);
-	}
+		record[ '2fa_revalidation' ]?.expires_at <= new Date().getTime() / 1000;
+
+	const shouldRevalidate = 'revalidation_required' === error.code || isRevalidationExpired;
 
 	return (
-		<GlobalContext.Provider value={ { navigateToScreen, user, setGlobalNotice } }>
+		<GlobalContext.Provider
+			value={ { navigateToScreen, user, setGlobalNotice, setError, error } }
+		>
 			<GlobalNotice notice={ globalNotice } setNotice={ setGlobalNotice } />
 			{ screenContent }
+			{ shouldRevalidate && <RevalidateModal /> }
 		</GlobalContext.Provider>
 	);
 }