feat: moved frontend errors to redux

ts/components/registration/hooks/index.tsx

@@ -5,6 +5,7 @@ import { ONBOARDING_TIMES } from '../../../session/constants';
 import { trigger } from '../../../shims/events';
 import {
   AccountRestoration,
+  resetOnboardingState,
   setAccountRestorationStep,
 } from '../../../state/onboarding/ducks/registration';
 
@@ -89,6 +90,7 @@ export const useRecoveryProgressEffect = (props: UseRecoveryProgressEffectProps)
         window.log.debug(
           `WIP: [continueYourSession] AccountRestoration.Complete opening inbox for ${displayName}`
         );
+        dispatch(resetOnboardingState());
         trigger('openInbox');
       }
     }

ts/components/registration/stages/CreateAccount.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { useMount } from 'react-use';
 import { SettingsKey } from '../../../data/settings-key';
@@ -10,11 +10,13 @@ import {
   AccountCreation,
   setAccountCreationStep,
   setDisplayName,
+  setDisplayNameError,
   setHexGeneratedPubKey,
   setRecoveryPassword,
 } from '../../../state/onboarding/ducks/registration';
 import {
   useDisplayName,
+  useDisplayNameError,
   useOnboardAccountCreationStep,
   useOnboardHexGeneratedPubKey,
   useRecoveryPassword,
@@ -57,12 +59,11 @@ export const CreateAccount = () => {
   const step = useOnboardAccountCreationStep();
   const recoveryPassword = useRecoveryPassword();
   const hexGeneratedPubKey = useOnboardHexGeneratedPubKey();
+  const displayName = useDisplayName();
+  const displayNameError = useDisplayNameError();
 
   const dispatch = useDispatch();
 
-  const displayName = useDisplayName();
-  const [displayNameError, setDisplayNameError] = useState<undefined | string>('');
-
   const generateMnemonicAndKeyPair = async () => {
     if (recoveryPassword === '') {
       const mnemonic = await generateMnemonic();
@@ -103,7 +104,7 @@ export const CreateAccount = () => {
         displayName,
         recoveryPassword,
         errorCallback: e => {
-          setDisplayNameError(e.message || String(e));
+          dispatch(setDisplayNameError(e.message || String(e)));
           throw e;
         },
       });
@@ -123,7 +124,7 @@ export const CreateAccount = () => {
       callback={() => {
         dispatch(setDisplayName(''));
         dispatch(setRecoveryPassword(''));
-        setDisplayNameError('');
+        dispatch(setDisplayNameError(undefined));
       }}
     >
       <Flex
@@ -144,7 +145,7 @@ export const CreateAccount = () => {
           placeholder={window.i18n('enterDisplayName')}
           value={displayName}
           onValueChanged={(_name: string) => {
-            const name = sanitizeDisplayNameOrToast(_name, setDisplayNameError);
+            const name = sanitizeDisplayNameOrToast(_name, setDisplayNameError, dispatch);
             dispatch(setDisplayName(name));
           }}
           onEnterPressed={signUpWithDetails}

ts/components/registration/stages/RestoreAccount.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { ONBOARDING_TIMES } from '../../../session/constants';
 import { InvalidWordsError, NotEnoughWordsError } from '../../../session/crypto/mnemonic';
@@ -9,14 +8,18 @@ import {
   AccountRestoration,
   setAccountRestorationStep,
   setDisplayName,
+  setDisplayNameError,
   setProgress,
   setRecoveryPassword,
+  setRecoveryPasswordError,
 } from '../../../state/onboarding/ducks/registration';
 import {
   useDisplayName,
+  useDisplayNameError,
   useOnboardAccountRestorationStep,
   useProgress,
   useRecoveryPassword,
+  useRecoveryPasswordError,
 } from '../../../state/onboarding/selectors/registration';
 import {
   registerSingleDevice,
@@ -113,15 +116,10 @@ async function signInAndFetchDisplayName(
 
 export const RestoreAccount = () => {
   const step = useOnboardAccountRestorationStep();
-
   const recoveryPassword = useRecoveryPassword();
-  const [recoveryPasswordError, setRecoveryPasswordError] = useState(
+  const recoveryPasswordError = useRecoveryPasswordError();
-    undefined as string | undefined
-  );
-
   const displayName = useDisplayName();
-  const [displayNameError, setDisplayNameError] = useState<undefined | string>('');
+  const displayNameError = useDisplayNameError();
-
   const progress = useProgress();
 
   const dispatch = useDispatch();
@@ -148,7 +146,6 @@ export const RestoreAccount = () => {
       await registrationDone(ourPubkey, displayName);
       dispatch(setAccountRestorationStep(AccountRestoration.Finishing));
     } catch (e) {
-      window.log.debug(`WIP: [recoverAndFetchDisplayName] error ${JSON.stringify(e)} `);
       if (e instanceof NotFoundError || e instanceof TaskTimedOutError) {
         window.log.debug(
           `WIP: [recoverAndFetchDisplayName] AccountRestoration.RecoveryPassword failed to get a display name so we need to enter it manually. Error: ${e}`
@@ -158,22 +155,16 @@ export const RestoreAccount = () => {
       }
 
       if (e instanceof NotEnoughWordsError) {
-        setRecoveryPasswordError(window.i18n('recoveryPasswordErrorMessageShort'));
+        dispatch(setRecoveryPasswordError(window.i18n('recoveryPasswordErrorMessageShort')));
       } else if (e instanceof InvalidWordsError) {
-        setRecoveryPasswordError(window.i18n('recoveryPasswordErrorMessageIncorrect'));
+        dispatch(setRecoveryPasswordError(window.i18n('recoveryPasswordErrorMessageIncorrect')));
       } else {
-        setRecoveryPasswordError(window.i18n('recoveryPasswordErrorMessageGeneric'));
+        dispatch(setRecoveryPasswordError(window.i18n('recoveryPasswordErrorMessageGeneric')));
       }
       window.log.debug(
-        `WIP: [recoverAndFetchDisplayName] exception during registration: ${e.message || e} type ${typeof e}`
+        `WIP: [recoverAndFetchDisplayName] exception during registration: ${e.message || e} type ${typeof JSON.stringify(e)}`
-      );
-      window.log.debug(
-        `WIP: [recoverAndFetchDisplayName] recoveryPasswordError before: ${recoveryPasswordError}`
       );
       dispatch(setAccountRestorationStep(AccountRestoration.RecoveryPassword));
-      window.log.debug(
-        `WIP: [recoverAndFetchDisplayName] recoveryPasswordError after: ${recoveryPasswordError}`
-      );
     }
   };
 
@@ -188,7 +179,7 @@ export const RestoreAccount = () => {
         displayName,
         recoveryPassword,
         errorCallback: e => {
-          setDisplayNameError(e.message || String(e));
+          dispatch(setDisplayNameError(e.message || String(e)));
           throw e;
         },
       });
@@ -211,8 +202,8 @@ export const RestoreAccount = () => {
             dispatch(setDisplayName(''));
             dispatch(setProgress(0));
 
-            setRecoveryPasswordError('');
+            dispatch(setRecoveryPasswordError(undefined));
-            setDisplayNameError('');
+            dispatch(setDisplayNameError(undefined));
           }}
         >
           <Flex
@@ -276,7 +267,7 @@ export const RestoreAccount = () => {
                   placeholder={window.i18n('enterDisplayName')}
                   value={displayName}
                   onValueChanged={(_name: string) => {
-                    const name = sanitizeDisplayNameOrToast(_name, setDisplayNameError);
+                    const name = sanitizeDisplayNameOrToast(_name, setDisplayNameError, dispatch);
                     dispatch(setDisplayName(name));
                   }}
                   onEnterPressed={recoverAndEnterDisplayName}

ts/components/registration/utils/index.tsx

@@ -1,16 +1,18 @@
+import { AnyAction, Dispatch } from '@reduxjs/toolkit';
 import { sanitizeSessionUsername } from '../../../session/utils/String';
 
 export function sanitizeDisplayNameOrToast(
   displayName: string,
-  setDisplayNameError: (error: string | undefined) => void
+  setDisplayNameError: (error: string | undefined) => AnyAction,
+  dispatch: Dispatch
 ) {
   try {
     const sanitizedName = sanitizeSessionUsername(displayName);
     const trimName = sanitizedName.trim();
-    setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined);
+    dispatch(setDisplayNameError(!trimName ? window.i18n('displayNameEmpty') : undefined));
     return sanitizedName;
   } catch (e) {
-    setDisplayNameError(window.i18n('displayNameErrorDescriptionShorter'));
+    dispatch(setDisplayNameError(window.i18n('displayNameErrorDescriptionShorter')));
     return displayName;
   }
 }

ts/session/apis/snode_api/retrieveRequest.ts

@@ -111,7 +111,7 @@ async function retrieveNextMessages(
   configHashesToBump: Array<string> | null
 ): Promise<RetrieveMessagesResultsBatched> {
   if (namespaces.length !== lastHashes.length) {
-    throw new Error('namespaces and last hashes does not match');
+    throw new Error('namespaces and last hashes do not match');
   }
 
   const retrieveRequestsParams = await buildRetrieveRequest(

ts/state/onboarding/ducks/registration.ts

@@ -35,8 +35,10 @@ export type OnboardDirection = 'backward' | 'forward';
 
 export type OnboardingState = {
   recoveryPassword: string;
+  recoveryPasswordError: string | undefined;
   hexGeneratedPubKey: string;
   displayName: string;
+  displayNameError: string | undefined;
   progress: number;
   step: Onboarding;
   accountCreationStep: AccountCreation;
@@ -46,8 +48,10 @@ export type OnboardingState = {
 
 const initialState: OnboardingState = {
   recoveryPassword: '',
+  recoveryPasswordError: undefined,
   hexGeneratedPubKey: '',
   displayName: '',
+  displayNameError: undefined,
   progress: 0,
   step: Onboarding.Start,
   accountRestorationStep: AccountRestoration.RecoveryPassword,
@@ -59,15 +63,24 @@ export const registrationSlice = createSlice({
   name: 'registration',
   initialState,
   reducers: {
+    resetOnboardingState() {
+      return { ...initialState };
+    },
     setRecoveryPassword(state, action: PayloadAction<string>) {
       return { ...state, recoveryPassword: action.payload };
     },
+    setRecoveryPasswordError(state, action: PayloadAction<string | undefined>) {
+      return { ...state, recoveryPasswordError: action.payload };
+    },
     setHexGeneratedPubKey(state, action: PayloadAction<string>) {
       return { ...state, hexGeneratedPubKey: action.payload };
     },
     setDisplayName(state, action: PayloadAction<string>) {
       return { ...state, displayName: action.payload };
     },
+    setDisplayNameError(state, action: PayloadAction<string | undefined>) {
+      return { ...state, displayNameError: action.payload };
+    },
     setProgress(state, action: PayloadAction<number>) {
       return { ...state, progress: action.payload };
     },
@@ -87,9 +100,12 @@ export const registrationSlice = createSlice({
 });
 
 export const {
+  resetOnboardingState,
   setRecoveryPassword,
+  setRecoveryPasswordError,
   setHexGeneratedPubKey,
   setDisplayName,
+  setDisplayNameError,
   setProgress,
   setOnboardingStep,
   setAccountCreationStep,

ts/state/onboarding/selectors/registration.ts

@@ -19,6 +19,11 @@ const getRecoveryPassword = createSelector(
   (state: OnboardingState): string => state.recoveryPassword
 );
 
+const getRecoveryPasswordError = createSelector(
+  getRegistration,
+  (state: OnboardingState): string | undefined => state.recoveryPasswordError
+);
+
 const getHexGeneratedPubKey = createSelector(
   getRegistration,
   (state: OnboardingState): string => state.hexGeneratedPubKey
@@ -29,6 +34,11 @@ const getDisplayName = createSelector(
   (state: OnboardingState): string => state.displayName
 );
 
+const getDisplayNameError = createSelector(
+  getRegistration,
+  (state: OnboardingState): string | undefined => state.displayNameError
+);
+
 const getProgress = createSelector(
   getRegistration,
   (state: OnboardingState): number => state.progress
@@ -60,6 +70,10 @@ export const useRecoveryPassword = () => {
   return useSelector(getRecoveryPassword);
 };
 
+export const useRecoveryPasswordError = () => {
+  return useSelector(getRecoveryPasswordError);
+};
+
 export const useOnboardHexGeneratedPubKey = () => {
   return useSelector(getHexGeneratedPubKey);
 };
@@ -68,6 +82,10 @@ export const useDisplayName = () => {
   return useSelector(getDisplayName);
 };
 
+export const useDisplayNameError = () => {
+  return useSelector(getDisplayNameError);
+};
+
 export const useProgress = () => {
   return useSelector(getProgress);
 };

ts/util/accountManager.ts

@@ -8,7 +8,7 @@ import { SettingsKey } from '../data/settings-key';
 import { ConversationTypeEnum } from '../models/conversationAttributes';
 import { SessionKeyPair } from '../receiver/keypairs';
 import { getSwarmPollingInstance } from '../session/apis/snode_api';
-import { NotEnoughWordsError, mnDecode, mnEncode } from '../session/crypto/mnemonic';
+import { mnDecode, mnEncode } from '../session/crypto/mnemonic';
 import { getOurPubKeyStrFromCache } from '../session/utils/User';
 import { NotFoundError } from '../session/utils/errors';
 import { LibSessionUtil } from '../session/utils/libsession/libsession_utils';
@@ -104,8 +104,6 @@ export async function signInByLinkingDevice(
   const pubKeyString = toHex(identityKeyPair.pubKey);
   // fetch configuration message to get the user's display name.
   const displayName = await getSwarmPollingInstance().pollForOurDisplayName();
-  // TODO remove later
-  throw new NotEnoughWordsError('fml');
 
   if (isEmpty(displayName)) {
     throw new NotFoundError('Got a config message from network but without a displayName...');