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

app/assets/javascripts/Components/ChangeEditor/ChangeEditorButton.tsx

@@ -4,12 +4,10 @@ import { MENU_MARGIN_FROM_APP_BORDER } from '@/Constants'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import VisuallyHidden from '@reach/visually-hidden'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { useRef, useState } from 'preact/hooks'
-import { Icon } from '@/Components/Icon/Icon'
-import { ChangeEditorMenu } from './ChangeEditorMenu'
+import { FunctionComponent, useRef, useState } from 'react'
+import Icon from '@/Components/Icon/Icon'
+import ChangeEditorMenu from './ChangeEditorMenu'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
-import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
 
 type Props = {
   application: WebApplication
@@ -17,98 +15,94 @@ type Props = {
   onClickPreprocessing?: () => Promise<void>
 }
 
-export const ChangeEditorButton: FunctionComponent<Props> = observer(
-  ({ application, appState, onClickPreprocessing }: Props) => {
-    if (isStateDealloced(appState)) {
-      return null
-    }
+const ChangeEditorButton: FunctionComponent<Props> = ({ application, appState, onClickPreprocessing }: Props) => {
+  const note = appState.notes.firstSelectedNote
+  const [isOpen, setIsOpen] = useState(false)
+  const [isVisible, setIsVisible] = useState(false)
+  const [position, setPosition] = useState({
+    top: 0,
+    right: 0,
+  })
+  const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [closeOnBlur] = useCloseOnBlur(containerRef, setIsOpen)
 
-    const note = appState.notes.firstSelectedNote
-    const [isOpen, setIsOpen] = useState(false)
-    const [isVisible, setIsVisible] = useState(false)
-    const [position, setPosition] = useState({
-      top: 0,
-      right: 0,
-    })
-    const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto')
-    const buttonRef = useRef<HTMLButtonElement>(null)
-    const panelRef = useRef<HTMLDivElement>(null)
-    const containerRef = useRef<HTMLDivElement>(null)
-    const [closeOnBlur] = useCloseOnBlur(containerRef, setIsOpen)
+  const toggleChangeEditorMenu = async () => {
+    const rect = buttonRef.current?.getBoundingClientRect()
+    if (rect) {
+      const { clientHeight } = document.documentElement
+      const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
+      const footerHeightInPx = footerElementRect?.height
 
-    const toggleChangeEditorMenu = async () => {
-      const rect = buttonRef.current?.getBoundingClientRect()
-      if (rect) {
-        const { clientHeight } = document.documentElement
-        const footerElementRect = document.getElementById('footer-bar')?.getBoundingClientRect()
-        const footerHeightInPx = footerElementRect?.height
-
-        if (footerHeightInPx) {
-          setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - MENU_MARGIN_FROM_APP_BORDER)
-        }
-
-        setPosition({
-          top: rect.bottom,
-          right: document.body.clientWidth - rect.right,
-        })
-
-        const newOpenState = !isOpen
-        if (newOpenState && onClickPreprocessing) {
-          await onClickPreprocessing()
-        }
-
-        setIsOpen(newOpenState)
-        setTimeout(() => {
-          setIsVisible(newOpenState)
-        })
+      if (footerHeightInPx) {
+        setMaxHeight(clientHeight - rect.bottom - footerHeightInPx - MENU_MARGIN_FROM_APP_BORDER)
       }
-    }
 
-    return (
-      <div ref={containerRef}>
-        <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
-          <DisclosureButton
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
+      setPosition({
+        top: rect.bottom,
+        right: document.body.clientWidth - rect.right,
+      })
+
+      const newOpenState = !isOpen
+      if (newOpenState && onClickPreprocessing) {
+        await onClickPreprocessing()
+      }
+
+      setIsOpen(newOpenState)
+      setTimeout(() => {
+        setIsVisible(newOpenState)
+      })
+    }
+  }
+
+  return (
+    <div ref={containerRef}>
+      <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
+        <DisclosureButton
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') {
+              setIsOpen(false)
+            }
+          }}
+          onBlur={closeOnBlur}
+          ref={buttonRef}
+          className="sn-icon-button border-contrast"
+        >
+          <VisuallyHidden>Change note type</VisuallyHidden>
+          <Icon type="dashboard" className="block" />
+        </DisclosureButton>
+        <DisclosurePanel
+          onKeyDown={(event) => {
+            if (event.key === 'Escape') {
+              setIsOpen(false)
+              buttonRef.current?.focus()
+            }
+          }}
+          ref={panelRef}
+          style={{
+            ...position,
+            maxHeight,
+          }}
+          className="sn-dropdown sn-dropdown--animated min-w-68 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed"
+          onBlur={closeOnBlur}
+        >
+          {isOpen && (
+            <ChangeEditorMenu
+              closeOnBlur={closeOnBlur}
+              application={application}
+              isVisible={isVisible}
+              note={note}
+              closeMenu={() => {
                 setIsOpen(false)
-              }
-            }}
-            onBlur={closeOnBlur}
-            ref={buttonRef}
-            className="sn-icon-button border-contrast"
-          >
-            <VisuallyHidden>Change note type</VisuallyHidden>
-            <Icon type="dashboard" className="block" />
-          </DisclosureButton>
-          <DisclosurePanel
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
-                setIsOpen(false)
-                buttonRef.current?.focus()
-              }
-            }}
-            ref={panelRef}
-            style={{
-              ...position,
-              maxHeight,
-            }}
-            className="sn-dropdown sn-dropdown--animated min-w-68 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed"
-            onBlur={closeOnBlur}
-          >
-            {isOpen && (
-              <ChangeEditorMenu
-                closeOnBlur={closeOnBlur}
-                application={application}
-                isVisible={isVisible}
-                note={note}
-                closeMenu={() => {
-                  setIsOpen(false)
-                }}
-              />
-            )}
-          </DisclosurePanel>
-        </Disclosure>
-      </div>
-    )
-  },
-)
+              }}
+            />
+          )}
+        </DisclosurePanel>
+      </Disclosure>
+    </div>
+  )
+}
+
+export default observer(ChangeEditorButton)

