refactor: move user-related data to appStore

app/assets/javascripts/components/AccountMenu/Authentication.tsx

@@ -11,20 +11,17 @@ import TargetedKeyboardEvent = JSXInternal.TargetedKeyboardEvent;
 import { WebApplication } from '@/ui_models/application';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
-import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
 import { observer } from 'mobx-react-lite';
 import { AppState } from '@/ui_models/app_state';
 
 type Props = {
   application: WebApplication;
   appState: AppState;
-  user: User | undefined;
 }
 
 const Authentication = observer(({
                                    application,
                                    appState,
-                                   user
                                  }: Props) => {
 
   const [showAdvanced, setShowAdvanced] = useState(false);
@@ -50,6 +47,8 @@ const Authentication = observer(({
     closeAccountMenu
   } = appState.accountMenu;
 
+  const user = application.getUser();
+
   useEffect(() => {
     if (isEmailFocused) {
       emailInputRef.current.focus();

app/assets/javascripts/components/AccountMenu/Footer.tsx

@@ -1,19 +1,16 @@
 import { AppState } from '@/ui_models/app_state';
 import { useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
-import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
 import { observer } from 'mobx-react-lite';
 
 type Props = {
   application: WebApplication;
   appState: AppState;
-  user: User | undefined;
 }
 
 const Footer = observer(({
                            application,
                            appState,
-                           user
                          }: Props) => {
   const {
     showLogin,
@@ -23,6 +20,8 @@ const Footer = observer(({
     setSigningOut
   } = appState.accountMenu;
 
+  const user = application.getUser();
+
   const { showBetaWarning, disableBetaWarning: disableAppStateBetaWarning } = appState;
 
   const [appVersion] = useState(() => `v${((window as any).electronAppVersion || application.bridge.appVersion)}`);

app/assets/javascripts/components/AccountMenu/Protections.tsx

@@ -1,8 +1,8 @@
 import { WebApplication } from '@/ui_models/application';
 import { FunctionalComponent } from 'preact';
-import { useCallback, useState } from '@node_modules/preact/hooks';
+import { useCallback, useState } from 'preact/hooks';
 import { useEffect } from 'preact/hooks';
-import { ApplicationEvent } from '@node_modules/@standardnotes/snjs';
+import { ApplicationEvent } from '@standardnotes/snjs';
 import { isSameDay } from '@/utils';
 
 type Props = {

app/assets/javascripts/components/AccountMenu/User.tsx

@@ -2,19 +2,19 @@ import { observer } from 'mobx-react-lite';
 import { AppState } from '@/ui_models/app_state';
 import { PasswordWizardType } from '@/types';
 import { WebApplication } from '@/ui_models/application';
+import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
 
 type Props = {
-  email: string;
   appState: AppState;
   application: WebApplication;
 }
 
 const User = observer(({
-                         email,
                          appState,
                          application,
                        }: Props) => {
   const { server, closeAccountMenu } = appState.accountMenu;
+  const user = application.getUser();
 
   const openPasswordWizard = () => {
     closeAccountMenu();
@@ -48,7 +48,7 @@ const User = observer(({
       <div className="sk-panel-row">
         <div className="sk-panel-column">
           <div className="sk-h1 sk-bold wrap">
-            {email}
+            {(user as User).email}
           </div>
           <div className="sk-subtitle neutral">
             {server}

app/assets/javascripts/components/AccountMenu/index.tsx

@@ -2,8 +2,6 @@ import { observer } from 'mobx-react-lite';
 import { toDirective } from '@/components/utils';
 import { AppState } from '@/ui_models/app_state';
 import { WebApplication } from '@/ui_models/application';
-import { useEffect, useState } from 'preact/hooks';
-import { ApplicationEvent } from '@standardnotes/snjs';
 import { ConfirmSignoutContainer } from '@/components/ConfirmSignoutModal';
 import Authentication from '@/components/AccountMenu/Authentication';
 import Footer from '@/components/AccountMenu/Footer';
@@ -20,27 +18,13 @@ type Props = {
 };
 
 const AccountMenu = observer(({ application, appState }: Props) => {
-  const [user, setUser] = useState(application.getUser());
-
   const {
     showLogin,
     showRegister,
     closeAccountMenu
   } = appState.accountMenu;
 
-  // Add the required event observers
-  useEffect(() => {
-    const removeKeyStatusChangedObserver = application.addEventObserver(
-      async () => {
-        setUser(application.getUser());
-      },
-      ApplicationEvent.KeyStatusChanged
-    );
-
-    return () => {
-      removeKeyStatusChangedObserver();
-    };
-  }, [application]);
+  const user = application.getUser();
 
   return (
     <div className="sn-component">
@@ -53,7 +37,6 @@ const AccountMenu = observer(({ application, appState }: Props) => {
           <Authentication
             application={application}
             appState={appState}
-            user={user}
           />
           {!showLogin && !showRegister && (
             <div>
@@ -61,7 +44,6 @@ const AccountMenu = observer(({ application, appState }: Props) => {
                 <User
                   application={application}
                   appState={appState}
-                  email={user.email}
                 />
               )}
               <Encryption appState={appState} />
@@ -85,7 +67,6 @@ const AccountMenu = observer(({ application, appState }: Props) => {
         <Footer
           application={application}
           appState={appState}
-          user={user}
         />
       </div>
     </div>