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

app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackupProvider.tsx

@@ -1,4 +1,12 @@
-import { useCallback, useEffect, useState } from 'preact/hooks'
+import {
+  useCallback,
+  useEffect,
+  useState,
+  FunctionComponent,
+  KeyboardEventHandler,
+  ChangeEventHandler,
+  MouseEventHandler,
+} from 'react'
 import {
   ButtonType,
   SettingName,
@@ -8,11 +16,10 @@ import {
   OneDriveBackupFrequency,
 } from '@standardnotes/snjs'
 import { WebApplication } from '@/UIModels/Application'
-import { Button } from '@/Components/Button/Button'
+import Button from '@/Components/Button/Button'
 import { isDev, openInNewTab } from '@/Utils'
-import { Subtitle } from '@/Components/Preferences/PreferencesComponents'
+import { Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
 import { KeyboardKey } from '@/Services/IOService'
-import { FunctionComponent } from 'preact'
 
 type Props = {
   application: WebApplication
@@ -20,17 +27,13 @@ type Props = {
   isEntitledToCloudBackups: boolean
 }
 
-export const CloudBackupProvider: FunctionComponent<Props> = ({
-  application,
-  providerName,
-  isEntitledToCloudBackups,
-}) => {
+const CloudBackupProvider: FunctionComponent<Props> = ({ application, providerName, isEntitledToCloudBackups }) => {
   const [authBegan, setAuthBegan] = useState(false)
   const [successfullyInstalled, setSuccessfullyInstalled] = useState(false)
   const [backupFrequency, setBackupFrequency] = useState<string | undefined>(undefined)
   const [confirmation, setConfirmation] = useState('')
 
-  const disable = async (event: Event) => {
+  const disable: MouseEventHandler = async (event) => {
     event.stopPropagation()
 
     try {
@@ -52,7 +55,7 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
     }
   }
 
-  const installIntegration = (event: Event) => {
+  const installIntegration: MouseEventHandler = (event) => {
     if (!isEntitledToCloudBackups) {
       return
     }
@@ -117,7 +120,7 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
     return urlSearchParams.get(integrationTokenKeyInUrl)
   }
 
-  const handleKeyPress = async (event: KeyboardEvent) => {
+  const handleKeyPress: KeyboardEventHandler = async (event) => {
     if (event.key === KeyboardKey.Enter) {
       try {
         const decryptedCode = atob(confirmation)
@@ -145,8 +148,8 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
     }
   }
 
-  const handleChange = (event: Event) => {
-    setConfirmation((event.target as HTMLInputElement).value)
+  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    setConfirmation(event.target.value)
   }
 
   const getIntegrationStatus = useCallback(async () => {
@@ -219,3 +222,5 @@ export const CloudBackupProvider: FunctionComponent<Props> = ({
     </div>
   )
 }
+
+export default CloudBackupProvider

app/assets/javascripts/Components/Preferences/Panes/Backups/CloudBackups/CloudBackups.tsx

@@ -1,14 +1,8 @@
-import { CloudBackupProvider } from './CloudBackupProvider'
-import { useCallback, useEffect, useState } from 'preact/hooks'
+import CloudBackupProvider from './CloudBackupProvider'
+import { useCallback, useEffect, useState, FunctionComponent, Fragment } from 'react'
 import { WebApplication } from '@/UIModels/Application'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
-import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import {
   FeatureStatus,
   FeatureIdentifier,
@@ -16,11 +10,12 @@ import {
   MuteFailedCloudBackupsEmailsOption,
   SettingName,
 } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
 
-import { Switch } from '@/Components/Switch/Switch'
+import Switch from '@/Components/Switch/Switch'
 import { convertStringifiedBooleanToBoolean } from '@/Utils'
 import { STRING_FAILED_TO_UPDATE_USER_SETTING } from '@/Strings'
+import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/PreferencesSegment'
 
 const providerData = [{ name: CloudProvider.Dropbox }, { name: CloudProvider.Google }, { name: CloudProvider.OneDrive }]
 
@@ -28,7 +23,7 @@ type Props = {
   application: WebApplication
 }
 
-export const CloudLink: FunctionComponent<Props> = ({ application }) => {
+const CloudLink: FunctionComponent<Props> = ({ application }) => {
   const [isEntitledToCloudBackups, setIsEntitledToCloudBackups] = useState(false)
   const [isFailedCloudBackupEmailMuted, setIsFailedCloudBackupEmailMuted] = useState(true)
   const [isLoading, setIsLoading] = useState(false)
@@ -121,14 +116,14 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
             <HorizontalSeparator classes={`mt-3 mb-3 ${additionalClass}`} />
             <div>
               {providerData.map(({ name }) => (
-                <>
+                <Fragment key={name}>
                   <CloudBackupProvider
                     application={application}
                     providerName={name}
                     isEntitledToCloudBackups={isEntitledToCloudBackups}
                   />
                   <HorizontalSeparator classes={`mt-3 mb-3 ${additionalClass}`} />
-                </>
+                </Fragment>
               ))}
             </div>
           </div>
@@ -155,3 +150,5 @@ export const CloudLink: FunctionComponent<Props> = ({ application }) => {
     </PreferencesGroup>
   )
 }
+
+export default CloudLink