From adfef38bdc54d656f1b028dab67adff2755e6fdb Mon Sep 17 00:00:00 2001
From: VardanHakobyan <vardan_live@live.com>
Date: Tue, 15 Jun 2021 12:07:03 +0400
Subject: [PATCH] refactor: reviewer's comment - use Preact's
 `FunctionalComponent` instead of React's `FC` to keep the app more
 lightweight - remove `@node_modules/` from imports

---
 .../components/AccountMenu/Authentication.tsx | 112 +++++++++---------
 .../components/AccountMenu/DataBackup.tsx     |  20 ++--
 .../components/AccountMenu/Encryption.tsx     |  14 +--
 .../components/AccountMenu/ErrorReporting.tsx |   2 +-
 .../components/AccountMenu/Footer.tsx         |   7 +-
 .../components/AccountMenu/PasscodeLock.tsx   |  10 +-
 .../components/AccountMenu/Protections.tsx    |  12 +-
 .../components/AccountMenu/index.tsx          |   4 +-
 app/assets/javascripts/components/Icon.tsx    |   3 +-
 .../ui_models/app_state/account_menu_state.ts |   4 +-
 10 files changed, 97 insertions(+), 91 deletions(-)

diff --git a/app/assets/javascripts/components/AccountMenu/Authentication.tsx b/app/assets/javascripts/components/AccountMenu/Authentication.tsx
index 7fbc00c36..1e16c3b81 100644
--- a/app/assets/javascripts/components/AccountMenu/Authentication.tsx
+++ b/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 { FC } from 'react';
+import { FunctionalComponent } from 'preact';
+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> = ({
-                                     application,
-                                     server,
-                                     setServer,
-                                     closeAccountMenu,
-                                     notesAndTagsCount,
-                                     showLogin,
-                                     setShowLogin,
-                                     showRegister,
-                                     setShowRegister,
-                                     user
-                                   }: Props) => {
+const Authentication: FunctionalComponent<Props> = ({
+                                                      application,
+                                                      server,
+                                                      setServer,
+                                                      closeAccountMenu,
+                                                      notesAndTagsCount,
+                                                      showLogin,
+                                                      setShowLogin,
+                                                      showRegister,
+                                                      setShowRegister,
+                                                      user
+                                                    }: 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"
-                     name="email"
-                     type="email"
-                     value={email}
-                     onChange={handleEmailChange}
-                     placeholder="Email"
-                     required
-                     spellcheck={false}
-                     ref={emailInputRef}
+              <input
+                className="sk-input contrast"
+                name="email"
+                type="email"
+                value={email}
+                onChange={handleEmailChange}
+                placeholder="Email"
+                required
+                spellcheck={false}
+                ref={emailInputRef}
               />
-              <input className="sk-input contrast"
-                     name="password"
-                     type="password"
-                     value={password}
-                     onChange={handlePasswordChange}
-                     placeholder="Password"
-                     required
-                     onKeyPress={handleKeyPressKeyDown}
-                     onKeyDown={handleKeyPressKeyDown}
-                     ref={passwordInputRef}
+              <input
+                className="sk-input contrast"
+                name="password"
+                type="password"
+                value={password}
+                onChange={handlePasswordChange}
+                placeholder="Password"
+                required
+                onKeyPress={handleKeyPressKeyDown}
+                onKeyDown={handleKeyPressKeyDown}
+                ref={passwordInputRef}
               />
               {showRegister &&
-              <input className="sk-input contrast"
-                     name="password_conf"
-                     type="password"
-                     placeholder="Confirm Password" required
-                     onKeyPress={handleKeyPressKeyDown}
-                     onKeyDown={handleKeyPressKeyDown}
-                     value={passwordConfirmation}
-                     onChange={handlePasswordConfirmationChange}
-                     ref={passwordConfirmationInputRef}
+              <input
+                className="sk-input contrast"
+                name="password_conf"
+                type="password"
+                placeholder="Confirm Password"
+                required
+                onKeyPress={handleKeyPressKeyDown}
+                onKeyDown={handleKeyPressKeyDown}
+                value={passwordConfirmation}
+                onChange={handlePasswordConfirmationChange}
+                ref={passwordConfirmationInputRef}
               />}
               <div className="sk-panel-row" />
-              <button className="sn-button small info" onClick={() => {
-                setShowAdvanced(!showAdvanced);
-              }}>
+              <button
+                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"
-                           name="server"
-                           placeholder="Server URL"
-                           onChange={handleHostInputChange}
-                           value={server}
-                           required
+                    <input
+                      className="sk-input sk-base"
+                      name="server"
+                      placeholder="Server URL"
+                      onChange={handleHostInputChange}
+                      value={server}
+                      required
                     />
                   </div>
                   {showLogin && (
diff --git a/app/assets/javascripts/components/AccountMenu/DataBackup.tsx b/app/assets/javascripts/components/AccountMenu/DataBackup.tsx
index 33311af1a..29462bb5e 100644
--- a/app/assets/javascripts/components/AccountMenu/DataBackup.tsx
+++ b/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 { useState } from '@node_modules/preact/hooks';
+import { BackupFile } from '@standardnotes/snjs';
+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> = ({
-                      application,
-                      isBackupEncrypted,
-                      isEncryptionEnabled,
-                      setIsBackupEncrypted
-                    }) => {
+const DataBackup: FunctionalComponent<Props> = ({
+                                                  application,
+                                                  isBackupEncrypted,
+                                                  isEncryptionEnabled,
+                                                  setIsBackupEncrypted
+                                                }) => {
 
   const [isImportDataLoading, setIsImportDataLoading] = useState(false);
 
diff --git a/app/assets/javascripts/components/AccountMenu/Encryption.tsx b/app/assets/javascripts/components/AccountMenu/Encryption.tsx
index b90056f98..c27c70f36 100644
--- a/app/assets/javascripts/components/AccountMenu/Encryption.tsx
+++ b/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> = ({
-                      isEncryptionEnabled,
-                      notesAndTagsCount,
-                      encryptionStatusString,
-                    }) => {
+const Encryption: FunctionalComponent<Props> = ({
+                                                  isEncryptionEnabled,
+                                                  notesAndTagsCount,
+                                                  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;
diff --git a/app/assets/javascripts/components/AccountMenu/ErrorReporting.tsx b/app/assets/javascripts/components/AccountMenu/ErrorReporting.tsx
index 65fbee6fc..cfb616af6 100644
--- a/app/assets/javascripts/components/AccountMenu/ErrorReporting.tsx
+++ b/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';
diff --git a/app/assets/javascripts/components/AccountMenu/Footer.tsx b/app/assets/javascripts/components/AccountMenu/Footer.tsx
index 11705f9c2..b9f86a4cb 100644
--- a/app/assets/javascripts/components/AccountMenu/Footer.tsx
+++ b/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 { observer } from '@node_modules/mobx-react-lite';
+import { User } from '@standardnotes/snjs/dist/@types/services/api/responses';
+import { observer } from 'mobx-react-lite';
 
 type Props = {
   appState: AppState;
diff --git a/app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx b/app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx
index ae291e7ba..9f8d29d77 100644
--- a/app/assets/javascripts/components/AccountMenu/PasscodeLock.tsx
+++ b/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 { ApplicationEvent } from '@node_modules/@standardnotes/snjs';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+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,
diff --git a/app/assets/javascripts/components/AccountMenu/Protections.tsx b/app/assets/javascripts/components/AccountMenu/Protections.tsx
index fc472549c..f48b02918 100644
--- a/app/assets/javascripts/components/AccountMenu/Protections.tsx
+++ b/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> = ({
-                       application,
-                       protectionsDisabledUntil
-                     }) => {
+const Protections: FunctionalComponent<Props> = ({
+                                                   application,
+                                                   protectionsDisabledUntil
+                                                 }) => {
   const enableProtections = () => {
     application.clearProtectionSession();
   };
@@ -41,6 +41,6 @@ const Protections: FC<Props> = ({
       )}
     </div>
   );
-}
+};
 
 export default Protections;
diff --git a/app/assets/javascripts/components/AccountMenu/index.tsx b/app/assets/javascripts/components/AccountMenu/index.tsx
index 7a3006fd0..694d8cbab 100644
--- a/app/assets/javascripts/components/AccountMenu/index.tsx
+++ b/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;
diff --git a/app/assets/javascripts/components/Icon.tsx b/app/assets/javascripts/components/Icon.tsx
index 78a874ab4..67c0aa592 100644
--- a/app/assets/javascripts/components/Icon.tsx
+++ b/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}`} />;
 };
diff --git a/app/assets/javascripts/ui_models/app_state/account_menu_state.ts b/app/assets/javascripts/ui_models/app_state/account_menu_state.ts
index 1c0a9acae..0e492a09b 100644
--- a/app/assets/javascripts/ui_models/app_state/account_menu_state.ts
+++ b/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;