refactor: read the required data from appState instead of passing by parent component

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

@@ -18,16 +18,12 @@ import { AppState } from '@/ui_models/app_state';
 type Props = {
   application: WebApplication;
   appState: AppState;
-  closeAccountMenu: () => void;
-  notesAndTagsCount: number;
   user: User | undefined;
 }
 
 const Authentication = observer(({
                                    application,
                                    appState,
-                                   closeAccountMenu,
-                                   notesAndTagsCount,
                                    user
                                  }: Props) => {
 
@@ -45,11 +41,13 @@ const Authentication = observer(({
 
   const {
     server,
+    notesAndTagsCount,
     showLogin,
     showRegister,
     setShowLogin,
     setShowRegister,
-    setServer
+    setServer,
+    closeAccountMenu
   } = appState.accountMenu;
 
   useEffect(() => {

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

@@ -3,14 +3,10 @@ import { observer } from 'mobx-react-lite';
 
 type Props = {
   appState: AppState;
-  notesAndTagsCount: number;
 }
 
-const Encryption = observer(({
+const Encryption = observer(({ appState }: Props) => {
-                               appState,
+  const { isEncryptionEnabled, encryptionStatusString, notesAndTagsCount } = appState.accountMenu;
-                               notesAndTagsCount
-                             }: Props) => {
-  const { isEncryptionEnabled, encryptionStatusString } = appState.accountMenu;
 
   const getEncryptionStatusForNotes = () => {
     const length = notesAndTagsCount;

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

@@ -7,16 +7,14 @@ type Props = {
   email: string;
   appState: AppState;
   application: WebApplication;
-  closeAccountMenu: () => void;
 }
 
 const User = observer(({
                          email,
                          appState,
                          application,
-                         closeAccountMenu
                        }: Props) => {
-  const { server } = appState.accountMenu;
+  const { server, closeAccountMenu } = appState.accountMenu;
 
   const openPasswordWizard = () => {
     closeAccountMenu();

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

@@ -23,16 +23,11 @@ const AccountMenu = observer(({ application, appState }: Props) => {
   const [user, setUser] = useState(application.getUser());
 
   const {
-    notesAndTagsCount,
     showLogin,
     showRegister,
-    closeAccountMenu: closeAppStateAccountMenu
+    closeAccountMenu
   } = appState.accountMenu;
 
-  const closeAccountMenu = () => {
-    closeAppStateAccountMenu();
-  };
-
   // Add the required event observers
   useEffect(() => {
     const removeKeyStatusChangedObserver = application.addEventObserver(
@@ -58,8 +53,6 @@ const AccountMenu = observer(({ application, appState }: Props) => {
           <Authentication
             application={application}
             appState={appState}
-            closeAccountMenu={closeAccountMenu}
-            notesAndTagsCount={notesAndTagsCount}
             user={user}
           />
           {!showLogin && !showRegister && (
@@ -69,13 +62,9 @@ const AccountMenu = observer(({ application, appState }: Props) => {
                   application={application}
                   appState={appState}
                   email={user.email}
-                  closeAccountMenu={closeAccountMenu}
                 />
               )}
-              <Encryption
+              <Encryption appState={appState} />
-                appState={appState}
-                notesAndTagsCount={notesAndTagsCount}
-              />
               <Protections application={application} />
               <PasscodeLock
                 application={application}