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

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