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

app/assets/javascripts/Components/FileContextMenu/FileContextMenu.tsx

@@ -3,18 +3,16 @@ import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import { useCloseOnClickOutside } from '@/Hooks/useCloseOnClickOutside'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
-import React from 'react'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { PopoverFileItemAction } from '../AttachedFilesPopover/PopoverFileItemAction'
 import { PopoverTabs } from '../AttachedFilesPopover/PopoverTabs'
-import { FileMenuOptions } from './FileMenuOptions'
+import FileMenuOptions from './FileMenuOptions'
 
 type Props = {
   appState: AppState
 }
 
-export const FileContextMenu: FunctionComponent<Props> = observer(({ appState }) => {
+const FileContextMenu: FunctionComponent<Props> = observer(({ appState }) => {
   const { selectedFiles, showFileContextMenu, setShowFileContextMenu, fileContextMenuLocation } = appState.files
 
   const [contextMenuStyle, setContextMenuStyle] = useState<React.CSSProperties>({
@@ -28,9 +26,6 @@ export const FileContextMenu: FunctionComponent<Props> = observer(({ appState })
   useCloseOnClickOutside(contextMenuRef, () => appState.files.setShowFileContextMenu(false))
 
   const selectedFile = selectedFiles[0]
-  if (!showFileContextMenu || !selectedFile) {
-    return null
-  }
 
   const reloadContextMenuLayout = useCallback(() => {
     const { clientHeight } = document.documentElement
@@ -118,3 +113,19 @@ export const FileContextMenu: FunctionComponent<Props> = observer(({ appState })
     </div>
   )
 })
+
+FileContextMenu.displayName = 'FileContextMenu'
+
+const FileContextMenuWrapper: FunctionComponent<Props> = ({ appState }) => {
+  const { selectedFiles, showFileContextMenu } = appState.files
+
+  const selectedFile = selectedFiles[0]
+
+  if (!showFileContextMenu || !selectedFile) {
+    return null
+  }
+
+  return <FileContextMenu appState={appState} />
+}
+
+export default observer(FileContextMenuWrapper)

app/assets/javascripts/Components/FileContextMenu/FileMenuOptions.tsx

@@ -1,9 +1,9 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
 import { FileItem } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 import { PopoverFileItemAction, PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
-import { Icon } from '@/Components/Icon/Icon'
-import { Switch } from '@/Components/Switch/Switch'
+import Icon from '@/Components/Icon/Icon'
+import Switch from '@/Components/Switch/Switch'
 
 type Props = {
   closeMenu: () => void
@@ -17,7 +17,7 @@ type Props = {
   shouldShowAttachOption: boolean
 }
 
-export const FileMenuOptions: FunctionComponent<Props> = ({
+const FileMenuOptions: FunctionComponent<Props> = ({
   closeMenu,
   closeOnBlur,
   file,
@@ -139,3 +139,5 @@ export const FileMenuOptions: FunctionComponent<Props> = ({
     </>
   )
 }
+
+export default FileMenuOptions