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

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

@@ -11,27 +11,22 @@ import {
   STRING_ENC_NOT_ENABLED,
 } from '@/Strings'
 import { BackupFile } from '@standardnotes/snjs'
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import { ChangeEventHandler, MouseEventHandler, useCallback, useEffect, useRef, useState } from 'react'
 import { WebApplication } from '@/UIModels/Application'
-import { JSXInternal } from 'preact/src/jsx'
-import TargetedEvent = JSXInternal.TargetedEvent
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Title,
-  Text,
-  Subtitle,
-} from '@/Components/Preferences/PreferencesComponents'
-import { Button } from '@/Components/Button/Button'
+import { Title, Text, Subtitle } from '@/Components/Preferences/PreferencesComponents/Content'
+import Button from '@/Components/Button/Button'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 
 type Props = {
   application: WebApplication
   appState: AppState
 }
 
-export const DataBackups = observer(({ application, appState }: Props) => {
+const DataBackups = ({ application, appState }: Props) => {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const [isImportDataLoading, setIsImportDataLoading] = useState(false)
   const {
@@ -109,8 +104,8 @@ export const DataBackups = observer(({ application, appState }: Props) => {
     })
   }
 
-  const importFileSelected = async (event: TargetedEvent<HTMLInputElement, Event>) => {
-    const { files } = event.target as HTMLInputElement
+  const importFileSelected: ChangeEventHandler<HTMLInputElement> = async (event) => {
+    const { files } = event.target
 
     if (!files) {
       return
@@ -136,7 +131,7 @@ export const DataBackups = observer(({ application, appState }: Props) => {
   }
 
   // Whenever "Import Backup" is either clicked or key-pressed, proceed the import
-  const handleImportFile = (event: TargetedEvent<HTMLSpanElement, Event> | KeyboardEvent) => {
+  const handleImportFile: MouseEventHandler = (event) => {
     if (event instanceof KeyboardEvent) {
       const { code } = event
 
@@ -158,7 +153,7 @@ export const DataBackups = observer(({ application, appState }: Props) => {
         <PreferencesSegment>
           <Title>Data Backups</Title>
 
-          {!isDesktopApplication() && (
+          {isDesktopApplication() && (
             <Text className="mb-3">
               Backups are automatically created on desktop and can be managed via the "Backups" top-level menu.
             </Text>
@@ -183,10 +178,11 @@ export const DataBackups = observer(({ application, appState }: Props) => {
 
           <Button variant="normal" onClick={downloadDataArchive} label="Download backup" className="mt-2" />
         </PreferencesSegment>
+        <HorizontalSeparator classes="my-4" />
         <PreferencesSegment>
           <Subtitle>Import a previously saved backup file</Subtitle>
 
-          <div class="flex flex-row items-center mt-3">
+          <div className="flex flex-row items-center mt-3">
             <Button variant="normal" label="Import backup" onClick={handleImportFile} />
             <input type="file" ref={fileInputRef} onChange={importFileSelected} className="hidden" />
             {isImportDataLoading && <div className="sk-spinner normal info ml-4" />}
@@ -195,4 +191,6 @@ export const DataBackups = observer(({ application, appState }: Props) => {
       </PreferencesGroup>
     </>
   )
-})
+}
+
+export default observer(DataBackups)