refactor(web): dependency management (#2386)

2023-08-05 12:48:39 -05:00
parent b07da5b663
commit d8d4052a52
274 changed files with 4065 additions and 3873 deletions
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/Encryption.tsx
@@ -1,16 +1,15 @@
 import { STRING_E2E_ENABLED, STRING_ENC_NOT_ENABLED, STRING_LOCAL_ENC_ENABLED } from '@/Constants/Strings'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent } from 'react'
 import { Title, Text } from '../../PreferencesComponents/Content'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 import EncryptionEnabled from './EncryptionEnabled'
+import { useApplication } from '@/Components/ApplicationProvider'

-type Props = { viewControllerManager: ViewControllerManager }
+const Encryption: FunctionComponent = () => {
+  const app = useApplication()

-const Encryption: FunctionComponent<Props> = ({ viewControllerManager }) => {
-  const app = viewControllerManager.application
  const hasUser = app.hasAccount()
  const hasPasscode = app.hasPasscode()
  const isEncryptionEnabled = app.isEncryptionAvailable()
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/ErroredItems.tsx
@@ -14,7 +14,7 @@ const ErroredItems: FunctionComponent = () => {
  const [erroredItems, setErroredItems] = useState(application.items.invalidNonVaultedItems)

  useEffect(() => {
-    return application.streamItems(ContentType.TYPES.Any, () => {
+    return application.items.streamItems(ContentType.TYPES.Any, () => {
      setErroredItems(application.items.invalidNonVaultedItems)
    })
  }, [application])
@@ -83,7 +83,7 @@ const ErroredItems: FunctionComponent = () => {
            className="mr-2 mt-3 min-w-20"
            label="Export all"
            onClick={() => {
-              void application.getArchiveService().downloadEncryptedItems(erroredItems)
+              void application.archiveService.downloadEncryptedItems(erroredItems)
            }}
          />
          <Button
@@ -117,7 +117,7 @@ const ErroredItems: FunctionComponent = () => {
                      className="mr-2 mt-3 min-w-20"
                      label="Export"
                      onClick={() => {
-                        void application.getArchiveService().downloadEncryptedItem(item)
+                        void application.archiveService.downloadEncryptedItem(item)
                      }}
                    />
                    <Button
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/MultitaskingPrivacy.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/MultitaskingPrivacy.tsx
@@ -1,12 +1,12 @@
 import { observer } from 'mobx-react-lite'
 import { WebApplication } from '@/Application/WebApplication'
-import { isIOS } from '@/Utils'
 import { useEffect, useState } from 'react'
 import { MobileDeviceInterface } from '@standardnotes/services'
 import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
 import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
+import { isIOS } from '@standardnotes/ui-services'

 type Props = {
  application: WebApplication
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
@@ -14,7 +14,6 @@ import { alertDialog } from '@standardnotes/ui-services'
 import { FormEvent, useCallback, useEffect, useRef, useState } from 'react'
 import { ApplicationEvent, MobileUnlockTiming } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { Title, Text } from '@/Components/Preferences/PreferencesComponents/Content'
 import Button from '@/Components/Button/Button'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
@@ -24,15 +23,13 @@ import { classNames } from '@standardnotes/utils'

 type Props = {
  application: WebApplication
-  viewControllerManager: ViewControllerManager
 }

-const PasscodeLock = ({ application, viewControllerManager }: Props) => {
+const PasscodeLock = ({ application }: Props) => {
  const isNativeMobileWeb = application.isNativeMobileWeb()
  const keyStorageInfo = StringUtils.keyStorageInfo(application)

-  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } =
-    viewControllerManager.accountMenuController
+  const { setIsEncryptionEnabled, setIsBackupEncrypted, setEncryptionStatusString } = application.accountMenuController

  const passcodeInputRef = useRef<HTMLInputElement>(null)

@@ -58,7 +55,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
  }

  const reloadDesktopAutoLockInterval = useCallback(async () => {
-    const interval = await application.getAutolockService()?.getAutoLockInterval()
+    const interval = await application.autolockService?.getAutoLockInterval()
    setSelectedAutoLockInterval(interval)
  }, [application])

@@ -86,7 +83,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
      return
    }

-    await application.getAutolockService()?.setAutoLockInterval(interval)
+    await application.autolockService?.setAutoLockInterval(interval)
    reloadDesktopAutoLockInterval().catch(console.error)
  }

@@ -99,7 +96,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
    await preventRefreshing(STRING_CONFIRM_APP_QUIT_DURING_PASSCODE_REMOVAL, async () => {
      if (await application.removePasscode()) {
        if (!isNativeMobileWeb) {
-          await application.getAutolockService()?.deleteAutolockPreference()
+          await application.autolockService?.deleteAutolockPreference()
          await reloadDesktopAutoLockInterval()
        }
        refreshEncryptionStatus()
@@ -184,7 +181,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
    setPasscodeConfirmation(undefined)
  }

-  const autolockService = application.getAutolockService()
+  const autolockService = application.autolockService

  return (
    <>
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/Privacy.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/Privacy.tsx
@@ -30,7 +30,7 @@ const Privacy: FunctionComponent<Props> = ({ application }: Props) => {
  }

  const loadSettings = useCallback(async () => {
-    if (!application.getUser()) {
+    if (!application.sessions.getUser()) {
      return
    }
    setIsLoading(true)
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/Security.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/Security.tsx
@@ -1,7 +1,6 @@
 import { NativeFeatureIdentifier, FeatureStatus } from '@standardnotes/snjs'

 import { WebApplication } from '@/Application/WebApplication'
-import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { FunctionComponent } from 'react'
 import TwoFactorAuthWrapper from './TwoFactorAuth/TwoFactorAuthWrapper'
 import { MfaProps } from './TwoFactorAuth/MfaProps'
@@ -16,7 +15,6 @@ import MultitaskingPrivacy from '@/Components/Preferences/Panes/Security/Multita
 import U2FWrapper from './U2F/U2FWrapper'

 interface SecurityProps extends MfaProps {
-  viewControllerManager: ViewControllerManager
  application: WebApplication
 }

@@ -26,23 +24,19 @@ const Security: FunctionComponent<SecurityProps> = (props) => {
  const isU2FFeatureAvailable =
    props.application.features.getFeatureStatus(
      NativeFeatureIdentifier.create(NativeFeatureIdentifier.TYPES.UniversalSecondFactor).getValue(),
-    ) === FeatureStatus.Entitled && props.userProvider.getUser() !== undefined
+    ) === FeatureStatus.Entitled && props.application.sessions.getUser() !== undefined

  return (
    <PreferencesPane>
-      <Encryption viewControllerManager={props.viewControllerManager} />
+      <Encryption />
      {props.application.items.invalidNonVaultedItems.length > 0 && <ErroredItems />}
      <Protections application={props.application} />
-      <TwoFactorAuthWrapper
-        mfaProvider={props.mfaProvider}
-        userProvider={props.userProvider}
-        application={props.application}
-      />
-      {isU2FFeatureAvailable && <U2FWrapper userProvider={props.userProvider} application={props.application} />}
+      <TwoFactorAuthWrapper application={props.application} />
+      {isU2FFeatureAvailable && <U2FWrapper application={props.application} />}
      {isNativeMobileWeb && <MultitaskingPrivacy application={props.application} />}
-      <PasscodeLock viewControllerManager={props.viewControllerManager} application={props.application} />
+      <PasscodeLock application={props.application} />
      {isNativeMobileWeb && <BiometricsLock application={props.application} />}
-      {props.application.getUser() && <Privacy application={props.application} />}
+      {props.application.sessions.getUser() && <Privacy application={props.application} />}
    </PreferencesPane>
  )
 }
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/MfaProps.ts
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/MfaProps.ts
@@ -1,8 +1,5 @@
 import { WebApplication } from '@/Application/WebApplication'
-import { MfaProvider, UserProvider } from '@/Components/Preferences/Providers'

 export interface MfaProps {
-  userProvider: UserProvider
-  mfaProvider: MfaProvider
  application: WebApplication
 }
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorActivation.ts
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorActivation.ts
@@ -1,4 +1,4 @@
-import { MfaProvider } from '@/Components/Preferences/Providers'
+import { MfaServiceInterface } from '@standardnotes/snjs'
 import { action, makeAutoObservable, observable } from 'mobx'

 type ActivationStep = 'scan-qr-code' | 'save-secret-key' | 'verification' | 'success'
@@ -15,7 +15,7 @@ export class TwoFactorActivation {
  private inputOtpToken = ''

  constructor(
-    private mfaProvider: MfaProvider,
+    private mfa: MfaServiceInterface,
    private readonly email: string,
    private readonly _secretKey: string,
    private _cancelActivation: () => void,
@@ -102,7 +102,7 @@ export class TwoFactorActivation {
      return
    }

-    this.mfaProvider
+    this.mfa
      .enableMfa(this.inputSecretKey, this.inputOtpToken)
      .then(
        action(() => {
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuth.ts
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuth.ts
@@ -1,6 +1,6 @@
-import { MfaProvider, UserProvider } from '@/Components/Preferences/Providers'
 import { action, makeAutoObservable, observable } from 'mobx'
 import { TwoFactorActivation } from './TwoFactorActivation'
+import { MfaServiceInterface, SessionsClientInterface } from '@standardnotes/snjs'

 type TwoFactorStatus = 'two-factor-enabled' | TwoFactorActivation | 'two-factor-disabled'

@@ -17,8 +17,8 @@ export class TwoFactorAuth {
  private _errorMessage: string | null

  constructor(
-    private readonly mfaProvider: MfaProvider,
-    private readonly userProvider: UserProvider,
+    private readonly sessions: SessionsClientInterface,
+    private readonly mfa: MfaServiceInterface,
  ) {
    this._errorMessage = null

@@ -40,13 +40,13 @@ export class TwoFactorAuth {
      this._status = 'two-factor-enabled'
      this.fetchStatus()
    })
-    this.mfaProvider
+    this.mfa
      .generateMfaSecret()
      .then(
        action((secret) => {
          this._status = new TwoFactorActivation(
-            this.mfaProvider,
-            this.userProvider.getUser()?.email as string,
+            this.mfa,
+            this.sessions.getUser()?.email as string,
            secret,
            setDisabled,
            setEnabled,
@@ -61,7 +61,7 @@ export class TwoFactorAuth {
  }

  private deactivate2FA(): void {
-    this.mfaProvider
+    this.mfa
      .disableMfa()
      .then(
        action(() => {
@@ -76,7 +76,7 @@ export class TwoFactorAuth {
  }

  isLoggedIn(): boolean {
-    return this.userProvider.getUser() != undefined
+    return this.sessions.getUser() != undefined
  }

  fetchStatus(): void {
@@ -84,7 +84,7 @@ export class TwoFactorAuth {
      return
    }

-    this.mfaProvider
+    this.mfa
      .isMfaActivated()
      .then(
        action((active) => {
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthWrapper.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/TwoFactorAuth/TwoFactorAuthWrapper.tsx
@@ -4,7 +4,7 @@ import { TwoFactorAuth } from './TwoFactorAuth'
 import TwoFactorAuthView from './TwoFactorAuthView/TwoFactorAuthView'

 const TwoFactorAuthWrapper: FunctionComponent<MfaProps> = (props) => {
-  const [auth] = useState(() => new TwoFactorAuth(props.mfaProvider, props.userProvider))
+  const [auth] = useState(() => new TwoFactorAuth(props.application.sessions, props.application.mfa))
  auth.fetchStatus()
  return <TwoFactorAuthView auth={auth} application={props.application} />
 }
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FAddDeviceView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FAddDeviceView.tsx
@@ -3,23 +3,19 @@ import { observer } from 'mobx-react-lite'
 import { AddAuthenticator } from '@standardnotes/snjs'

 import DecoratedInput from '@/Components/Input/DecoratedInput'
-import { UserProvider } from '@/Components/Preferences/Providers'
 import Modal from '@/Components/Modal/Modal'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { useApplication } from '@/Components/ApplicationProvider'

 type Props = {
-  userProvider: UserProvider
  addAuthenticator: AddAuthenticator
  onDeviceAddingModalToggle: (show: boolean) => void
  onDeviceAdded: () => Promise<void>
 }

-const U2FAddDeviceView: FunctionComponent<Props> = ({
-  userProvider,
-  addAuthenticator,
-  onDeviceAddingModalToggle,
-  onDeviceAdded,
-}) => {
+const U2FAddDeviceView: FunctionComponent<Props> = ({ addAuthenticator, onDeviceAddingModalToggle, onDeviceAdded }) => {
+  const application = useApplication()
+
  const [deviceName, setDeviceName] = useState('')
  const [errorMessage, setErrorMessage] = useState('')

@@ -33,7 +29,7 @@ const U2FAddDeviceView: FunctionComponent<Props> = ({
      return
    }

-    const user = userProvider.getUser()
+    const user = application.sessions.getUser()
    if (user === undefined) {
      setErrorMessage('User not found')
      return
@@ -50,7 +46,7 @@ const U2FAddDeviceView: FunctionComponent<Props> = ({

    onDeviceAddingModalToggle(false)
    await onDeviceAdded()
-  }, [deviceName, setErrorMessage, userProvider, addAuthenticator, onDeviceAddingModalToggle, onDeviceAdded])
+  }, [deviceName, setErrorMessage, application, addAuthenticator, onDeviceAddingModalToggle, onDeviceAdded])

  const closeModal = () => {
    onDeviceAddingModalToggle(false)
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FProps.ts
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FProps.ts
@@ -1,7 +1,5 @@
 import { WebApplication } from '@/Application/WebApplication'
-import { UserProvider } from '@/Components/Preferences/Providers'

 export interface U2FProps {
-  userProvider: UserProvider
  application: WebApplication
 }
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FDescription.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FDescription.tsx
@@ -2,17 +2,12 @@ import { FunctionComponent } from 'react'
 import { observer } from 'mobx-react-lite'

 import { Text } from '@/Components/Preferences/PreferencesComponents/Content'
-import { UserProvider } from '@/Components/Preferences/Providers'
 import { useApplication } from '@/Components/ApplicationProvider'

-type Props = {
-  userProvider: UserProvider
-}
-
-const U2FDescription: FunctionComponent<Props> = ({ userProvider }) => {
+const U2FDescription: FunctionComponent = () => {
  const application = useApplication()

-  if (userProvider.getUser() === undefined) {
+  if (application.sessions.getUser() === undefined) {
    return <Text>Sign in or register for an account to configure hardware security keys.</Text>
  }

--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FTitle.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FTitle.tsx
@@ -2,14 +2,12 @@ import { FunctionComponent } from 'react'
 import { observer } from 'mobx-react-lite'

 import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
-import { UserProvider } from '@/Components/Preferences/Providers'
+import { useApplication } from '@/Components/ApplicationProvider'

-type Props = {
-  userProvider: UserProvider
-}
+const U2FTitle: FunctionComponent = () => {
+  const application = useApplication()

-const U2FTitle: FunctionComponent<Props> = ({ userProvider }) => {
-  if (userProvider.getUser() === undefined) {
+  if (application.sessions.getUser() === undefined) {
    return <Title>Hardware security key authentication not available</Title>
  }

--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FView/U2FView.tsx
@@ -4,7 +4,6 @@ import { observer } from 'mobx-react-lite'
 import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 import { WebApplication } from '@/Application/WebApplication'
-import { UserProvider } from '@/Components/Preferences/Providers'

 import U2FTitle from './U2FTitle'
 import U2FDescription from './U2FDescription'
@@ -16,10 +15,9 @@ import RecoveryCodeBanner from '@/Components/RecoveryCodeBanner/RecoveryCodeBann

 type Props = {
  application: WebApplication
-  userProvider: UserProvider
 }

-const U2FView: FunctionComponent<Props> = ({ application, userProvider }) => {
+const U2FView: FunctionComponent<Props> = ({ application }) => {
  const [showDeviceAddingModal, setShowDeviceAddingModal] = useState(false)
  const [devices, setDevices] = useState<Array<{ id: string; name: string }>>([])
  const [error, setError] = useState('')
@@ -48,8 +46,8 @@ const U2FView: FunctionComponent<Props> = ({ application, userProvider }) => {
      <PreferencesGroup>
        <PreferencesSegment>
          <div className="flex flex-col">
-            <U2FTitle userProvider={userProvider} />
-            <U2FDescription userProvider={userProvider} />
+            <U2FTitle />
+            <U2FDescription />
          </div>
        </PreferencesSegment>
        <PreferencesSegment classes="mt-2">
@@ -80,7 +78,6 @@ const U2FView: FunctionComponent<Props> = ({ application, userProvider }) => {
        <U2FAddDeviceView
          onDeviceAddingModalToggle={setShowDeviceAddingModal}
          onDeviceAdded={loadAuthenticatorDevices}
-          userProvider={userProvider}
          addAuthenticator={application.addAuthenticator}
        />
      </ModalOverlay>
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FWrapper.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/U2F/U2FWrapper.tsx
@@ -4,7 +4,7 @@ import { U2FProps } from './U2FProps'
 import U2FView from './U2FView/U2FView'

 const U2FWrapper: FunctionComponent<U2FProps> = (props) => {
-  return <U2FView application={props.application} userProvider={props.userProvider} />
+  return <U2FView application={props.application} />
 }

 export default U2FWrapper