From 7b175b210ed69e5dc89966a7c15b8e43d0ba9241 Mon Sep 17 00:00:00 2001 From: William Grant Date: Thu, 22 Feb 2024 16:49:01 +1100 Subject: [PATCH] feat: replace context with redux slice --- .../registration/RegistrationStages.tsx | 92 +++++-------------- .../registration/SessionRegistrationView.tsx | 6 +- .../registration/components/Hero.tsx | 2 +- .../registration/{ => stages}/SignInTab.tsx | 40 ++++---- .../registration/{ => stages}/SignUpTab.tsx | 56 ++++++----- ts/components/registration/stages/index.tsx | 4 + 6 files changed, 88 insertions(+), 112 deletions(-) rename ts/components/registration/{ => stages}/SignInTab.tsx (83%) rename ts/components/registration/{ => stages}/SignUpTab.tsx (70%) create mode 100644 ts/components/registration/stages/index.tsx diff --git a/ts/components/registration/RegistrationStages.tsx b/ts/components/registration/RegistrationStages.tsx index 01fc8caeb..3dee51144 100644 --- a/ts/components/registration/RegistrationStages.tsx +++ b/ts/components/registration/RegistrationStages.tsx @@ -1,5 +1,5 @@ -import { createContext, useEffect, useMemo, useState } from 'react'; -import { Provider } from 'react-redux'; +import { useDispatch } from 'react-redux'; +import { useMount } from 'react-use'; import styled from 'styled-components'; import { Data } from '../../data/data'; import { SettingsKey } from '../../data/settings-key'; @@ -10,7 +10,14 @@ import { PromiseUtils, StringUtils, ToastUtils } from '../../session/utils'; import { TaskTimedOutError } from '../../session/utils/Promise'; import { fromHex } from '../../session/utils/String'; import { trigger } from '../../shims/events'; -import { onboardingStore } from '../../state/onboarding/store'; +import { + setGeneratedRecoveryPhrase, + setHexGeneratedPubKey, +} from '../../state/onboarding/ducks/registration'; +import { + useRegGeneratedRecoveryPhrase, + useRegRegistrationPhase, +} from '../../state/onboarding/selectors/registration'; import { generateMnemonic, registerSingleDevice, @@ -20,8 +27,7 @@ import { import { Storage, setSignInByLinking, setSignWithRecoveryPhrase } from '../../util/storage'; import { Flex } from '../basic/Flex'; import { ModalContainer } from './ModalContainer'; -import { SignInMode, SignInTab } from './SignInTab'; -import { SignUpMode, SignUpTab } from './SignUpTab'; +import { SignInTab, SignUpTab } from './stages'; const StyledRegistrationContainer = styled(Flex)` width: 289px; @@ -171,34 +177,11 @@ export enum RegistrationPhase { SignUp, } -interface RegistrationPhaseContext { - registrationPhase: RegistrationPhase; - signUpMode: SignUpMode; - signInMode: SignInMode; - setRegistrationPhase: (phase: RegistrationPhase) => void; - setSignInMode: (phase: SignInMode) => void; - setSignUpMode: (phase: SignUpMode) => void; - generatedRecoveryPhrase: string; - hexGeneratedPubKey: string; -} - -export const RegistrationContext = createContext({ - registrationPhase: RegistrationPhase.Start, - signInMode: SignInMode.Default, - signUpMode: SignUpMode.Default, - setRegistrationPhase: () => undefined, - setSignUpMode: () => undefined, - setSignInMode: () => undefined, - generatedRecoveryPhrase: '', - hexGeneratedPubKey: '', -}); - export const RegistrationStages = () => { - const [generatedRecoveryPhrase, setGeneratedRecoveryPhrase] = useState(''); - const [hexGeneratedPubKey, setHexGeneratedPubKey] = useState(''); - const [registrationPhase, setRegistrationPhase] = useState(RegistrationPhase.Start); - const [signInMode, setSignInMode] = useState(SignInMode.Default); - const [signUpMode, setSignUpMode] = useState(SignUpMode.Default); + const generatedRecoveryPhrase = useRegGeneratedRecoveryPhrase(); + const registrationPhase = useRegRegistrationPhase(); + + const dispatch = useDispatch(); const generateMnemonicAndKeyPair = async () => { if (generatedRecoveryPhrase === '') { @@ -215,50 +198,25 @@ export const RegistrationStages = () => { const keyPair = await sessionGenerateKeyPair(seed); const newHexPubKey = StringUtils.decode(keyPair.pubKey, 'hex'); - setGeneratedRecoveryPhrase(mnemonic); - setHexGeneratedPubKey(newHexPubKey); // our 'frontend' sessionID + dispatch(setGeneratedRecoveryPhrase(mnemonic)); + dispatch(setHexGeneratedPubKey(newHexPubKey)); // our 'frontend' sessionID } }; - useEffect(() => { + useMount(() => { void generateMnemonicAndKeyPair(); void resetRegistration(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const memoizedValue = useMemo(() => { - return { - registrationPhase, - signInMode, - signUpMode, - setSignInMode, - setSignUpMode, - setRegistrationPhase, - generatedRecoveryPhrase, - hexGeneratedPubKey, - }; - }, [ - registrationPhase, - signInMode, - signUpMode, - setSignInMode, - setSignUpMode, - setRegistrationPhase, - generatedRecoveryPhrase, - hexGeneratedPubKey, - ]); + }); return ( - + <> - - {(registrationPhase === RegistrationPhase.Start || - registrationPhase === RegistrationPhase.SignUp) && } - {(registrationPhase === RegistrationPhase.Start || - registrationPhase === RegistrationPhase.SignIn) && } - + {(registrationPhase === RegistrationPhase.Start || + registrationPhase === RegistrationPhase.SignUp) && } + {(registrationPhase === RegistrationPhase.Start || + registrationPhase === RegistrationPhase.SignIn) && } - + ); }; diff --git a/ts/components/registration/SessionRegistrationView.tsx b/ts/components/registration/SessionRegistrationView.tsx index 99c9a1f60..4928af892 100644 --- a/ts/components/registration/SessionRegistrationView.tsx +++ b/ts/components/registration/SessionRegistrationView.tsx @@ -1,7 +1,9 @@ import { useEffect } from 'react'; +import { Provider } from 'react-redux'; import styled from 'styled-components'; import { AccentText } from './AccentText'; +import { onboardingStore } from '../../state/onboarding/store'; import { SessionTheme } from '../../themes/SessionTheme'; import { setSignInByLinking } from '../../util/storage'; import { SessionToastContainer } from '../SessionToastContainer'; @@ -75,7 +77,9 @@ export const SessionRegistrationView = () => { - + + + diff --git a/ts/components/registration/components/Hero.tsx b/ts/components/registration/components/Hero.tsx index 7e872946a..69cd8ad23 100644 --- a/ts/components/registration/components/Hero.tsx +++ b/ts/components/registration/components/Hero.tsx @@ -29,7 +29,7 @@ const StyledHero = styled.img<{ height: 100%; position: absolute; top: 50%; - ${props => (props.positionWithinContainer === 'right' ? 'right: -50px;' : 'left: 0;')} + ${props => (props.positionWithinContainer === 'right' ? 'right: -16px;' : 'left: -80px;')} transform: translateY(-50%); `; diff --git a/ts/components/registration/SignInTab.tsx b/ts/components/registration/stages/SignInTab.tsx similarity index 83% rename from ts/components/registration/SignInTab.tsx rename to ts/components/registration/stages/SignInTab.tsx index 44a2c4e76..82c125a55 100644 --- a/ts/components/registration/SignInTab.tsx +++ b/ts/components/registration/stages/SignInTab.tsx @@ -1,19 +1,17 @@ -import { useContext, useState } from 'react'; -import { ToastUtils } from '../../session/utils'; -import { sanitizeSessionUsername } from '../../session/utils/String'; -import { Flex } from '../basic/Flex'; -import { SessionButton } from '../basic/SessionButton'; -import { SpacerLG } from '../basic/Text'; -import { SessionSpinner } from '../loading'; -import { - RegistrationContext, - RegistrationPhase, - signInWithLinking, - signInWithRecovery, -} from './RegistrationStages'; -import { RegistrationUserDetails } from './RegistrationUserDetails'; +import { useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { ToastUtils } from '../../../session/utils'; +import { sanitizeSessionUsername } from '../../../session/utils/String'; +import { setRegistrationPhase, setSignInMode } from '../../../state/onboarding/ducks/registration'; +import { useRegSignInMode } from '../../../state/onboarding/selectors/registration'; +import { Flex } from '../../basic/Flex'; +import { SessionButton } from '../../basic/SessionButton'; +import { SpacerLG } from '../../basic/Text'; +import { SessionSpinner } from '../../loading'; +import { RegistrationPhase, signInWithLinking, signInWithRecovery } from '../RegistrationStages'; +import { RegistrationUserDetails } from '../RegistrationUserDetails'; +import { TermsAndConditions } from '../TermsAndConditions'; import { GoBackMainMenuButton } from './SignUpTab'; -import { TermsAndConditions } from './TermsAndConditions'; export enum SignInMode { Default, @@ -106,7 +104,9 @@ export function sanitizeDisplayNameOrToast( } export const SignInTab = () => { - const { setRegistrationPhase, signInMode, setSignInMode } = useContext(RegistrationContext); + const signInMode = useRegSignInMode(); + + const dispatch = useDispatch(); const [recoveryPhrase, setRecoveryPhrase] = useState(''); const [recoveryPhraseError, setRecoveryPhraseError] = useState(undefined as string | undefined); @@ -173,15 +173,15 @@ export const SignInTab = () => { { - setRegistrationPhase(RegistrationPhase.SignIn); - setSignInMode(SignInMode.UsingRecoveryPhrase); + dispatch(setRegistrationPhase(RegistrationPhase.SignIn)); + dispatch(setSignInMode(SignInMode.UsingRecoveryPhrase)); setRecoveryPhrase(''); setDisplayName(''); setIsLoading(false); }} onLinkDeviceButtonClicked={() => { - setRegistrationPhase(RegistrationPhase.SignIn); - setSignInMode(SignInMode.LinkDevice); + dispatch(setRegistrationPhase(RegistrationPhase.SignIn)); + dispatch(setSignInMode(SignInMode.LinkDevice)); setRecoveryPhrase(''); setDisplayName(''); setIsLoading(false); diff --git a/ts/components/registration/SignUpTab.tsx b/ts/components/registration/stages/SignUpTab.tsx similarity index 70% rename from ts/components/registration/SignUpTab.tsx rename to ts/components/registration/stages/SignUpTab.tsx index 5a12dc9a7..fb74221b4 100644 --- a/ts/components/registration/SignUpTab.tsx +++ b/ts/components/registration/stages/SignUpTab.tsx @@ -1,13 +1,24 @@ -import { useContext, useEffect, useState } from 'react'; -import { Noop } from '../../types/Util'; -import { Flex } from '../basic/Flex'; -import { SessionButton } from '../basic/SessionButton'; -import { SessionIdEditable } from '../basic/SessionIdEditable'; -import { SessionIconButton } from '../icon'; -import { RegistrationContext, RegistrationPhase, signUp } from './RegistrationStages'; -import { RegistrationUserDetails } from './RegistrationUserDetails'; +import { useEffect, useState } from 'react'; +import { useDispatch } from 'react-redux'; +import { + setRegistrationPhase, + setSignInMode, + setSignUpMode, +} from '../../../state/onboarding/ducks/registration'; +import { + useRegGeneratedRecoveryPhrase, + useRegHexGeneratedPubKey, + useRegSignUpMode, +} from '../../../state/onboarding/selectors/registration'; +import { Noop } from '../../../types/Util'; +import { Flex } from '../../basic/Flex'; +import { SessionButton } from '../../basic/SessionButton'; +import { SessionIdEditable } from '../../basic/SessionIdEditable'; +import { SessionIconButton } from '../../icon'; +import { RegistrationPhase, signUp } from '../RegistrationStages'; +import { RegistrationUserDetails } from '../RegistrationUserDetails'; +import { TermsAndConditions } from '../TermsAndConditions'; import { SignInMode, sanitizeDisplayNameOrToast } from './SignInTab'; -import { TermsAndConditions } from './TermsAndConditions'; export enum SignUpMode { Default, @@ -32,16 +43,16 @@ const SignUpDefault = (props: { createSessionID: Noop }) => { }; export const GoBackMainMenuButton = () => { - const { setRegistrationPhase, setSignInMode, setSignUpMode } = useContext(RegistrationContext); + const dispatch = useDispatch(); return ( { - setRegistrationPhase(RegistrationPhase.Start); - setSignInMode(SignInMode.Default); - setSignUpMode(SignUpMode.Default); + dispatch(setRegistrationPhase(RegistrationPhase.Start)); + dispatch(setSignInMode(SignInMode.Default)); + dispatch(setSignUpMode(SignUpMode.Default)); }} /> ); @@ -66,13 +77,12 @@ const SignUpSessionIDShown = (props: { continueSignUp: Noop }) => { }; export const SignUpTab = () => { - const { - signUpMode, - setRegistrationPhase, - generatedRecoveryPhrase, - hexGeneratedPubKey, - setSignUpMode, - } = useContext(RegistrationContext); + const signUpMode = useRegSignUpMode(); + const generatedRecoveryPhrase = useRegGeneratedRecoveryPhrase(); + const hexGeneratedPubKey = useRegHexGeneratedPubKey(); + + const dispatch = useDispatch(); + const [displayName, setDisplayName] = useState(''); const [displayNameError, setDisplayNameError] = useState(''); @@ -86,8 +96,8 @@ export const SignUpTab = () => { return ( { - setSignUpMode(SignUpMode.SessionIDShown); - setRegistrationPhase(RegistrationPhase.SignUp); + dispatch(setSignUpMode(SignUpMode.SessionIDShown)); + dispatch(setRegistrationPhase(RegistrationPhase.SignUp)); }} /> ); @@ -97,7 +107,7 @@ export const SignUpTab = () => { return ( { - setSignUpMode(SignUpMode.EnterDetails); + dispatch(setSignUpMode(SignUpMode.EnterDetails)); }} /> ); diff --git a/ts/components/registration/stages/index.tsx b/ts/components/registration/stages/index.tsx new file mode 100644 index 000000000..bc871de20 --- /dev/null +++ b/ts/components/registration/stages/index.tsx @@ -0,0 +1,4 @@ +import { SignInMode, SignInTab } from './SignInTab'; +import { SignUpMode, SignUpTab } from './SignUpTab'; + +export { SignInMode, SignInTab, SignUpMode, SignUpTab };