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

2022-05-30 12:42:52 +05:30
parent e74b4953ea
commit 8c368dd96b
231 changed files with 4794 additions and 4302 deletions
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
@@ -1,9 +1,17 @@
-import { Icon } from '@/Components/Icon/Icon'
-import { MenuItem, MenuItemType } from '@/Components/Menu/MenuItem'
+import Icon from '@/Components/Icon/Icon'
+import MenuItem from '@/Components/Menu/MenuItem'
+import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import { KeyboardKey } from '@/Services/IOService'
 import { ApplicationDescriptor } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
+import {
+  FocusEventHandler,
+  FunctionComponent,
+  KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'

 type Props = {
  descriptor: ApplicationDescriptor
@@ -13,7 +21,7 @@ type Props = {
  hideOptions: boolean
 }

-export const WorkspaceMenuItem: FunctionComponent<Props> = ({
+const WorkspaceMenuItem: FunctionComponent<Props> = ({
  descriptor,
  onClick,
  onDelete,
@@ -29,15 +37,15 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
    }
  }, [isRenaming])

-  const handleInputKeyDown = useCallback((event: KeyboardEvent) => {
+  const handleInputKeyDown: KeyboardEventHandler = useCallback((event) => {
    if (event.key === KeyboardKey.Enter) {
      inputRef.current?.blur()
    }
  }, [])

-  const handleInputBlur = useCallback(
-    (event: FocusEvent) => {
-      const name = (event.target as HTMLInputElement).value
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      const name = event.target.value
      renameDescriptor(name)
      setIsRenaming(false)
    },
@@ -65,7 +73,8 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
        )}
        {descriptor.primary && !hideOptions && (
          <div>
-            <button
+            <a
+              role="button"
              className="w-5 h-5 p-0 mr-3 border-0 bg-transparent hover:bg-contrast cursor-pointer"
              onClick={(e) => {
                e.stopPropagation()
@@ -73,8 +82,9 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
              }}
            >
              <Icon type="pencil" className="sn-icon--mid color-neutral" />
-            </button>
-            <button
+            </a>
+            <a
+              role="button"
              className="w-5 h-5 p-0 border-0 bg-transparent hover:bg-contrast cursor-pointer"
              onClick={(e) => {
                e.stopPropagation()
@@ -82,10 +92,12 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
              }}
            >
              <Icon type="trash" className="sn-icon--mid color-danger" />
-            </button>
+            </a>
          </div>
        )}
      </div>
    </MenuItem>
  )
 }
+
+export default WorkspaceMenuItem
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherMenu.tsx
@@ -2,12 +2,13 @@ import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { AppState } from '@/UIModels/AppState'
 import { ApplicationDescriptor, ApplicationGroupEvent, ButtonType } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useState } from 'preact/hooks'
-import { Icon } from '@/Components/Icon/Icon'
-import { Menu } from '@/Components/Menu/Menu'
-import { MenuItem, MenuItemSeparator, MenuItemType } from '@/Components/Menu/MenuItem'
-import { WorkspaceMenuItem } from './WorkspaceMenuItem'
+import { FunctionComponent, useCallback, useEffect, useState } from 'react'
+import Icon from '@/Components/Icon/Icon'
+import Menu from '@/Components/Menu/Menu'
+import MenuItem from '@/Components/Menu/MenuItem'
+import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
+import { MenuItemType } from '@/Components/Menu/MenuItemType'
+import WorkspaceMenuItem from './WorkspaceMenuItem'

 type Props = {
  mainApplicationGroup: ApplicationGroup
@@ -16,74 +17,79 @@ type Props = {
  hideWorkspaceOptions?: boolean
 }

-export const WorkspaceSwitcherMenu: FunctionComponent<Props> = observer(
-  ({ mainApplicationGroup, appState, isOpen, hideWorkspaceOptions = false }: Props) => {
-    const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>([])
+const WorkspaceSwitcherMenu: FunctionComponent<Props> = ({
+  mainApplicationGroup,
+  appState,
+  isOpen,
+  hideWorkspaceOptions = false,
+}: Props) => {
+  const [applicationDescriptors, setApplicationDescriptors] = useState<ApplicationDescriptor[]>([])

-    useEffect(() => {
-      const applicationDescriptors = mainApplicationGroup.getDescriptors()
-      setApplicationDescriptors(applicationDescriptors)
+  useEffect(() => {
+    const applicationDescriptors = mainApplicationGroup.getDescriptors()
+    setApplicationDescriptors(applicationDescriptors)

-      const removeAppGroupObserver = mainApplicationGroup.addEventObserver((event) => {
-        if (event === ApplicationGroupEvent.DescriptorsDataChanged) {
-          const applicationDescriptors = mainApplicationGroup.getDescriptors()
-          setApplicationDescriptors(applicationDescriptors)
-        }
-      })
-
-      return () => {
-        removeAppGroupObserver()
+    const removeAppGroupObserver = mainApplicationGroup.addEventObserver((event) => {
+      if (event === ApplicationGroupEvent.DescriptorsDataChanged) {
+        const applicationDescriptors = mainApplicationGroup.getDescriptors()
+        setApplicationDescriptors(applicationDescriptors)
      }
-    }, [mainApplicationGroup])
+    })

-    const signoutAll = useCallback(async () => {
-      const confirmed = await appState.application.alertService.confirm(
-        'Are you sure you want to sign out of all workspaces on this device?',
-        undefined,
-        'Sign out all',
-        ButtonType.Danger,
-      )
-      if (!confirmed) {
-        return
-      }
-      mainApplicationGroup.signOutAllWorkspaces().catch(console.error)
-    }, [mainApplicationGroup, appState])
+    return () => {
+      removeAppGroupObserver()
+    }
+  }, [mainApplicationGroup])

-    const destroyWorkspace = useCallback(() => {
-      appState.accountMenu.setSigningOut(true)
-    }, [appState])
-
-    return (
-      <Menu a11yLabel="Workspace switcher menu" className="px-0 focus:shadow-none" isOpen={isOpen}>
-        {applicationDescriptors.map((descriptor) => (
-          <WorkspaceMenuItem
-            key={descriptor.identifier}
-            descriptor={descriptor}
-            hideOptions={hideWorkspaceOptions}
-            onDelete={destroyWorkspace}
-            onClick={() => void mainApplicationGroup.unloadCurrentAndActivateDescriptor(descriptor)}
-            renameDescriptor={(label: string) => mainApplicationGroup.renameDescriptor(descriptor, label)}
-          />
-        ))}
-        <MenuItemSeparator />
-
-        <MenuItem
-          type={MenuItemType.IconButton}
-          onClick={() => {
-            void mainApplicationGroup.unloadCurrentAndCreateNewDescriptor()
-          }}
-        >
-          <Icon type="user-add" className="color-neutral mr-2" />
-          Add another workspace
-        </MenuItem>
-
-        {!hideWorkspaceOptions && (
-          <MenuItem type={MenuItemType.IconButton} onClick={signoutAll}>
-            <Icon type="signOut" className="color-neutral mr-2" />
-            Sign out all workspaces
-          </MenuItem>
-        )}
-      </Menu>
+  const signoutAll = useCallback(async () => {
+    const confirmed = await appState.application.alertService.confirm(
+      'Are you sure you want to sign out of all workspaces on this device?',
+      undefined,
+      'Sign out all',
+      ButtonType.Danger,
    )
-  },
-)
+    if (!confirmed) {
+      return
+    }
+    mainApplicationGroup.signOutAllWorkspaces().catch(console.error)
+  }, [mainApplicationGroup, appState])
+
+  const destroyWorkspace = useCallback(() => {
+    appState.accountMenu.setSigningOut(true)
+  }, [appState])
+
+  return (
+    <Menu a11yLabel="Workspace switcher menu" className="px-0 focus:shadow-none" isOpen={isOpen}>
+      {applicationDescriptors.map((descriptor) => (
+        <WorkspaceMenuItem
+          key={descriptor.identifier}
+          descriptor={descriptor}
+          hideOptions={hideWorkspaceOptions}
+          onDelete={destroyWorkspace}
+          onClick={() => void mainApplicationGroup.unloadCurrentAndActivateDescriptor(descriptor)}
+          renameDescriptor={(label: string) => mainApplicationGroup.renameDescriptor(descriptor, label)}
+        />
+      ))}
+      <MenuItemSeparator />
+
+      <MenuItem
+        type={MenuItemType.IconButton}
+        onClick={() => {
+          void mainApplicationGroup.unloadCurrentAndCreateNewDescriptor()
+        }}
+      >
+        <Icon type="user-add" className="color-neutral mr-2" />
+        Add another workspace
+      </MenuItem>
+
+      {!hideWorkspaceOptions && (
+        <MenuItem type={MenuItemType.IconButton} onClick={signoutAll}>
+          <Icon type="signOut" className="color-neutral mr-2" />
+          Sign out all workspaces
+        </MenuItem>
+      )}
+    </Menu>
+  )
+}
+
+export default observer(WorkspaceSwitcherMenu)
--- a/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceSwitcherOption.tsx
@@ -3,17 +3,16 @@ import { ApplicationGroup } from '@/UIModels/ApplicationGroup'
 import { AppState } from '@/UIModels/AppState'
 import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
-import { Icon } from '@/Components/Icon/Icon'
-import { WorkspaceSwitcherMenu } from './WorkspaceSwitcherMenu'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
+import Icon from '@/Components/Icon/Icon'
+import WorkspaceSwitcherMenu from './WorkspaceSwitcherMenu'

 type Props = {
  mainApplicationGroup: ApplicationGroup
  appState: AppState
 }

-export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(({ mainApplicationGroup, appState }) => {
+const WorkspaceSwitcherOption: FunctionComponent<Props> = ({ mainApplicationGroup, appState }) => {
  const buttonRef = useRef<HTMLButtonElement>(null)
  const menuRef = useRef<HTMLDivElement>(null)
  const [isOpen, setIsOpen] = useState(false)
@@ -64,4 +63,6 @@ export const WorkspaceSwitcherOption: FunctionComponent<Props> = observer(({ mai
      )}
    </>
  )
-})
+}
+
+export default observer(WorkspaceSwitcherOption)