diff --git a/ts/components/session/registration/RegistrationStages.tsx b/ts/components/session/registration/RegistrationStages.tsx index 3f53380e5..49d9fecc7 100644 --- a/ts/components/session/registration/RegistrationStages.tsx +++ b/ts/components/session/registration/RegistrationStages.tsx @@ -16,6 +16,7 @@ import { fromHex } from '../../../session/utils/String'; import { TaskTimedOutError } from '../../../session/utils/Promise'; import { mn_decode } from '../../../session/crypto/mnemonic'; import { getSwarmPollingInstance } from '../../../session/snode_api/swarmPolling'; +import { createContext } from 'react'; export const MAX_USERNAME_LENGTH = 20; // tslint:disable: use-simple-attributes @@ -158,6 +159,16 @@ export enum RegistrationPhase { SignUp, } +interface RegistrationPhaseContext { + registrationPhase: RegistrationPhase; + setRegistrationPhase: (phase: RegistrationPhase) => void; +} + +export const RegistrationContext = createContext({ + registrationPhase: RegistrationPhase.Start, + setRegistrationPhase: () => {} +}); + export const RegistrationStages = () => { const [generatedRecoveryPhrase, setGeneratedRecoveryPhrase] = useState(''); const [hexGeneratedPubKey, setHexGeneratedPubKey] = useState(''); @@ -190,18 +201,21 @@ export const RegistrationStages = () => { 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/session/registration/SignInTab.tsx b/ts/components/session/registration/SignInTab.tsx index 8e32dc2e5..05af89b15 100644 --- a/ts/components/session/registration/SignInTab.tsx +++ b/ts/components/session/registration/SignInTab.tsx @@ -1,9 +1,9 @@ -import React, { createContext, useState } from 'react'; +import React, { useContext, useState } from 'react'; import { Flex } from '../../basic/Flex'; import { SpacerLG } from '../../basic/Text'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton'; import { SessionSpinner } from '../SessionSpinner'; -import { RegistrationPhase, signInWithLinking, signInWithRecovery } from './RegistrationStages'; +import { RegistrationContext, RegistrationPhase, signInWithLinking, signInWithRecovery } from './RegistrationStages'; import { RegistrationUserDetails } from './RegistrationUserDetails'; import { TermsAndConditions } from './TermsAndConditions'; @@ -85,12 +85,9 @@ const SignInButtons = (props: { ); }; -interface Props { - setRegistrationPhase: (phase: RegistrationPhase) => void; -} +export const SignInTab = () => { + const { setRegistrationPhase } = useContext(RegistrationContext); -export const SignInTab = (props: Props) => { - const { setRegistrationPhase } = props; const [signInMode, setSignInMode] = useState(SignInMode.Default); const [recoveryPhrase, setRecoveryPhrase] = useState(''); const [recoveryPhraseError, setRecoveryPhraseError] = useState(undefined as string | undefined); diff --git a/ts/components/session/registration/SignUpTab.tsx b/ts/components/session/registration/SignUpTab.tsx index 769300485..171ebb6ea 100644 --- a/ts/components/session/registration/SignUpTab.tsx +++ b/ts/components/session/registration/SignUpTab.tsx @@ -1,7 +1,7 @@ -import React, { useEffect, useState } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton'; import { SessionIdEditable } from '../SessionIdEditable'; -import { RegistrationPhase, signUp } from './RegistrationStages'; +import { RegistrationContext, RegistrationPhase, signUp } from './RegistrationStages'; import { RegistrationUserDetails } from './RegistrationUserDetails'; import { TermsAndConditions } from './TermsAndConditions'; @@ -15,7 +15,6 @@ export interface Props { // tslint:disable: react-unused-props-and-state generatedRecoveryPhrase: string; hexGeneratedPubKey: string; - setRegistrationPhase: (phase: any) => any; } const CreateSessionIdButton = ({ createSessionID }: { createSessionID: any }) => { @@ -63,7 +62,8 @@ const SignUpSessionIDShown = (props: { continueSignUp: () => void }) => { }; export const SignUpTab = (props: Props) => { - const { setRegistrationPhase } = props; + const { setRegistrationPhase } = useContext(RegistrationContext); + const [signUpMode, setSignUpMode] = useState(SignUpMode.Default); const [displayName, setDisplayName] = useState(''); const [displayNameError, setDisplayNameError] = useState('');