keejef
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop
2
0
Fork 0
Code Issues 8 Projects Releases Wiki Activity

feat: replace context with redux slice

Browse Source
pull/3056/head
William Grant 1 year ago
parent 264340a45d
commit 7b175b210e
6 changed files with 88 additions and 112 deletions
Show Stats Download Patch File Download Diff File

92
ts/components/registration/RegistrationStages.tsx
Unescape Escape View File

@ -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<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 [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 (
<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>
{(registrationPhase === RegistrationPhase.Start ||
registrationPhase === RegistrationPhase.SignUp) && <SignUpTab />}
{(registrationPhase === RegistrationPhase.Start ||
registrationPhase === RegistrationPhase.SignIn) && <SignInTab />}
</StyledRegistrationContainer>
</Provider>
</>
);
};

6
ts/components/registration/SessionRegistrationView.tsx
Unescape Escape View File

@ -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 />
<RegistrationStages />
<Provider store={onboardingStore}>
<RegistrationStages />
</Provider>
</Flex>
</StyledSessionContent>
</StyledFullscreenContainer>

2
ts/components/registration/components/Hero.tsx
Unescape Escape View File

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

40
ts/components/registration/SignInTab.tsx → ts/components/registration/stages/SignInTab.tsx
Unescape Escape View File

@ -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 = () => {
<SignInButtons
signInMode={signInMode}
onRecoveryButtonClicked={() => {
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);

56
ts/components/registration/SignUpTab.tsx → ts/components/registration/stages/SignUpTab.tsx
Unescape Escape View File

@ -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 (
<SessionIconButton
iconSize="huge"
iconType="arrow"
iconPadding="5px"
onClick={() => {
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<undefined | string>('');
@ -86,8 +96,8 @@ export const SignUpTab = () => {
return (
<SignUpDefault
createSessionID={() => {
setSignUpMode(SignUpMode.SessionIDShown);
setRegistrationPhase(RegistrationPhase.SignUp);
dispatch(setSignUpMode(SignUpMode.SessionIDShown));
dispatch(setRegistrationPhase(RegistrationPhase.SignUp));
}}
/>
);
@ -97,7 +107,7 @@ export const SignUpTab = () => {
return (
<SignUpSessionIDShown
continueSignUp={() => {
setSignUpMode(SignUpMode.EnterDetails);
dispatch(setSignUpMode(SignUpMode.EnterDetails));
}}
/>
);

4
ts/components/registration/stages/index.tsx
Unescape Escape View File

@ -0,0 +1,4 @@
import { SignInMode, SignInTab } from './SignInTab';
import { SignUpMode, SignUpTab } from './SignUpTab';
export { SignInMode, SignInTab, SignUpMode, SignUpTab };
Write Preview
Loading…
Cancel
Save