refactor: replace 'preact' with 'react' (#1048)

app/assets/javascripts/Components/Preferences/Panes/Extensions/ConfirmCustomExtension.tsx

@@ -1,10 +1,11 @@
 import { DisplayStringForContentType } from '@standardnotes/snjs'
-import { Button } from '@/Components/Button/Button'
-import { FunctionComponent } from 'preact'
-import { Title, Text, Subtitle, PreferencesSegment } from '@/Components/Preferences/PreferencesComponents'
+import Button from '@/Components/Button/Button'
+import { Fragment, FunctionComponent } from 'react'
+import { Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
 import { AnyExtension } from './AnyExtension'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
-export const ConfirmCustomExtension: FunctionComponent<{
+const ConfirmCustomExtension: FunctionComponent<{
   component: AnyExtension
   callback: (confirmed: boolean) => void
 }> = ({ component, callback }) => {
@@ -44,11 +45,11 @@ export const ConfirmCustomExtension: FunctionComponent<{
           return undefined
         }
         return (
-          <>
+          <Fragment key={field.value}>
             <Subtitle>{field.label}</Subtitle>
             <Text className={'wrap'}>{field.value}</Text>
             <div className="min-h-2" />
-          </>
+          </Fragment>
         )
       })}
 
@@ -64,3 +65,5 @@ export const ConfirmCustomExtension: FunctionComponent<{
     </PreferencesSegment>
   )
 }
+
+export default ConfirmCustomExtension

app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionInfoCell.tsx

@@ -1,11 +1,12 @@
-import { FunctionComponent } from 'preact'
-import { useState, useRef, useEffect } from 'preact/hooks'
+import { FunctionComponent, useState, useRef, useEffect } from 'react'
 
