refactor: reviewer's comment

- use Preact's `FunctionalComponent` instead of React's `FC` to keep the app more lightweight
- remove `@node_modules/` from imports

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

@@ -5,14 +5,14 @@ import {
   STRING_GENERATING_REGISTER_KEYS,
   STRING_NON_MATCHING_PASSWORDS
 } from '@/strings';
-import { JSXInternal } from '@node_modules/preact/src/jsx';
+import { JSXInternal } from 'preact/src/jsx';
 import TargetedEvent = JSXInternal.TargetedEvent;
 import TargetedKeyboardEvent = JSXInternal.TargetedKeyboardEvent;
 import { WebApplication } from '@/ui_models/application';
 import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks';
 import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
-import { User } from '@node_modules/@standardnotes/snjs/dist/@types/services/api/responses';
+import { FunctionalComponent } from 'preact';
-import { FC } from 'react';
+import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
 
 type Props = {
   application: WebApplication;
@@ -27,18 +27,18 @@ type Props = {
   user: User | undefined;
 }
 
-const Authentication: FC<Props> = ({
+const Authentication: FunctionalComponent<Props> = ({
-                                     application,
+                                                      application,
-                                     server,
+                                                      server,
-                                     setServer,
+                                                      setServer,
-                                     closeAccountMenu,
+                                                      closeAccountMenu,
-                                     notesAndTagsCount,
+                                                      notesAndTagsCount,
-                                     showLogin,
+                                                      showLogin,
-                                     setShowLogin,
+                                                      setShowLogin,
-                                     showRegister,
+                                                      showRegister,
-                                     setShowRegister,
+                                                      setShowRegister,
-                                     user
+                                                      user
-                                   }: Props) => {
+                                                    }: Props) => {
 
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [isAuthenticating, setIsAuthenticating] = useState(false);
@@ -69,7 +69,6 @@ const Authentication: FC<Props> = ({
 
   const handleHostInputChange = (event: TargetedEvent<HTMLInputElement>) => {
     const { value } = event.target as HTMLInputElement;
-    // setUrl(value);
     setServer(value);
     application.setHost(value);
   };
@@ -243,42 +242,48 @@ const Authentication: FC<Props> = ({
           </div>
           <form className="sk-panel-form" onSubmit={handleAuthFormSubmit} noValidate>
             <div className="sk-panel-section">
-              <input className="sk-input contrast"
+              <input
-                     name="email"
+                className="sk-input contrast"
-                     type="email"
+                name="email"
-                     value={email}
+                type="email"
-                     onChange={handleEmailChange}
+                value={email}
-                     placeholder="Email"
+                onChange={handleEmailChange}
-                     required
+                placeholder="Email"
-                     spellcheck={false}
+                required
-                     ref={emailInputRef}
+                spellcheck={false}
+                ref={emailInputRef}
               />
-              <input className="sk-input contrast"
+              <input
-                     name="password"
+                className="sk-input contrast"
-                     type="password"
+                name="password"
-                     value={password}
+                type="password"
-                     onChange={handlePasswordChange}
+                value={password}
-                     placeholder="Password"
+                onChange={handlePasswordChange}
-                     required
+                placeholder="Password"
-                     onKeyPress={handleKeyPressKeyDown}
+                required
-                     onKeyDown={handleKeyPressKeyDown}
+                onKeyPress={handleKeyPressKeyDown}
-                     ref={passwordInputRef}
+                onKeyDown={handleKeyPressKeyDown}
+                ref={passwordInputRef}
               />
               {showRegister &&
-              <input className="sk-input contrast"
+              <input
-                     name="password_conf"
+                className="sk-input contrast"
-                     type="password"
+                name="password_conf"
-                     placeholder="Confirm Password" required
+                type="password"
-                     onKeyPress={handleKeyPressKeyDown}
+                placeholder="Confirm Password"
-                     onKeyDown={handleKeyPressKeyDown}
+                required
-                     value={passwordConfirmation}
+                onKeyPress={handleKeyPressKeyDown}
-                     onChange={handlePasswordConfirmationChange}
+                onKeyDown={handleKeyPressKeyDown}
-                     ref={passwordConfirmationInputRef}
+                value={passwordConfirmation}
+                onChange={handlePasswordConfirmationChange}
+                ref={passwordConfirmationInputRef}
               />}
               <div className="sk-panel-row" />
-              <button className="sn-button small info" onClick={() => {
+              <button
-                setShowAdvanced(!showAdvanced);
+                className="sn-button small info"
-              }}>
+                onClick={() => {
+                  setShowAdvanced(!showAdvanced);
+                }}>
                 Advanced Options
               </button>
             </div>
@@ -290,12 +295,13 @@ const Authentication: FC<Props> = ({
                   </div>
                   <div className="bordered-row padded-row">
                     <label className="sk-label">Sync Server Domain</label>
-                    <input className="sk-input sk-base"
+                    <input
-                           name="server"
+                      className="sk-input sk-base"
-                           placeholder="Server URL"
+                      name="server"
-                           onChange={handleHostInputChange}
+                      placeholder="Server URL"
-                           value={server}
+                      onChange={handleHostInputChange}
-                           required
+                      value={server}
+                      required
                     />
                   </div>
                   {showLogin && (

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

@@ -6,13 +6,13 @@ import {
   STRING_UNSUPPORTED_BACKUP_FILE_VERSION,
   StringImportError
 } from '@/strings';
-import { BackupFile } from '@node_modules/@standardnotes/snjs';
+import { BackupFile } from '@standardnotes/snjs';
-import { useState } from '@node_modules/preact/hooks';
+import { useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
-import { JSXInternal } from '@node_modules/preact/src/jsx';
+import { JSXInternal } from 'preact/src/jsx';
 import TargetedEvent = JSXInternal.TargetedEvent;
 import { StateUpdater } from 'preact/hooks';
-import { FC } from 'react';
+import { FunctionalComponent } from 'preact';
 
 type Props = {
   application: WebApplication;
@@ -21,12 +21,12 @@ type Props = {
   setIsBackupEncrypted: StateUpdater<boolean>;
 }
 
-const DataBackup: FC<Props> = ({
+const DataBackup: FunctionalComponent<Props> = ({
-                      application,
+                                                  application,
-                      isBackupEncrypted,
+                                                  isBackupEncrypted,
-                      isEncryptionEnabled,
+                                                  isEncryptionEnabled,
-                      setIsBackupEncrypted
+                                                  setIsBackupEncrypted
-                    }) => {
+                                                }) => {
 
   const [isImportDataLoading, setIsImportDataLoading] = useState(false);
 

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FunctionalComponent } from 'preact';
 
 type Props = {
   isEncryptionEnabled: boolean;
@@ -6,11 +6,11 @@ type Props = {
   encryptionStatusString: string | undefined;
 }
 
-const Encryption: FC<Props> = ({
+const Encryption: FunctionalComponent<Props> = ({
-                      isEncryptionEnabled,
+                                                  isEncryptionEnabled,
-                      notesAndTagsCount,
+                                                  notesAndTagsCount,
-                      encryptionStatusString,
+                                                  encryptionStatusString
-                    }) => {
+                                                }) => {
   const getEncryptionStatusForNotes = () => {
     const length = notesAndTagsCount;
     return `${length}/${length} notes and tags encrypted`;
@@ -31,6 +31,6 @@ const Encryption: FC<Props> = ({
       </p>
     </div>
   );
-}
+};
 
 export default Encryption;

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

@@ -1,4 +1,4 @@
-import { useState } from '@node_modules/preact/hooks';
+import { useState } from 'preact/hooks';
 import { storage, StorageKey } from '@Services/localStorage';
 import { disableErrorReporting, enableErrorReporting, errorReportingId } from '@Services/errorReporting';
 import { alertDialog } from '@Services/alertService';

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

@@ -1,9 +1,8 @@
-import { FunctionalComponent } from 'preact';
 import { AppState } from '@/ui_models/app_state';
-import { StateUpdater, useState } from '@node_modules/preact/hooks';
+import { StateUpdater, useState } from 'preact/hooks';
 import { WebApplication } from '@/ui_models/application';
-import { User } from '@node_modules/@standardnotes/snjs/dist/@types/services/api/responses';
+import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
-import { observer } from '@node_modules/mobx-react-lite';
+import { observer } from 'mobx-react-lite';
 
 type Props = {
   appState: AppState;

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

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import {
   STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_CHANGE,
   STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL, STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED,
@@ -7,13 +6,14 @@ import {
 } from '@/strings';
 import { WebApplication } from '@/ui_models/application';
 import { preventRefreshing } from '@/utils';
-import { JSXInternal } from '@node_modules/preact/src/jsx';
+import { JSXInternal } from 'preact/src/jsx';
 import TargetedEvent = JSXInternal.TargetedEvent;
 import { alertDialog } from '@Services/alertService';
-import { useCallback, useEffect, useRef, useState } from '@node_modules/preact/hooks';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { ApplicationEvent } from '@node_modules/@standardnotes/snjs';
+import { ApplicationEvent } from '@standardnotes/snjs';
 import TargetedMouseEvent = JSXInternal.TargetedMouseEvent;
 import { StateUpdater } from 'preact/hooks';
+import { FunctionalComponent } from 'preact';
 
 type Props = {
   application: WebApplication;
@@ -22,7 +22,7 @@ type Props = {
   setIsBackupEncrypted: StateUpdater<boolean>;
 };
 
-const PasscodeLock: FC<Props> = ({
+const PasscodeLock: FunctionalComponent<Props> = ({
                                    application,
                                    setEncryptionStatusString,
                                    setIsEncryptionEnabled,

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

@@ -1,15 +1,15 @@
 import { WebApplication } from '@/ui_models/application';
-import { FC } from 'react';
+import { FunctionalComponent } from 'preact';
 
 type Props = {
   application: WebApplication;
   protectionsDisabledUntil: string | null;
 };
 
-const Protections: FC<Props> = ({
+const Protections: FunctionalComponent<Props> = ({
-                       application,
+                                                   application,
-                       protectionsDisabledUntil
+                                                   protectionsDisabledUntil
-                     }) => {
+                                                 }) => {
   const enableProtections = () => {
     application.clearProtectionSession();
   };
@@ -41,6 +41,6 @@ const Protections: FC<Props> = ({
       )}
     </div>
   );
-}
+};
 
 export default Protections;

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

@@ -4,7 +4,7 @@ import { AppState } from '@/ui_models/app_state';
 import { WebApplication } from '@/ui_models/application';
 import { useEffect, useState } from 'preact/hooks';
 import { isSameDay } from '@/utils';
-import { ApplicationEvent } from '@node_modules/@standardnotes/snjs';
+import { ApplicationEvent } from '@standardnotes/snjs';
 import { ConfirmSignoutContainer } from '@/components/ConfirmSignoutModal';
 import Authentication from '@/components/AccountMenu/Authentication';
 import Footer from '@/components/AccountMenu/Footer';
@@ -14,7 +14,7 @@ import Protections from '@/components/AccountMenu/Protections';
 import PasscodeLock from '@/components/AccountMenu/PasscodeLock';
 import DataBackup from '@/components/AccountMenu/DataBackup';
 import ErrorReporting from '@/components/AccountMenu/ErrorReporting';
-import { useCallback } from '@node_modules/preact/hooks';
+import { useCallback } from 'preact/hooks';
 
 type Props = {
   appState: AppState;

app/assets/javascripts/components/Icon.tsx

@@ -14,6 +14,7 @@ import TrashSweepIcon from '../../icons/ic-trash-sweep.svg';
 import MoreIcon from '../../icons/ic-more.svg';
 import TuneIcon from '../../icons/ic-tune.svg';
 import { toDirective } from './utils';
+import { FunctionalComponent } from 'preact';
 
 const ICONS = {
   'pencil-off': PencilOffIcon,
@@ -38,7 +39,7 @@ type Props = {
   className: string;
 }
 
-export const Icon: React.FC<Props> = ({ type, className }) => {
+export const Icon: FunctionalComponent<Props> = ({ type, className }) => {
   const IconComponent = ICONS[type];
   return <IconComponent className={`sn-icon ${className}`} />;
 };

app/assets/javascripts/ui_models/app_state/account_menu_state.ts

@@ -1,7 +1,7 @@
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
-import { ContentType } from '@node_modules/@standardnotes/snjs';
+import { ContentType } from '@standardnotes/snjs';
 import { WebApplication } from '@/ui_models/application';
-import { SNItem } from '@node_modules/@standardnotes/snjs/dist/@types/models/core/item';
+import { SNItem } from '@standardnotes/snjs/dist/@types/models/core/item';
 
 export class AccountMenuState {
   show = false;