app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -1,6 +1,7 @@
-import { Icon } from '@/Components/Icon/Icon'
-import { Menu } from '@/Components/Menu/Menu'
-import { MenuItem, MenuItemType } from '@/Components/Menu/MenuItem'
+import Icon from '@/Components/Icon/Icon'
+import Menu from '@/Components/Menu/Menu'
+import MenuItem from '@/Components/Menu/MenuItem'
+import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { STRING_EDIT_LOCKED_ATTEMPT } from '@/Strings'
 import { WebApplication } from '@/UIModels/Application'
@@ -13,9 +14,9 @@ import {
   SNNote,
   TransactionalMutation,
 } from '@standardnotes/snjs'
-import { Fragment, FunctionComponent } from 'preact'
-import { useCallback, useEffect, useState } from 'preact/hooks'
-import { EditorMenuItem, EditorMenuGroup } from '@/Components/NotesOptions/ChangeEditorOption'
+import { Fragment, FunctionComponent, useCallback, useEffect, useState } from 'react'
+import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
+import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
 import { createEditorMenuGroups } from './createEditorMenuGroups'
 import { PLAIN_EDITOR_NAME } from '@/Constants'
 import {
@@ -34,7 +35,7 @@ type ChangeEditorMenuProps = {
 
 const getGroupId = (group: EditorMenuGroup) => group.title.toLowerCase().replace(/\s/, '-')
 
-export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
+const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   application,
   closeOnBlur,
   closeMenu,
@@ -189,6 +190,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
                   }
                   return (
                     <MenuItem
+                      key={item.name}
                       type={MenuItemType.RadioButton}
                       onClick={onClickEditorItem}
                       className={
@@ -214,3 +216,5 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
     </Menu>
   )
 }
+
+export default ChangeEditorMenu

app/assets/javascripts/Components/ChangeEditor/createEditorMenuGroups.ts

@@ -8,7 +8,8 @@ import {
   GetFeatures,
   NoteType,
 } from '@standardnotes/snjs'
-import { EditorMenuItem, EditorMenuGroup } from '@/Components/NotesOptions/ChangeEditorOption'
+import { EditorMenuGroup } from '@/Components/NotesOptions/EditorMenuGroup'
+import { EditorMenuItem } from '@/Components/NotesOptions/EditorMenuItem'
 import { PLAIN_EDITOR_NAME } from '@/Constants'
 
 type EditorGroup = NoteType | 'plain' | 'others'