feat: replace context with redux slice

ts/components/registration/RegistrationStages.tsx

@@ -1,5 +1,5 @@
-import { createContext, useEffect, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
-import { Provider } 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 { SignInTab, SignUpTab } from './stages';
-import { SignUpMode, SignUpTab } from './SignUpTab';
 
 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<RegistrationPhaseContext>({
-  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 generatedRecoveryPhrase = useRegGeneratedRecoveryPhrase();
-  const [hexGeneratedPubKey, setHexGeneratedPubKey] = useState('');
+  const registrationPhase = useRegRegistrationPhase();
-  const [registrationPhase, setRegistrationPhase] = useState(RegistrationPhase.Start);
+
-  const [signInMode, setSignInMode] = useState(SignInMode.Default);
+  const dispatch = useDispatch();
-  const [signUpMode, setSignUpMode] = useState(SignUpMode.Default);
 
   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);
+      dispatch(setGeneratedRecoveryPhrase(mnemonic));
-      setHexGeneratedPubKey(newHexPubKey); // our 'frontend' sessionID
+      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 (
-    <Provider store={onboardingStore}>
+    <>
       <ModalContainer />
       <StyledRegistrationContainer container={true} flexDirection="column">
-        <RegistrationContext.Provider value={memoizedValue}>
         {(registrationPhase === RegistrationPhase.Start ||
           registrationPhase === RegistrationPhase.SignUp) && <SignUpTab />}
         {(registrationPhase === RegistrationPhase.Start ||
           registrationPhase === RegistrationPhase.SignIn) && <SignInTab />}
-        </RegistrationContext.Provider>
       </StyledRegistrationContainer>
-    </Provider>
+    </>
   );
 };

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 = () => {
             <SessionIcon iconSize={150} iconType="brand" />
 
             <AccentText />
+            <Provider store={onboardingStore}>
               <RegistrationStages />
+            </Provider>
           </Flex>
         </StyledSessionContent>
       </StyledFullscreenContainer>

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%);
 `;
 

ts/components/registration/stages/SignInTab.tsx

@@ -1,19 +1,17 @@
-import { useContext, useState } from 'react';
+import { useState } from 'react';
-import { ToastUtils } from '../../session/utils';
+import { useDispatch } from 'react-redux';
-import { sanitizeSessionUsername } from '../../session/utils/String';
+import { ToastUtils } from '../../../session/utils';
-import { Flex } from '../basic/Flex';
+import { sanitizeSessionUsername } from '../../../session/utils/String';
-import { SessionButton } from '../basic/SessionButton';
+import { setRegistrationPhase, setSignInMode } from '../../../state/onboarding/ducks/registration';
-import { SpacerLG } from '../basic/Text';
+import { useRegSignInMode } from '../../../state/onboarding/selectors/registration';
-import { SessionSpinner } from '../loading';
+import { Flex } from '../../basic/Flex';
-import {
+import { SessionButton } from '../../basic/SessionButton';
-  RegistrationContext,
+import { SpacerLG } from '../../basic/Text';
-  RegistrationPhase,
+import { SessionSpinner } from '../../loading';
-  signInWithLinking,
+import { RegistrationPhase, signInWithLinking, signInWithRecovery } from '../RegistrationStages';
-  signInWithRecovery,
+import { RegistrationUserDetails } from '../RegistrationUserDetails';
-} from './RegistrationStages';
+import { TermsAndConditions } from '../TermsAndConditions';
-import { RegistrationUserDetails } from './RegistrationUserDetails';
 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 = () => {
       <SignInButtons
         signInMode={signInMode}
         onRecoveryButtonClicked={() => {
-          setRegistrationPhase(RegistrationPhase.SignIn);
+          dispatch(setRegistrationPhase(RegistrationPhase.SignIn));
-          setSignInMode(SignInMode.UsingRecoveryPhrase);
+          dispatch(setSignInMode(SignInMode.UsingRecoveryPhrase));
           setRecoveryPhrase('');
           setDisplayName('');
           setIsLoading(false);
         }}
         onLinkDeviceButtonClicked={() => {
-          setRegistrationPhase(RegistrationPhase.SignIn);
+          dispatch(setRegistrationPhase(RegistrationPhase.SignIn));
-          setSignInMode(SignInMode.LinkDevice);
+          dispatch(setSignInMode(SignInMode.LinkDevice));
           setRecoveryPhrase('');
           setDisplayName('');
           setIsLoading(false);

ts/components/registration/stages/SignUpTab.tsx

@@ -1,13 +1,24 @@
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
-import { Noop } from '../../types/Util';
+import { useDispatch } from 'react-redux';
-import { Flex } from '../basic/Flex';
+import {
-import { SessionButton } from '../basic/SessionButton';
+  setRegistrationPhase,
-import { SessionIdEditable } from '../basic/SessionIdEditable';
+  setSignInMode,
-import { SessionIconButton } from '../icon';
+  setSignUpMode,
-import { RegistrationContext, RegistrationPhase, signUp } from './RegistrationStages';
+} from '../../../state/onboarding/ducks/registration';
-import { RegistrationUserDetails } from './RegistrationUserDetails';
+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 (
     <SessionIconButton
       iconSize="huge"
       iconType="arrow"
       iconPadding="5px"
       onClick={() => {
-        setRegistrationPhase(RegistrationPhase.Start);
+        dispatch(setRegistrationPhase(RegistrationPhase.Start));
-        setSignInMode(SignInMode.Default);
+        dispatch(setSignInMode(SignInMode.Default));
-        setSignUpMode(SignUpMode.Default);
+        dispatch(setSignUpMode(SignUpMode.Default));
       }}
     />
   );
@@ -66,13 +77,12 @@ const SignUpSessionIDShown = (props: { continueSignUp: Noop }) => {
 };
 
 export const SignUpTab = () => {
-  const {
+  const signUpMode = useRegSignUpMode();
-    signUpMode,
+  const generatedRecoveryPhrase = useRegGeneratedRecoveryPhrase();
-    setRegistrationPhase,
+  const hexGeneratedPubKey = useRegHexGeneratedPubKey();
-    generatedRecoveryPhrase,
+
-    hexGeneratedPubKey,
+  const dispatch = useDispatch();
-    setSignUpMode,
+
-  } = useContext(RegistrationContext);
   const [displayName, setDisplayName] = useState('');
   const [displayNameError, setDisplayNameError] = useState<undefined | string>('');
 
@@ -86,8 +96,8 @@ export const SignUpTab = () => {
     return (
       <SignUpDefault
         createSessionID={() => {
-          setSignUpMode(SignUpMode.SessionIDShown);
+          dispatch(setSignUpMode(SignUpMode.SessionIDShown));
-          setRegistrationPhase(RegistrationPhase.SignUp);
+          dispatch(setRegistrationPhase(RegistrationPhase.SignUp));
         }}
       />
     );
@@ -97,7 +107,7 @@ export const SignUpTab = () => {
     return (
       <SignUpSessionIDShown
         continueSignUp={() => {
-          setSignUpMode(SignUpMode.EnterDetails);
+          dispatch(setSignUpMode(SignUpMode.EnterDetails));
         }}
       />
     );

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 };