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

app/assets/javascripts/Components/PinNoteButton/PinNoteButton.tsx

@@ -1,10 +1,8 @@
 import { AppState } from '@/UIModels/AppState'
 import VisuallyHidden from '@reach/visually-hidden'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { Icon } from '@/Components/Icon/Icon'
-import { useCallback } from 'preact/hooks'
-import { isStateDealloced } from '@/UIModels/AppState/AbstractState'
+import { FunctionComponent, useCallback } from 'react'
+import Icon from '@/Components/Icon/Icon'
 
 type Props = {
   appState: AppState
@@ -12,34 +10,27 @@ type Props = {
   onClickPreprocessing?: () => Promise<void>
 }
 
-export const PinNoteButton: FunctionComponent<Props> = observer(
-  ({ appState, className = '', onClickPreprocessing }: Props) => {
-    if (isStateDealloced(appState)) {
-      return null
+const PinNoteButton: FunctionComponent<Props> = ({ appState, className = '', onClickPreprocessing }: Props) => {
+  const notes = appState.notes.selectedNotes
+  const pinned = notes.some((note) => note.pinned)
+
+  const togglePinned = useCallback(async () => {
+    if (onClickPreprocessing) {
+      await onClickPreprocessing()
     }
+    if (!pinned) {
+      appState.notes.setPinSelectedNotes(true)
+    } else {
+      appState.notes.setPinSelectedNotes(false)
+    }
+  }, [appState, onClickPreprocessing, pinned])
 
-    const notes = appState.notes.selectedNotes
-    const pinned = notes.some((note) => note.pinned)
+  return (
+    <button className={`sn-icon-button border-contrast ${pinned ? 'toggled' : ''} ${className}`} onClick={togglePinned}>
+      <VisuallyHidden>Pin selected notes</VisuallyHidden>
+      <Icon type="pin" className="block" />
+    </button>
+  )
+}
 
-    const togglePinned = useCallback(async () => {
-      if (onClickPreprocessing) {
-        await onClickPreprocessing()
-      }
-      if (!pinned) {
-        appState.notes.setPinSelectedNotes(true)
-      } else {
-        appState.notes.setPinSelectedNotes(false)
-      }
-    }, [appState, onClickPreprocessing, pinned])
-
-    return (
-      <button
-        className={`sn-icon-button border-contrast ${pinned ? 'toggled' : ''} ${className}`}
-        onClick={togglePinned}
-      >
-        <VisuallyHidden>Pin selected notes</VisuallyHidden>
-        <Icon type="pin" className="block" />
-      </button>
-    )
-  },
-)
+export default observer(PinNoteButton)