chore: Move helpers; More-generic typing

Author: tmilewski

packages/ui/src/components/SignIn/useSecondFactorSelection.ts

@@ -1,12 +1,23 @@
 import type { SignInFactor } from '@clerk/shared/types';
 import React from 'react';
 
-import { determineStartingSignInSecondFactor, secondFactorKey } from './utils';
+import { determineStartingSignInSecondFactor } from './utils';
 
-export function useSecondFactorSelection(availableFactors: SignInFactor[] | null) {
+const secondFactorKey = (factor: SignInFactor | null | undefined) => {
+  if (!factor) {
+    return '';
+  }
+  let key = factor.strategy;
+  if ('phoneNumberId' in factor) {
+    key += factor.phoneNumberId;
+  }
+  return key;
+};
+
+export function useSecondFactorSelection<T extends SignInFactor = SignInFactor>(availableFactors: T[] | null) {
   const lastPreparedFactorKeyRef = React.useRef('');
-  const [currentFactor, setCurrentFactor] = React.useState<SignInFactor | null>(() =>
-    determineStartingSignInSecondFactor(availableFactors),
+  const [currentFactor, setCurrentFactor] = React.useState<T | null>(
+    () => determineStartingSignInSecondFactor(availableFactors) as T | null,
   );
 
   const [showAllStrategies, setShowAllStrategies] = React.useState<boolean>(!currentFactor);
@@ -16,7 +27,7 @@ export function useSecondFactorSelection(availableFactors: SignInFactor[] | null
     lastPreparedFactorKeyRef.current = secondFactorKey(currentFactor);
   };
 
-  const selectFactor = (factor: SignInFactor) => {
+  const selectFactor = (factor: T) => {
     setCurrentFactor(factor);
     setShowAllStrategies(false);
   };

packages/ui/src/components/SignIn/utils.ts

@@ -14,18 +14,6 @@ import type { FormControlState } from '@/ui/utils/useFormControl';
 import { PREFERRED_SIGN_IN_STRATEGIES } from '../../common/constants';
 import { otpPrefFactorComparator, passwordPrefFactorComparator } from '../../utils/factorSorting';
 
-// Specific to SignInSecondFactor, SignInClientTrust, & UserVerificationFactorTwo
-export const secondFactorKey = (factor: SignInFactor | null | undefined) => {
-  if (!factor) {
-    return '';
-  }
-  let key = factor.strategy;
-  if ('phoneNumberId' in factor) {
-    key += factor.phoneNumberId;
-  }
-  return key;
-};
-
 const factorForIdentifier = (i: string | null) => (f: SignInFactor) => {
   return 'safeIdentifier' in f && f.safeIdentifier === i;
 };

packages/ui/src/components/UserVerification/UserVerificationFactorTwo.tsx

@@ -5,7 +5,7 @@ import { withCardStateProvider } from '@/ui/elements/contexts';
 import { LoadingCard } from '@/ui/elements/LoadingCard';
 
 import { useRouter } from '../../router';
-import { determineStartingSignInSecondFactor, secondFactorKey } from '../SignIn/utils';
+import { useSecondFactorSelection } from '../SignIn/useSecondFactorSelection';
 import { secondFactorsAreEqual } from './useReverificationAlternativeStrategies';
 import { UserVerificationFactorTwoTOTP } from './UserVerificationFactorTwoTOTP';
 import { useUserVerificationSession, withUserVerificationSessionGuard } from './useUserVerificationSession';
@@ -33,27 +33,20 @@ export function UserVerificationFactorTwoComponent(): JSX.Element {
     );
   }, [sessionVerification.supportedSecondFactors]);
 
-  const lastPreparedFactorKeyRef = React.useRef('');
-  const [currentFactor, setCurrentFactor] = React.useState<SessionVerificationSecondFactor | null>(
-    () => determineStartingSignInSecondFactor(availableFactors) as SessionVerificationSecondFactor,
-  );
-  const [showAllStrategies, setShowAllStrategies] = React.useState<boolean>(!currentFactor);
-  const toggleAllStrategies = () => setShowAllStrategies(s => !s);
+  const {
+    currentFactor,
+    factorAlreadyPrepared,
+    handleFactorPrepare,
+    selectFactor,
+    showAllStrategies,
+    toggleAllStrategies,
+  } = useSecondFactorSelection<SessionVerificationSecondFactor>(availableFactors);
 
   const secondFactorsExcludingCurrent = useMemo(
     () => availableFactors?.filter(factor => !secondFactorsAreEqual(factor, currentFactor)),
     [availableFactors, currentFactor],
   );
 
-  const handleFactorPrepare = () => {
-    lastPreparedFactorKeyRef.current = secondFactorKey(currentFactor);
-  };
-
-  const selectFactor = (factor: SessionVerificationSecondFactor) => {
-    setCurrentFactor(factor);
-    toggleAllStrategies();
-  };
-
   const hasAlternativeStrategies = useMemo(
     () => (secondFactorsExcludingCurrent && secondFactorsExcludingCurrent.length > 0) || false,
     [secondFactorsExcludingCurrent],
@@ -84,7 +77,7 @@ export function UserVerificationFactorTwoComponent(): JSX.Element {
     case 'phone_code':
       return (
         <UVFactorTwoPhoneCodeCard
-          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === secondFactorKey(currentFactor)}
+          factorAlreadyPrepared={factorAlreadyPrepared}
           onFactorPrepare={handleFactorPrepare}
           factor={currentFactor}
           onShowAlternativeMethodsClicked={toggleAllStrategies}
@@ -94,7 +87,7 @@ export function UserVerificationFactorTwoComponent(): JSX.Element {
     case 'totp':
       return (
         <UserVerificationFactorTwoTOTP
-          factorAlreadyPrepared={lastPreparedFactorKeyRef.current === secondFactorKey(currentFactor)}
+          factorAlreadyPrepared={factorAlreadyPrepared}
           onFactorPrepare={handleFactorPrepare}
           factor={currentFactor}
           onShowAlternativeMethodsClicked={toggleAllStrategies}