TEMP

Expensify · Dec 23, 2024 · 690c81f · 690c81f
1 parent 15033ca
commit 690c81f
Show file tree

Hide file tree

Showing 10 changed files with 90 additions and 79 deletions.
diff --git a/src/components/AnimatedStep/AnimatedStepContext.ts b/src/components/AnimatedStep/AnimatedStepContext.ts
@@ -9,7 +9,7 @@ type StepContext = {
     currentStep: string;
     previousStep: string | null;
     setStep: (newStep: string, direction: AnimationDirection) => void;
-    renderStep: (stepName: string) => React.ReactNode;
+    renderStep: () => React.ReactNode;
     currentScreenAnimatedStyle: StyleProp<ViewStyle>;
     previousScreenAnimatedStyle: StyleProp<ViewStyle>;
 };

diff --git a/src/components/AnimatedStep/AnimatedStepProvider.tsx b/src/components/AnimatedStep/AnimatedStepProvider.tsx
@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import React, {useCallback, useMemo, useState} from 'react';
 import {Easing, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -12,10 +13,10 @@ const ANIMATED_SCREEN_TRANSITION = 400;
 
 type AnimatedStepProviderProps = ChildrenProps & {
     initialStep: string;
-    renderStep: (name: string) => React.ReactNode;
+    steps: Record<string, ReactNode>;
 };
 
-function AnimatedStepProvider({children, renderStep, initialStep}: AnimatedStepProviderProps): React.ReactNode {
+function AnimatedStepProvider({children, steps, initialStep}: AnimatedStepProviderProps): React.ReactNode {
     const [animationDirection, setAnimationDirection] = useState<AnimationDirection>(CONST.ANIMATION_DIRECTION.IN);
     const [currentStep, setCurrentStep] = useState<string>(initialStep);
     const [previousStep, setPreviousStep] = useState<string | null>(null);
@@ -30,21 +31,30 @@ function AnimatedStepProvider({children, renderStep, initialStep}: AnimatedStepP
 
     const setStep = useCallback(
         (newStep: string, direction: AnimationDirection) => {
+            console.log(`%%% currentStep`, currentStep);
+            console.log(`%%% newStep`, newStep);
+            console.log(`%%% currentStep === newStep`, currentStep === newStep);
+
+            if (currentStep === newStep || !!previousStep) {
+                return;
+            }
+
             setAnimationDirection(direction);
             setPreviousStep(currentStep);
             setCurrentStep(newStep);
 
-            const sideBarWidth = isSmallScreenWidth ? windowWidth : variables.sideBarWidth;
-            const currentStepPosition = direction === 'in' ? sideBarWidth : -CONST.ANIMATED_TRANSITION_FROM_VALUE;
-            const previousStepPosition = direction === 'in' ? -CONST.ANIMATED_TRANSITION_FROM_VALUE : sideBarWidth;
-
-            currentTranslateX.set(currentStepPosition);
-            currentTranslateX.set(withTiming(0, {duration: ANIMATED_SCREEN_TRANSITION, easing: Easing.inOut(Easing.cubic)}, () => setPreviousStep(null)));
+            setTimeout(() => {
+                const sideBarWidth = isSmallScreenWidth ? windowWidth : variables.sideBarWidth;
+                const currentStepPosition = direction === 'in' ? sideBarWidth : -CONST.ANIMATED_TRANSITION_FROM_VALUE;
+                const previousStepPosition = direction === 'in' ? -CONST.ANIMATED_TRANSITION_FROM_VALUE : sideBarWidth;
+                currentTranslateX.set(currentStepPosition);
+                currentTranslateX.set(withTiming(0, {duration: ANIMATED_SCREEN_TRANSITION, easing: Easing.inOut(Easing.cubic)}, () => setPreviousStep(null)));
 
-            prevTranslateX.set(0);
-            prevTranslateX.set(withTiming(previousStepPosition, {duration: ANIMATED_SCREEN_TRANSITION, easing: Easing.inOut(Easing.cubic)}));
+                prevTranslateX.set(0);
+                prevTranslateX.set(withTiming(previousStepPosition, {duration: ANIMATED_SCREEN_TRANSITION, easing: Easing.inOut(Easing.cubic)}));
+            }, 1000);
         },
-        [currentStep, currentTranslateX, prevTranslateX, isSmallScreenWidth, windowWidth],
+        [currentStep, previousStep, isSmallScreenWidth, windowWidth, currentTranslateX, prevTranslateX],
     );
 
     const currentScreenAnimatedStyle = useAnimatedStyle(() => ({
@@ -63,9 +73,16 @@ function AnimatedStepProvider({children, renderStep, initialStep}: AnimatedStepP
             setStep,
             currentScreenAnimatedStyle,
             previousScreenAnimatedStyle,
-            renderStep,
+            renderStep: () => {
+                return (
+                    <>
+                        {steps[currentStep]}
+                        {previousStep && steps[previousStep]}
+                    </>
+                );
+            },
         }),
-        [currentStep, previousStep, setStep, currentScreenAnimatedStyle, previousScreenAnimatedStyle, renderStep],
+        [currentStep, previousStep, setStep, currentScreenAnimatedStyle, previousScreenAnimatedStyle, steps],
     );
 
     return <AnimatedStepContext.Provider value={contextValue}>{children}</AnimatedStepContext.Provider>;

diff --git a/src/components/AnimatedStep/index.tsx b/src/components/AnimatedStep/index.tsx
@@ -40,10 +40,16 @@ function AnimatedStep({stepName, title = '', stepCounter, onBackButtonPress, chi
         onEntryTransitionEnd?.();
     }, [onEntryTransitionEnd, previousStep]);
 
+    console.log(`%%% currentScreenAnimatedStyle`, currentScreenAnimatedStyle);
+    console.log(`%%% previousScreenAnimatedStyle`, previousScreenAnimatedStyle);
+
     return (
         <Animated.View
-            style={[styles.animatedStep, stepName === previousStep ? previousScreenAnimatedStyle : currentScreenAnimatedStyle]}
-            key={stepName}
+            style={[
+                styles.animatedStep,
+                stepName === previousStep ? previousScreenAnimatedStyle : currentScreenAnimatedStyle,
+                // stepName === previousStep ? {backgroundColor: 'red', opacity: 0.8} : {backgroundColor: 'blue', opacity: 0.8},
+            ]}
         >
             <ScreenWrapper
                 shouldShowOfflineIndicator={false}

diff --git a/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx b/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx
@@ -48,7 +48,7 @@ import type {Participant} from '@src/types/onyx/IOU';
 
 type MoneyRequestParticipantsSelectorProps = {
     /** Callback to request parent modal to go to next step, which should be split */
-    onFinish: (value?: string) => void;
+    onFinish?: (value?: string) => void;
 
     /** Callback to add participants in MoneyRequestModal */
     onParticipantsAdded: (value: Participant[]) => void;

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/GetCode.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/GetCode.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import AnimatedStep from '@components/AnimatedStep';
@@ -23,6 +23,16 @@ function GetCode() {
 
     const {setStep} = useTwoFactorAuthContext();
 
+    useEffect(() => {
+        console.log('CONST.TWO_FACTOR_AUTH_STEPS.DISABLED 1');
+        if (account?.requiresTwoFactorAuth) {
+            return;
+        }
+
+        console.log('CONST.TWO_FACTOR_AUTH_STEPS.DISABLED 2');
+        setStep(CONST.TWO_FACTOR_AUTH_STEPS.DISABLED);
+    }, [account?.requiresTwoFactorAuth, setStep]);
+
     return (
         <AnimatedStep
             stepName={CONST.TWO_FACTOR_AUTH_STEPS.GETCODE}

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/SuccessStep.tsx
@@ -38,14 +38,7 @@ function SuccessStep({backTo, forwardTo}: SuccessStepParams) {
                 shouldShowButton
                 buttonText={translate('common.buttonConfirm')}
                 onButtonPress={() => {
-                    TwoFactorAuthActions.clearTwoFactorAuthData();
-                    setStep(CONST.TWO_FACTOR_AUTH_STEPS.ENABLED);
-                    if (backTo) {
-                        Navigation.navigate(backTo);
-                    }
-                    if (forwardTo) {
-                        Link.openLink(forwardTo, environmentURL);
-                    }
+                    setStep(CONST.TWO_FACTOR_AUTH_STEPS.VERIFY, 'out');
                 }}
             />
         </AnimatedStep>

diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import expensifyLogo from '@assets/images/expensify-logo-round-transparent.png';
@@ -30,7 +30,7 @@ function VerifyStep() {
     const contactMethod = UserUtils.getContactMethod();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
     const formRef = useRef<BaseTwoFactorAuthFormRef>(null);
-
+    const [x, setX] = useState(true);
     const {setStep} = useTwoFactorAuthContext();
 
     useEffect(() => {
@@ -41,11 +41,14 @@ function VerifyStep() {
     }, []);
 
     useEffect(() => {
-        if (!account?.requiresTwoFactorAuth) {
+        if (x) {
             return;
         }
         setStep(CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS);
-    }, [account?.requiresTwoFactorAuth, setStep]);
+        setStep(CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS);
+    }, [x, setStep]);
+
+    console.log(`%%% rerender VerifyStep`);
 
     /**
      * Splits the two-factor auth secret key in 4 chunks
@@ -121,13 +124,10 @@ function VerifyStep() {
                 <Button
                     success
                     large
-                    text={translate('common.next')}
+                    text="lol"
                     isLoading={account?.isLoading}
                     onPress={() => {
-                        if (!formRef.current) {
-                            return;
-                        }
-                        formRef.current.validateAndSubmitForm();
+                        setX(false);
                     }}
                 />
             </FixedFooter>
@@ -136,5 +136,5 @@ function VerifyStep() {
 }
 
 VerifyStep.displayName = 'VerifyStep';
-
+VerifyStep.whyDidYouRender = true;
 export default VerifyStep;
diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthForm/BaseTwoFactorAuthForm.tsx
@@ -1,14 +1,12 @@
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
+import React, {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import type {AutoCompleteVariant, MagicCodeInputHandle} from '@components/MagicCodeInput';
 import MagicCodeInput from '@components/MagicCodeInput';
 import useLocalize from '@hooks/useLocalize';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import useTwoFactorAuthContext from '@pages/settings/Security/TwoFactorAuth/TwoFactorAuthContext/useTwoFactorAuth';
 import * as Session from '@userActions/Session';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {BaseTwoFactorAuthFormRef} from './types';
 
@@ -27,7 +25,6 @@ function BaseTwoFactorAuthForm({autoComplete, validateInsteadOfDisable}: BaseTwo
     const [twoFactorAuthCode, setTwoFactorAuthCode] = useState('');
     const inputRef = useRef<MagicCodeInputHandle | null>(null);
     const shouldClearData = account?.needsTwoFactorAuthSetup ?? false;
-    const {setStep} = useTwoFactorAuthContext();
 
     /**
      * Handle text input and clear formError upon text change
@@ -44,13 +41,6 @@ function BaseTwoFactorAuthForm({autoComplete, validateInsteadOfDisable}: BaseTwo
         [account?.errors],
     );
 
-    useEffect(() => {
-        if (!account || account?.requiresTwoFactorAuth) {
-            return;
-        }
-
-        setStep(CONST.TWO_FACTOR_AUTH_STEPS.DISABLED);
-    }, [account, setStep]);
     /**
      * Check that all the form fields are valid, then trigger the submit callback
      */

diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthPage.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import type {ReactNode} from 'react';
+import React, {useMemo} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import AnimatedStepProvider from '@components/AnimatedStep/AnimatedStepProvider';
 import DelegateNoAccessWrapper from '@components/DelegateNoAccessWrapper';
@@ -26,29 +27,28 @@ function TwoFactorAuthPage({route}: TwoFactorAuthPageProps) {
     const backTo = route.params?.backTo ?? '';
     const forwardTo = route.params?.forwardTo ?? '';
 
-    const renderStep = (name: string) => {
-        switch (name) {
-            case CONST.TWO_FACTOR_AUTH_STEPS.CODES:
-                return <CodesStep backTo={backTo} />;
-            case CONST.TWO_FACTOR_AUTH_STEPS.VERIFY:
-                return <VerifyStep />;
-            case CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS:
-                return (
-                    <SuccessStep
-                        backTo={backTo}
-                        forwardTo={forwardTo}
-                    />
-                );
-            case CONST.TWO_FACTOR_AUTH_STEPS.ENABLED:
-                return <EnabledStep />;
-            case CONST.TWO_FACTOR_AUTH_STEPS.DISABLED:
-                return <DisabledStep />;
-            case CONST.TWO_FACTOR_AUTH_STEPS.GETCODE:
-                return <GetCodeStep />;
-            default:
-                return <CodesStep backTo={backTo} />;
-        }
-    };
+    const steps: Record<string, ReactNode> = useMemo(
+        () => ({
+            [CONST.TWO_FACTOR_AUTH_STEPS.CODES]: (
+                <CodesStep
+                    backTo={backTo}
+                    key={CONST.TWO_FACTOR_AUTH_STEPS.CODES}
+                />
+            ),
+            [CONST.TWO_FACTOR_AUTH_STEPS.VERIFY]: <VerifyStep key={CONST.TWO_FACTOR_AUTH_STEPS.VERIFY} />,
+            [CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS]: (
+                <SuccessStep
+                    backTo={backTo}
+                    forwardTo={forwardTo}
+                    key={CONST.TWO_FACTOR_AUTH_STEPS.SUCCESS}
+                />
+            ),
+            [CONST.TWO_FACTOR_AUTH_STEPS.ENABLED]: <EnabledStep key={CONST.TWO_FACTOR_AUTH_STEPS.ENABLED} />,
+            [CONST.TWO_FACTOR_AUTH_STEPS.DISABLED]: <DisabledStep key={CONST.TWO_FACTOR_AUTH_STEPS.DISABLED} />,
+            [CONST.TWO_FACTOR_AUTH_STEPS.GETCODE]: <GetCodeStep key={CONST.TWO_FACTOR_AUTH_STEPS.GETCODE} />,
+        }),
+        [backTo, forwardTo],
+    );
 
     if (isActingAsDelegate) {
         return (
@@ -65,7 +65,7 @@ function TwoFactorAuthPage({route}: TwoFactorAuthPageProps) {
     return (
         <AnimatedStepProvider
             initialStep={initialStep}
-            renderStep={renderStep}
+            steps={steps}
         >
             <TwoFactorAuthSteps />
         </AnimatedStepProvider>

diff --git a/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx b/src/pages/settings/Security/TwoFactorAuth/TwoFactorAuthSteps.tsx
@@ -7,7 +7,7 @@ import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
 import TwoFactorAuthContext from './TwoFactorAuthContext';
 
 function TwoFactorAuthSteps() {
-    const {currentStep, previousStep, renderStep, setStep} = useAnimatedStepContext();
+    const {renderStep, setStep} = useAnimatedStepContext();
 
     useEffect(() => () => TwoFactorAuthActions.clearTwoFactorAuthData(), []);
 
@@ -20,12 +20,7 @@ function TwoFactorAuthSteps() {
         [setStep],
     );
 
-    return (
-        <TwoFactorAuthContext.Provider value={contextValue}>
-            {renderStep(currentStep)}
-            {previousStep && renderStep(previousStep)}
-        </TwoFactorAuthContext.Provider>
-    );
+    return <TwoFactorAuthContext.Provider value={contextValue}>{renderStep()}</TwoFactorAuthContext.Provider>;
 }
 
 export default TwoFactorAuthSteps;