refactor: format and lint codebase (#971)

2022-04-13 22:02:34 +05:30
parent dc9c1ea0fc
commit 8e467f9e6d
367 changed files with 13778 additions and 16093 deletions
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx
@@ -0,0 +1,75 @@
+import { DisplayStringForContentType, SNComponent } from '@standardnotes/snjs'
+import { Button } from '@/Components/Button/Button'
+import { FunctionComponent } from 'preact'
+import { Title, Text, Subtitle, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
+
+export const ConfirmCustomExtension: FunctionComponent<{
+  component: SNComponent
+  callback: (confirmed: boolean) => void
+}> = ({ component, callback }) => {
+  const fields = [
+    {
+      label: 'Name',
+      value: component.package_info.name,
+    },
+    {
+      label: 'Description',
+      value: component.package_info.description,
+    },
+    {
+      label: 'Version',
+      value: component.package_info.version,
+    },
+    {
+      label: 'Hosted URL',
+      value: component.thirdPartyPackageInfo.url,
+    },
+    {
+      label: 'Download URL',
+      value: component.package_info.download_url,
+    },
+    {
+      label: 'Extension Type',
+      value: DisplayStringForContentType(component.content_type),
+    },
+  ]
+
+  return (
+    <PreferencesSegment>
+      <Title>Confirm Extension</Title>
+
+      {fields.map((field) => {
+        if (!field.value) {
+          return undefined
+        }
+        return (
+          <>
+            <Subtitle>{field.label}</Subtitle>
+            <Text className={'wrap'}>{field.value}</Text>
+            <div className="min-h-2" />
+          </>
+        )
+      })}
+
+      <div className="min-h-3" />
+
+      <div className="flex flex-row">
+        <Button
+          className="min-w-20"
+          variant="normal"
+          label="Cancel"
+          onClick={() => callback(false)}
+        />
+
+        <div className="min-w-3" />
+
+        <Button
+          className="min-w-20"
+          variant="normal"
+          label="Install"
+          onClick={() => callback(true)}
+        />
+      </div>
+    </PreferencesSegment>
+  )
+}
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx
@@ -0,0 +1,104 @@
+import { FunctionComponent } from 'preact'
+import { SNComponent } from '@standardnotes/snjs'
+import { PreferencesSegment, SubtitleLight, Title } from '@/Components/Preferences/PreferencesComponents'
+import { Switch } from '@/Components/Switch'
+import { WebApplication } from '@/UIModels/Application'
+import { useState } from 'preact/hooks'
+import { Button } from '@/Components/Button/Button'
+import { RenameExtension } from './RenameExtension'
+
+const UseHosted: FunctionComponent<{
+  offlineOnly: boolean
+  toggleOfllineOnly: () => void
+}> = ({ offlineOnly, toggleOfllineOnly }) => (
+  <div className="flex flex-row">
+    <SubtitleLight className="flex-grow">Use hosted when local is unavailable</SubtitleLight>
+    <Switch onChange={toggleOfllineOnly} checked={!offlineOnly} />
+  </div>
+)
+
+export interface ExtensionItemProps {
+  application: WebApplication
+  extension: SNComponent
+  first: boolean
+  latestVersion: string | undefined
+  uninstall: (extension: SNComponent) => void
+  toggleActivate?: (extension: SNComponent) => void
+}
+
+export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({
+  application,
+  extension,
+  first,
+  uninstall,
+}) => {
+  const [offlineOnly, setOfflineOnly] = useState(extension.offlineOnly ?? false)
+  const [extensionName, setExtensionName] = useState(extension.name)
+
+  const toggleOffllineOnly = () => {
+    const newOfflineOnly = !offlineOnly
+    setOfflineOnly(newOfflineOnly)
+    application.mutator
+      .changeAndSaveItem(extension, (m: any) => {
+        if (m.content == undefined) {
+          m.content = {}
+        }
+        m.content.offlineOnly = newOfflineOnly
+      })
+      .then((item) => {
+        const component = item as SNComponent
+        setOfflineOnly(component.offlineOnly)
+      })
+      .catch((e) => {
+        console.error(e)
+      })
+  }
+
+  const changeExtensionName = (newName: string) => {
+    setExtensionName(newName)
+    application.mutator
+      .changeAndSaveItem(extension, (m: any) => {
+        if (m.content == undefined) {
+          m.content = {}
+        }
+        m.content.name = newName
+      })
+      .then((item) => {
+        const component = item as SNComponent
+        setExtensionName(component.name)
+      })
+      .catch(console.error)
+  }
+
+  const localInstallable = extension.package_info.download_url
+  const isThirParty = application.features.isThirdPartyFeature(extension.identifier)
+
+  return (
+    <PreferencesSegment classes={'mb-5'}>
+      {first && (
+        <>
+          <Title>Extensions</Title>
+        </>
+      )}
+
+      <RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
+      <div className="min-h-2" />
+
+      {isThirParty && localInstallable && (
+        <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />
+      )}
+
+      <>
+        <div className="min-h-2" />
+        <div className="flex flex-row">
+          <Button
+            className="min-w-20"
+            variant="normal"
+            label="Uninstall"
+            onClick={() => uninstall(extension)}
+          />
+        </div>
+      </>
+    </PreferencesSegment>
+  )
+}
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions.ts
@@ -0,0 +1,42 @@
+import { WebApplication } from '@/UIModels/Application'
+import { SNComponent, ClientDisplayableError, FeatureDescription } from '@standardnotes/snjs'
+import { makeAutoObservable, observable } from 'mobx'
+
+export class ExtensionsLatestVersions {
+  static async load(application: WebApplication): Promise<ExtensionsLatestVersions | undefined> {
+    const response = await application.getAvailableSubscriptions()
+
+    if (response instanceof ClientDisplayableError) {
+      return undefined
+    }
+
+    const versionMap: Map<string, string> = new Map()
+    collectFeatures(response.CORE_PLAN?.features as FeatureDescription[], versionMap)
+    collectFeatures(response.PLUS_PLAN?.features as FeatureDescription[], versionMap)
+    collectFeatures(response.PRO_PLAN?.features as FeatureDescription[], versionMap)
+
+    return new ExtensionsLatestVersions(versionMap)
+  }
+
+  constructor(private readonly latestVersionsMap: Map<string, string>) {
+    makeAutoObservable<ExtensionsLatestVersions, 'latestVersionsMap'>(this, {
+      latestVersionsMap: observable.ref,
+    })
+  }
+
+  getVersion(extension: SNComponent): string | undefined {
+    return this.latestVersionsMap.get(extension.package_info.identifier)
+  }
+}
+
+function collectFeatures(
+  features: FeatureDescription[] | undefined,
+  versionMap: Map<string, string>,
+) {
+  if (features == undefined) {
+    return
+  }
+  for (const feature of features) {
+    versionMap.set(feature.identifier, feature.version as string)
+  }
+}
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/RenameExtension.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/RenameExtension.tsx
@@ -0,0 +1,66 @@
+import { FunctionComponent } from 'preact'
+import { useState, useRef, useEffect } from 'preact/hooks'
+
+export const RenameExtension: FunctionComponent<{
+  extensionName: string
+  changeName: (newName: string) => void
+}> = ({ extensionName, changeName }) => {
+  const [isRenaming, setIsRenaming] = useState(false)
+  const [newExtensionName, setNewExtensionName] = useState<string>(extensionName)
+
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isRenaming) {
+      inputRef.current?.focus()
+    }
+  }, [inputRef, isRenaming])
+
+  const startRenaming = () => {
+    setNewExtensionName(extensionName)
+    setIsRenaming(true)
+  }
+
+  const cancelRename = () => {
+    setNewExtensionName(extensionName)
+    setIsRenaming(false)
+  }
+
+  const confirmRename = () => {
+    if (!newExtensionName) {
+      return
+    }
+    changeName(newExtensionName)
+    setIsRenaming(false)
+  }
+
+  return (
+    <div className="flex flex-row mr-3 items-center">
+      <input
+        ref={inputRef}
+        disabled={!isRenaming}
+        autocomplete="off"
+        className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
+        type="text"
+        value={newExtensionName}
+        onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
+      />
+      <div className="min-w-3" />
+      {isRenaming ? (
+        <>
+          <a className="pt-1 cursor-pointer" onClick={confirmRename}>
+            Confirm
+          </a>
+          <div className="min-w-3" />
+          <a className="pt-1 cursor-pointer" onClick={cancelRename}>
+            Cancel
+          </a>
+        </>
+      ) : (
+        <a className="pt-1 cursor-pointer" onClick={startRenaming}>
+          Rename
+        </a>
+      )}
+    </div>
+  )
+}
--- a/app/assets/javascripts/Components/Preferences/Panes/Extensions/index.tsx
+++ b/app/assets/javascripts/Components/Preferences/Panes/Extensions/index.tsx
@@ -0,0 +1,135 @@
+import { ButtonType, ContentType, SNComponent } from '@standardnotes/snjs'
+import { Button } from '@/Components/Button/Button'
+import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+import { WebApplication } from '@/UIModels/Application'
+import { FunctionComponent } from 'preact'
+import { Title, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { observer } from 'mobx-react-lite'
+import { ExtensionsLatestVersions } from './ExtensionsLatestVersions'
+import { ExtensionItem } from './ExtensionItem'
+import { ConfirmCustomExtension } from './ConfirmCustomExtension'
+
+const loadExtensions = (application: WebApplication) =>
+  application.items.getItems([
+    ContentType.ActionsExtension,
+    ContentType.Component,
+    ContentType.Theme,
+  ]) as SNComponent[]
+
+export const Extensions: FunctionComponent<{
+  application: WebApplication
+  extensionsLatestVersions: ExtensionsLatestVersions
+  className?: string
+}> = observer(({ application, extensionsLatestVersions, className = '' }) => {
+  const [customUrl, setCustomUrl] = useState('')
+  const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(
+    undefined,
+  )
+  const [extensions, setExtensions] = useState(loadExtensions(application))
+
+  const confirmableEnd = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (confirmableExtension) {
+      confirmableEnd.current?.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [confirmableExtension, confirmableEnd])
+
+  const uninstallExtension = async (extension: SNComponent) => {
+    application.alertService
+      .confirm(
+        'Are you sure you want to uninstall this extension? Note that extensions managed by your subscription will automatically be re-installed on application restart.',
+        'Uninstall Extension?',
+        'Uninstall',
+        ButtonType.Danger,
+        'Cancel',
+      )
+      .then(async (shouldRemove: boolean) => {
+        if (shouldRemove) {
+          await application.mutator.deleteItem(extension)
+          setExtensions(loadExtensions(application))
+        }
+      })
+      .catch((err: string) => {
+        application.alertService.alert(err).catch(console.error)
+      })
+  }
+
+  const submitExtensionUrl = async (url: string) => {
+    const component = await application.features.downloadExternalFeature(url)
+    if (component) {
+      setConfirmableExtension(component)
+    }
+  }
+
+  const handleConfirmExtensionSubmit = async (confirm: boolean) => {
+    if (confirm) {
+      confirmExtension().catch(console.error)
+    }
+    setConfirmableExtension(undefined)
+    setCustomUrl('')
+  }
+
+  const confirmExtension = async () => {
+    await application.mutator.insertItem(confirmableExtension as SNComponent)
+    application.sync.sync().catch(console.error)
+    setExtensions(loadExtensions(application))
+  }
+
+  const visibleExtensions = extensions.filter((extension) => {
+    return extension.package_info != undefined && !['modal', 'rooms'].includes(extension.area)
+  })
+
+  return (
+    <div className={className}>
+      {visibleExtensions.length > 0 && (
+        <div>
+          {visibleExtensions
+            .sort((e1, e2) => e1.name?.toLowerCase().localeCompare(e2.name?.toLowerCase()))
+            .map((extension, i) => (
+              <ExtensionItem
+                key={extension.uuid}
+                application={application}
+                extension={extension}
+                latestVersion={extensionsLatestVersions.getVersion(extension)}
+                first={i === 0}
+                uninstall={uninstallExtension}
+              />
+            ))}
+        </div>
+      )}
+
+      <div>
+        {!confirmableExtension && (
+          <PreferencesSegment>
+            <Title>Install Custom Extension</Title>
+            <DecoratedInput
+              placeholder={'Enter Extension URL'}
+              value={customUrl}
+              onChange={(value) => {
+                setCustomUrl(value)
+              }}
+            />
+            <div className="min-h-2" />
+            <Button
+              className="min-w-20"
+              variant="normal"
+              label="Install"
+              onClick={() => submitExtensionUrl(customUrl)}
+            />
+          </PreferencesSegment>
+        )}
+        {confirmableExtension && (
+          <PreferencesSegment>
+            <ConfirmCustomExtension
+              component={confirmableExtension}
+              callback={handleConfirmExtensionSubmit}
+            />
+            <div ref={confirmableEnd} />
+          </PreferencesSegment>
+        )}
+      </div>
+    </div>
+  )
+})