-export const ExtensionInfoCell: FunctionComponent<{
+type Props = {
   extensionName: string
   changeName: (newName: string) => void
   isThirdParty: boolean
-}> = ({ extensionName, changeName, isThirdParty }) => {
+}
+
+const ExtensionInfoCell: FunctionComponent<Props> = ({ extensionName, changeName, isThirdParty }) => {
   const [isRenaming, setIsRenaming] = useState(false)
   const [newExtensionName, setNewExtensionName] = useState<string>(extensionName)
 
@@ -42,7 +43,7 @@ export const ExtensionInfoCell: FunctionComponent<{
       <input
         ref={inputRef}
         disabled={!isRenaming || !renameable}
-        autocomplete="off"
+        autoComplete="off"
         className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
         type="text"
         value={newExtensionName}
@@ -71,3 +72,5 @@ export const ExtensionInfoCell: FunctionComponent<{
     </div>
   )
 }
+
+export default ExtensionInfoCell

app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItem.tsx

@@ -1,45 +1,32 @@
-import { FunctionComponent } from 'preact'
-import { SNComponent } from '@standardnotes/snjs'
-import { PreferencesSegment, SubtitleLight } from '@/Components/Preferences/PreferencesComponents'
-import { Switch } from '@/Components/Switch/Switch'
-import { WebApplication } from '@/UIModels/Application'
-import { useState } from 'preact/hooks'
-import { Button } from '@/Components/Button/Button'
-import { ExtensionInfoCell } from './ExtensionInfoCell'
-import { AnyExtension } from './AnyExtension'
+import { FunctionComponent, useState } from 'react'
+import { ComponentMutator, SNComponent } from '@standardnotes/snjs'
+import { SubtitleLight } from '@/Components/Preferences/PreferencesComponents/Content'
+import Switch from '@/Components/Switch/Switch'
+import Button from '@/Components/Button/Button'
+import ExtensionInfoCell from './ExtensionInfoCell'
+import { ExtensionItemProps } from './ExtensionItemProps'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 const UseHosted: FunctionComponent<{
   offlineOnly: boolean
-  toggleOfllineOnly: () => void
-}> = ({ offlineOnly, toggleOfllineOnly }) => (
+  toggleOfflineOnly: () => void
+}> = ({ offlineOnly, toggleOfflineOnly }) => (
   <div className="flex flex-row">
     <SubtitleLight className="flex-grow">Use hosted when local is unavailable</SubtitleLight>
-    <Switch onChange={toggleOfllineOnly} checked={!offlineOnly} />
+    <Switch onChange={toggleOfflineOnly} checked={!offlineOnly} />
   </div>
 )
 
-export interface ExtensionItemProps {
-  application: WebApplication
-  extension: AnyExtension
-  first: boolean
-  latestVersion: string | undefined
-  uninstall: (extension: AnyExtension) => void
-  toggleActivate?: (extension: AnyExtension) => void
-}
-
-export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, extension, uninstall }) => {
+const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ application, extension, uninstall }) => {
   const [offlineOnly, setOfflineOnly] = useState(extension instanceof SNComponent ? extension.offlineOnly : false)
   const [extensionName, setExtensionName] = useState(extension.displayName)
 
-  const toggleOffllineOnly = () => {
+  const toggleOfflineOnly = () => {
     const newOfflineOnly = !offlineOnly
     setOfflineOnly(newOfflineOnly)
     application.mutator
-      .changeAndSaveItem(extension, (m: any) => {
-        if (m.content == undefined) {
-          m.content = {}
-        }
-        m.content.offlineOnly = newOfflineOnly
+      .changeAndSaveItem<ComponentMutator>(extension, (mutator) => {
+        mutator.offlineOnly = newOfflineOnly
       })
       .then((item) => {
         const component = item as SNComponent
@@ -53,11 +40,8 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ applicati
   const changeExtensionName = (newName: string) => {
     setExtensionName(newName)
     application.mutator
-      .changeAndSaveItem(extension, (m: any) => {
-        if (m.content == undefined) {
-          m.content = {}
-        }
-        m.content.name = newName
+      .changeAndSaveItem<ComponentMutator>(extension, (mutator) => {
+        mutator.name = newName
       })
       .then((item) => {
         const component = item as SNComponent
@@ -76,9 +60,7 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ applicati
 
       <div className="min-h-2" />
 
-      {isThirParty && localInstallable && (
-        <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />
-      )}
+      {isThirParty && localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfflineOnly={toggleOfflineOnly} />}
 
       <>
         <div className="min-h-2" />
@@ -94,3 +76,5 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> = ({ applicati
     </PreferencesSegment>
   )
 }
+
+export default ExtensionItem

app/assets/javascripts/Components/Preferences/Panes/Extensions/ExtensionItemProps.tsx

@@ -0,0 +1,11 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AnyExtension } from './AnyExtension'
+
+export interface ExtensionItemProps {
+  application: WebApplication
+  extension: AnyExtension
+  first: boolean
+  latestVersion: string | undefined
+  uninstall: (extension: AnyExtension) => void
+  toggleActivate?: (extension: AnyExtension) => void
+}

app/assets/javascripts/Components/Preferences/Panes/Extensions/Extensions.tsx

@@ -1,24 +1,26 @@
 import { ButtonType, ContentType, SNComponent } from '@standardnotes/snjs'
-import { Button } from '@/Components/Button/Button'
-import { DecoratedInput } from '@/Components/Input/DecoratedInput'
+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 { FunctionComponent, useEffect, useRef, useState } from 'react'
+import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { observer } from 'mobx-react-lite'
 import { ExtensionsLatestVersions } from './ExtensionsLatestVersions'
-import { ExtensionItem } from './ExtensionItem'
-import { ConfirmCustomExtension } from './ConfirmCustomExtension'
+import ExtensionItem from './ExtensionItem'
+import ConfirmCustomExtension from './ConfirmCustomExtension'
 import { AnyExtension } from './AnyExtension'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 const loadExtensions = (application: WebApplication) =>
   application.items.getItems([ContentType.ActionsExtension, ContentType.Component, ContentType.Theme]) as AnyExtension[]
 
-export const Extensions: FunctionComponent<{
+type Props = {
   application: WebApplication
   extensionsLatestVersions: ExtensionsLatestVersions
   className?: string
-}> = observer(({ application, extensionsLatestVersions, className = '' }) => {
+}
+
+const Extensions: FunctionComponent<Props> = ({ application, extensionsLatestVersions, className = '' }) => {
   const [customUrl, setCustomUrl] = useState('')
   const [confirmableExtension, setConfirmableExtension] = useState<AnyExtension | undefined>(undefined)
   const [extensions, setExtensions] = useState(loadExtensions(application))
@@ -134,4 +136,6 @@ export const Extensions: FunctionComponent<{
       </div>
     </div>
   )
-})
+}
+
+export default observer(Extensions)