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/RevisionHistoryModal/HistoryListContainer.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListContainer.tsx
@@ -1,11 +1,10 @@
 import { WebApplication } from '@/UIModels/Application'
 import { Action, ActionVerb, HistoryEntry, NoteHistoryEntry, RevisionListEntry, SNNote } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { StateUpdater, useCallback, useState, useEffect } from 'preact/hooks'
-import { LegacyHistoryList } from './LegacyHistoryList'
-import { RemoteHistoryList } from './RemoteHistoryList'
-import { SessionHistoryList } from './SessionHistoryList'
+import { FunctionComponent, useCallback, useState, useEffect, SetStateAction, Dispatch } from 'react'
+import LegacyHistoryList from './LegacyHistoryList'
+import RemoteHistoryList from './RemoteHistoryList'
+import SessionHistoryList from './SessionHistoryList'
 import { LegacyHistoryEntry, RemoteRevisionListGroup, sortRevisionListIntoGroups } from './utils'

 export enum RevisionListTabType {
@@ -19,169 +18,169 @@ type Props = {
  isFetchingRemoteHistory: boolean
  note: SNNote
  remoteHistory: RemoteRevisionListGroup[] | undefined
-  setIsFetchingSelectedRevision: StateUpdater<boolean>
-  setSelectedRemoteEntry: StateUpdater<RevisionListEntry | undefined>
-  setSelectedRevision: StateUpdater<HistoryEntry | LegacyHistoryEntry | undefined>
-  setShowContentLockedScreen: StateUpdater<boolean>
+  setIsFetchingSelectedRevision: Dispatch<SetStateAction<boolean>>
+  setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
+  setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
+  setShowContentLockedScreen: Dispatch<SetStateAction<boolean>>
 }

-export const HistoryListContainer: FunctionComponent<Props> = observer(
-  ({
-    application,
-    isFetchingRemoteHistory,
-    note,
-    remoteHistory,
-    setIsFetchingSelectedRevision,
-    setSelectedRemoteEntry,
-    setSelectedRevision,
-    setShowContentLockedScreen,
-  }) => {
-    const sessionHistory = sortRevisionListIntoGroups<NoteHistoryEntry>(
-      application.historyManager.sessionHistoryForItem(note) as NoteHistoryEntry[],
-    )
-    const [legacyHistory, setLegacyHistory] = useState<Action[]>()
+const HistoryListContainer: FunctionComponent<Props> = ({
+  application,
+  isFetchingRemoteHistory,
+  note,
+  remoteHistory,
+  setIsFetchingSelectedRevision,
+  setSelectedRemoteEntry,
+  setSelectedRevision,
+  setShowContentLockedScreen,
+}) => {
+  const sessionHistory = sortRevisionListIntoGroups<NoteHistoryEntry>(
+    application.historyManager.sessionHistoryForItem(note) as NoteHistoryEntry[],
+  )
+  const [legacyHistory, setLegacyHistory] = useState<Action[]>()

-    const [selectedTab, setSelectedTab] = useState<RevisionListTabType>(RevisionListTabType.Remote)
+  const [selectedTab, setSelectedTab] = useState<RevisionListTabType>(RevisionListTabType.Remote)

-    useEffect(() => {
-      const fetchLegacyHistory = async () => {
-        const actionExtensions = application.actionsManager.getExtensions()
-        actionExtensions.forEach(async (ext) => {
-          const actionExtension = await application.actionsManager.loadExtensionInContextOfItem(ext, note)
+  useEffect(() => {
+    const fetchLegacyHistory = async () => {
+      const actionExtensions = application.actionsManager.getExtensions()
+      actionExtensions.forEach(async (ext) => {
+        const actionExtension = await application.actionsManager.loadExtensionInContextOfItem(ext, note)

-          if (!actionExtension) {
-            return
-          }
+        if (!actionExtension) {
+          return
+        }

-          const isLegacyNoteHistoryExt = actionExtension?.actions.some((action) => action.verb === ActionVerb.Nested)
+        const isLegacyNoteHistoryExt = actionExtension?.actions.some((action) => action.verb === ActionVerb.Nested)

-          if (!isLegacyNoteHistoryExt) {
-            return
-          }
+        if (!isLegacyNoteHistoryExt) {
+          return
+        }

-          const legacyHistoryEntries = actionExtension.actions.filter((action) => action.subactions?.[0])
+        const legacyHistoryEntries = actionExtension.actions.filter((action) => action.subactions?.[0])

-          setLegacyHistory(legacyHistoryEntries)
-        })
-      }
-
-      fetchLegacyHistory().catch(console.error)
-    }, [application, note])
-
-    const TabButton: FunctionComponent<{
-      type: RevisionListTabType
-    }> = ({ type }) => {
-      const isSelected = selectedTab === type
-
-      return (
-        <button
-          className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:shadow-inner ${
-            isSelected ? 'color-info font-medium shadow-bottom' : 'color-text'
-          }`}
-          onClick={() => {
-            setSelectedTab(type)
-            setSelectedRemoteEntry(undefined)
-          }}
-        >
-          {type}
-        </button>
-      )
+        setLegacyHistory(legacyHistoryEntries)
+      })
    }

-    const fetchAndSetLegacyRevision = useCallback(
-      async (revisionListEntry: Action) => {
-        setSelectedRemoteEntry(undefined)
+    fetchLegacyHistory().catch(console.error)
+  }, [application, note])
+
+  const TabButton: FunctionComponent<{
+    type: RevisionListTabType
+  }> = ({ type }) => {
+    const isSelected = selectedTab === type
+
+    return (
+      <button
+        className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:shadow-inner ${
+          isSelected ? 'color-info font-medium shadow-bottom' : 'color-text'
+        }`}
+        onClick={() => {
+          setSelectedTab(type)
+          setSelectedRemoteEntry(undefined)
+        }}
+      >
+        {type}
+      </button>
+    )
+  }
+
+  const fetchAndSetLegacyRevision = useCallback(
+    async (revisionListEntry: Action) => {
+      setSelectedRemoteEntry(undefined)
+      setSelectedRevision(undefined)
+      setIsFetchingSelectedRevision(true)
+
+      try {
+        if (!revisionListEntry.subactions?.[0]) {
+          throw new Error('Could not find revision action url')
+        }
+
+        const response = await application.actionsManager.runAction(revisionListEntry.subactions[0], note)
+
+        if (!response) {
+          throw new Error('Could not fetch revision')
+        }
+
+        setSelectedRevision(response.item as unknown as HistoryEntry)
+      } catch (error) {
+        console.error(error)
        setSelectedRevision(undefined)
+      } finally {
+        setIsFetchingSelectedRevision(false)
+      }
+    },
+    [application.actionsManager, note, setIsFetchingSelectedRevision, setSelectedRemoteEntry, setSelectedRevision],
+  )
+
+  const fetchAndSetRemoteRevision = useCallback(
+    async (revisionListEntry: RevisionListEntry) => {
+      setShowContentLockedScreen(false)
+
+      if (application.features.hasMinimumRole(revisionListEntry.required_role)) {
        setIsFetchingSelectedRevision(true)
+        setSelectedRevision(undefined)
+        setSelectedRemoteEntry(undefined)

        try {
-          if (!revisionListEntry.subactions?.[0]) {
-            throw new Error('Could not find revision action url')
-          }
-
-          const response = await application.actionsManager.runAction(revisionListEntry.subactions[0], note)
-
-          if (!response) {
-            throw new Error('Could not fetch revision')
-          }
-
-          setSelectedRevision(response.item as unknown as HistoryEntry)
-        } catch (error) {
-          console.error(error)
-          setSelectedRevision(undefined)
+          const remoteRevision = await application.historyManager.fetchRemoteRevision(note, revisionListEntry)
+          setSelectedRevision(remoteRevision)
+          setSelectedRemoteEntry(revisionListEntry)
+        } catch (err) {
+          console.error(err)
        } finally {
          setIsFetchingSelectedRevision(false)
        }
-      },
-      [application.actionsManager, note, setIsFetchingSelectedRevision, setSelectedRemoteEntry, setSelectedRevision],
-    )
+      } else {
+        setShowContentLockedScreen(true)
+        setSelectedRevision(undefined)
+      }
+    },
+    [
+      application,
+      note,
+      setIsFetchingSelectedRevision,
+      setSelectedRemoteEntry,
+      setSelectedRevision,
+      setShowContentLockedScreen,
+    ],
+  )

-    const fetchAndSetRemoteRevision = useCallback(
-      async (revisionListEntry: RevisionListEntry) => {
-        setShowContentLockedScreen(false)
-
-        if (application.features.hasMinimumRole(revisionListEntry.required_role)) {
-          setIsFetchingSelectedRevision(true)
-          setSelectedRevision(undefined)
-          setSelectedRemoteEntry(undefined)
-
-          try {
-            const remoteRevision = await application.historyManager.fetchRemoteRevision(note, revisionListEntry)
-            setSelectedRevision(remoteRevision)
-            setSelectedRemoteEntry(revisionListEntry)
-          } catch (err) {
-            console.error(err)
-          } finally {
-            setIsFetchingSelectedRevision(false)
-          }
-        } else {
-          setShowContentLockedScreen(true)
-          setSelectedRevision(undefined)
-        }
-      },
-      [
-        application,
-        note,
-        setIsFetchingSelectedRevision,
-        setSelectedRemoteEntry,
-        setSelectedRevision,
-        setShowContentLockedScreen,
-      ],
-    )
-
-    return (
-      <div className={'flex flex-col min-w-60 border-0 border-r-1px border-solid border-main overflow-auto h-full'}>
-        <div className="flex border-0 border-b-1 border-solid border-main">
-          <TabButton type={RevisionListTabType.Remote} />
-          <TabButton type={RevisionListTabType.Session} />
-          {legacyHistory && legacyHistory.length > 0 && <TabButton type={RevisionListTabType.Legacy} />}
-        </div>
-        <div className={'min-h-0 overflow-auto py-1.5 h-full'}>
-          {selectedTab === RevisionListTabType.Session && (
-            <SessionHistoryList
-              sessionHistory={sessionHistory}
-              setSelectedRevision={setSelectedRevision}
-              setSelectedRemoteEntry={setSelectedRemoteEntry}
-            />
-          )}
-          {selectedTab === RevisionListTabType.Remote && (
-            <RemoteHistoryList
-              application={application}
-              remoteHistory={remoteHistory}
-              isFetchingRemoteHistory={isFetchingRemoteHistory}
-              fetchAndSetRemoteRevision={fetchAndSetRemoteRevision}
-            />
-          )}
-          {selectedTab === RevisionListTabType.Legacy && (
-            <LegacyHistoryList
-              legacyHistory={legacyHistory}
-              setSelectedRevision={setSelectedRevision}
-              setSelectedRemoteEntry={setSelectedRemoteEntry}
-              fetchAndSetLegacyRevision={fetchAndSetLegacyRevision}
-            />
-          )}
-        </div>
+  return (
+    <div className={'flex flex-col min-w-60 border-0 border-r-1px border-solid border-main overflow-auto h-full'}>
+      <div className="flex border-0 border-b-1 border-solid border-main">
+        <TabButton type={RevisionListTabType.Remote} />
+        <TabButton type={RevisionListTabType.Session} />
+        {legacyHistory && legacyHistory.length > 0 && <TabButton type={RevisionListTabType.Legacy} />}
      </div>
-    )
-  },
-)
+      <div className={'min-h-0 overflow-auto py-1.5 h-full'}>
+        {selectedTab === RevisionListTabType.Session && (
+          <SessionHistoryList
+            sessionHistory={sessionHistory}
+            setSelectedRevision={setSelectedRevision}
+            setSelectedRemoteEntry={setSelectedRemoteEntry}
+          />
+        )}
+        {selectedTab === RevisionListTabType.Remote && (
+          <RemoteHistoryList
+            application={application}
+            remoteHistory={remoteHistory}
+            isFetchingRemoteHistory={isFetchingRemoteHistory}
+            fetchAndSetRemoteRevision={fetchAndSetRemoteRevision}
+          />
+        )}
+        {selectedTab === RevisionListTabType.Legacy && (
+          <LegacyHistoryList
+            legacyHistory={legacyHistory}
+            setSelectedRevision={setSelectedRevision}
+            setSelectedRemoteEntry={setSelectedRemoteEntry}
+            fetchAndSetLegacyRevision={fetchAndSetLegacyRevision}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default observer(HistoryListContainer)
--- a/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/HistoryListItem.tsx
@@ -1,12 +1,12 @@
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'

 type HistoryListItemProps = {
  isSelected: boolean
  onClick: () => void
 }

-export const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({ children, isSelected, onClick }) => {
+const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({ children, isSelected, onClick }) => {
  return (
    <button
      tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
@@ -19,3 +19,5 @@ export const HistoryListItem: FunctionComponent<HistoryListItemProps> = ({ child
    </button>
  )
 }
+
+export default HistoryListItem
--- a/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
@@ -1,18 +1,17 @@
 import { Action, HistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
-import { StateUpdater, useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { Dispatch, FunctionComponent, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
-import { HistoryListItem } from './HistoryListItem'
+import HistoryListItem from './HistoryListItem'
 import { LegacyHistoryEntry } from './utils'

 type Props = {
  legacyHistory: Action[] | undefined
-  setSelectedRevision: StateUpdater<HistoryEntry | LegacyHistoryEntry | undefined>
-  setSelectedRemoteEntry: StateUpdater<RevisionListEntry | undefined>
+  setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
+  setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
  fetchAndSetLegacyRevision: (revisionListEntry: Action) => Promise<void>
 }

-export const LegacyHistoryList: FunctionComponent<Props> = ({
+const LegacyHistoryList: FunctionComponent<Props> = ({
  legacyHistory,
  setSelectedRevision,
  setSelectedRemoteEntry,
@@ -72,3 +71,5 @@ export const LegacyHistoryList: FunctionComponent<Props> = ({
    </div>
  )
 }
+
+export default LegacyHistoryList
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
@@ -1,11 +1,10 @@
 import { WebApplication } from '@/UIModels/Application'
 import { RevisionListEntry } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { Fragment, FunctionComponent } from 'preact'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
-import { Icon } from '@/Components/Icon/Icon'
+import { Fragment, FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Icon from '@/Components/Icon/Icon'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
-import { HistoryListItem } from './HistoryListItem'
+import HistoryListItem from './HistoryListItem'
 import { previewHistoryEntryTitle, RemoteRevisionListGroup } from './utils'

 type RemoteHistoryListProps = {
@@ -15,76 +14,78 @@ type RemoteHistoryListProps = {
  fetchAndSetRemoteRevision: (revisionListEntry: RevisionListEntry) => Promise<void>
 }

-export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = observer(
-  ({ application, remoteHistory, isFetchingRemoteHistory, fetchAndSetRemoteRevision }) => {
-    const remoteHistoryListRef = useRef<HTMLDivElement>(null)
+const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = ({
+  application,
+  remoteHistory,
+  isFetchingRemoteHistory,
+  fetchAndSetRemoteRevision,
+}) => {
+  const remoteHistoryListRef = useRef<HTMLDivElement>(null)

-    useListKeyboardNavigation(remoteHistoryListRef)
+  useListKeyboardNavigation(remoteHistoryListRef)

-    const remoteHistoryLength = useMemo(
-      () => remoteHistory?.map((group) => group.entries).flat().length,
-      [remoteHistory],
-    )
+  const remoteHistoryLength = useMemo(() => remoteHistory?.map((group) => group.entries).flat().length, [remoteHistory])

-    const [selectedEntryUuid, setSelectedEntryUuid] = useState('')
+  const [selectedEntryUuid, setSelectedEntryUuid] = useState('')

-    const firstEntry = useMemo(() => {
-      return remoteHistory?.find((group) => group.entries?.length)?.entries?.[0]
-    }, [remoteHistory])
+  const firstEntry = useMemo(() => {
+    return remoteHistory?.find((group) => group.entries?.length)?.entries?.[0]
+  }, [remoteHistory])

-    const selectFirstEntry = useCallback(() => {
-      if (firstEntry) {
-        setSelectedEntryUuid(firstEntry.uuid)
-        fetchAndSetRemoteRevision(firstEntry).catch(console.error)
-      }
-    }, [fetchAndSetRemoteRevision, firstEntry])
+  const selectFirstEntry = useCallback(() => {
+    if (firstEntry) {
+      setSelectedEntryUuid(firstEntry.uuid)
+      fetchAndSetRemoteRevision(firstEntry).catch(console.error)
+    }
+  }, [fetchAndSetRemoteRevision, firstEntry])

-    useEffect(() => {
-      if (firstEntry && !selectedEntryUuid.length) {
-        selectFirstEntry()
-      }
-    }, [fetchAndSetRemoteRevision, firstEntry, remoteHistory, selectFirstEntry, selectedEntryUuid.length])
+  useEffect(() => {
+    if (firstEntry && !selectedEntryUuid.length) {
+      selectFirstEntry()
+    }
+  }, [fetchAndSetRemoteRevision, firstEntry, remoteHistory, selectFirstEntry, selectedEntryUuid.length])

-    return (
-      <div
-        className={`flex flex-col w-full h-full focus:shadow-none ${
-          isFetchingRemoteHistory || !remoteHistoryLength ? 'items-center justify-center' : ''
-        }`}
-        ref={remoteHistoryListRef}
-      >
-        {isFetchingRemoteHistory && <div className="sk-spinner w-5 h-5 spinner-info"></div>}
-        {remoteHistory?.map((group) => {
-          if (group.entries && group.entries.length) {
-            return (
-              <Fragment key={group.title}>
-                <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-passive-0 select-none">
-                  {group.title}
-                </div>
-                {group.entries.map((entry) => (
-                  <HistoryListItem
-                    key={entry.uuid}
-                    isSelected={selectedEntryUuid === entry.uuid}
-                    onClick={() => {
-                      setSelectedEntryUuid(entry.uuid)
-                      fetchAndSetRemoteRevision(entry).catch(console.error)
-                    }}
-                  >
-                    <div className="flex flex-grow items-center justify-between">
-                      <div>{previewHistoryEntryTitle(entry)}</div>
-                      {!application.features.hasMinimumRole(entry.required_role) && <Icon type="premium-feature" />}
-                    </div>
-                  </HistoryListItem>
-                ))}
-              </Fragment>
-            )
-          } else {
-            return null
-          }
-        })}
-        {!remoteHistoryLength && !isFetchingRemoteHistory && (
-          <div className="color-passive-0 select-none">No remote history found</div>
-        )}
-      </div>
-    )
-  },
-)
+  return (
+    <div
+      className={`flex flex-col w-full h-full focus:shadow-none ${
+        isFetchingRemoteHistory || !remoteHistoryLength ? 'items-center justify-center' : ''
+      }`}
+      ref={remoteHistoryListRef}
+    >
+      {isFetchingRemoteHistory && <div className="sk-spinner w-5 h-5 spinner-info"></div>}
+      {remoteHistory?.map((group) => {
+        if (group.entries && group.entries.length) {
+          return (
+            <Fragment key={group.title}>
+              <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-passive-0 select-none">
+                {group.title}
+              </div>
+              {group.entries.map((entry) => (
+                <HistoryListItem
+                  key={entry.uuid}
+                  isSelected={selectedEntryUuid === entry.uuid}
+                  onClick={() => {
+                    setSelectedEntryUuid(entry.uuid)
+                    fetchAndSetRemoteRevision(entry).catch(console.error)
+                  }}
+                >
+                  <div className="flex flex-grow items-center justify-between">
+                    <div>{previewHistoryEntryTitle(entry)}</div>
+                    {!application.features.hasMinimumRole(entry.required_role) && <Icon type="premium-feature" />}
+                  </div>
+                </HistoryListItem>
+              ))}
+            </Fragment>
+          )
+        } else {
+          return null
+        }
+      })}
+      {!remoteHistoryLength && !isFetchingRemoteHistory && (
+        <div className="color-passive-0 select-none">No remote history found</div>
+      )}
+    </div>
+  )
+}
+
+export default observer(RemoteHistoryList)
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
@@ -1,8 +1,8 @@
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 import { HistoryLockedIllustration } from '@standardnotes/icons'
-import { Button } from '@/Components/Button/Button'
+import Button from '@/Components/Button/Button'

 const getPlanHistoryDuration = (planName: string | undefined) => {
  switch (planName) {
@@ -19,16 +19,18 @@ const getPremiumContentCopy = (planName: string | undefined) => {
  return `Version history is limited to ${getPlanHistoryDuration(planName)} in the ${planName} plan`
 }

-export const RevisionContentLocked: FunctionComponent<{
+type Props = {
  appState: AppState
-}> = observer(({ appState }) => {
+}
+
+const RevisionContentLocked: FunctionComponent<Props> = ({ appState }) => {
  const { userSubscriptionName, isUserSubscriptionExpired, isUserSubscriptionCanceled } = appState.subscription

  return (
    <div className="flex w-full h-full items-center justify-center">
      <div className="flex flex-col items-center text-center max-w-40%">
        <HistoryLockedIllustration />
-        <div class="text-lg font-bold mt-2 mb-1">Can't access this version</div>
+        <div className="text-lg font-bold mt-2 mb-1">Can't access this version</div>
        <div className="mb-4 color-passive-0 leading-140%">
          {getPremiumContentCopy(
            !isUserSubscriptionCanceled && !isUserSubscriptionExpired && userSubscriptionName
@@ -49,4 +51,6 @@ export const RevisionContentLocked: FunctionComponent<{
      </div>
    </div>
  )
-})
+}
+
+export default observer(RevisionContentLocked)
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
@@ -13,12 +13,11 @@ import {
  SNNote,
 } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
-import { Button } from '@/Components/Button/Button'
-import { HistoryListContainer } from './HistoryListContainer'
-import { RevisionContentLocked } from './RevisionContentLocked'
-import { SelectedRevisionContent } from './SelectedRevisionContent'
+import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Button from '@/Components/Button/Button'
+import HistoryListContainer from './HistoryListContainer'
+import RevisionContentLocked from './RevisionContentLocked'
+import SelectedRevisionContent from './SelectedRevisionContent'
 import { LegacyHistoryEntry, RemoteRevisionListGroup, sortRevisionListIntoGroups } from './utils'

 type RevisionHistoryModalProps = {
@@ -209,6 +208,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
        aria-label="Note revision history"
      >
        <DialogContent
+          aria-label="Note revision history"
          className="rounded shadow-overlay"
          style={{
            width: '90%',
@@ -264,7 +264,7 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
                />
              </div>
              {selectedRevision && (
-                <div class="flex items-center">
+                <div className="flex items-center">
                  {selectedRemoteEntry && (
                    <Button className="py-1.35 mr-2.5" onClick={deleteSelectedRevision} variant="normal">
                      {isDeletingRevision ? (
@@ -291,12 +291,14 @@ export const RevisionHistoryModal: FunctionComponent<RevisionHistoryModalProps>
  },
 )

-export const RevisionHistoryModalWrapper: FunctionComponent<RevisionHistoryModalProps> = observer(
-  ({ application, appState }) => {
-    if (!appState.notes.showRevisionHistoryModal) {
-      return null
-    }
+RevisionHistoryModal.displayName = 'RevisionHistoryModal'

-    return <RevisionHistoryModal application={application} appState={appState} />
-  },
-)
+const RevisionHistoryModalWrapper: FunctionComponent<RevisionHistoryModalProps> = ({ application, appState }) => {
+  if (!appState.notes.showRevisionHistoryModal) {
+    return null
+  }
+
+  return <RevisionHistoryModal application={application} appState={appState} />
+}
+
+export default observer(RevisionHistoryModalWrapper)
--- a/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
@@ -2,9 +2,8 @@ import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { HistoryEntry, SNComponent, SNNote } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionComponent } from 'preact'
-import { useEffect, useMemo } from 'preact/hooks'
-import { ComponentView } from '@/Components/ComponentView/ComponentView'
+import { FunctionComponent, useEffect, useMemo } from 'react'
+import ComponentView from '@/Components/ComponentView/ComponentView'
 import { LegacyHistoryEntry } from './utils'

 const ABSOLUTE_CENTER_CLASSNAME = 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'
@@ -17,58 +16,64 @@ type SelectedRevisionContentProps = {
  templateNoteForRevision: SNNote
 }

-export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> = observer(
-  ({ application, appState, selectedRevision, editorForCurrentNote, templateNoteForRevision }) => {
-    const componentViewer = useMemo(() => {
-      if (!editorForCurrentNote) {
-        return undefined
+const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentProps> = ({
+  application,
+  appState,
+  selectedRevision,
+  editorForCurrentNote,
+  templateNoteForRevision,
+}) => {
+  const componentViewer = useMemo(() => {
+    if (!editorForCurrentNote) {
+      return undefined
+    }
+
+    const componentViewer = application.componentManager.createComponentViewer(editorForCurrentNote)
+    componentViewer.setReadonly(true)
+    componentViewer.lockReadonly = true
+    componentViewer.overrideContextItem = templateNoteForRevision
+    return componentViewer
+  }, [application, editorForCurrentNote, templateNoteForRevision])
+
+  useEffect(() => {
+    return () => {
+      if (componentViewer) {
+        application.componentManager.destroyComponentViewer(componentViewer)
      }
+    }
+  }, [application, componentViewer])

-      const componentViewer = application.componentManager.createComponentViewer(editorForCurrentNote)
-      componentViewer.setReadonly(true)
-      componentViewer.lockReadonly = true
-      componentViewer.overrideContextItem = templateNoteForRevision
-      return componentViewer
-    }, [application, editorForCurrentNote, templateNoteForRevision])
-
-    useEffect(() => {
-      return () => {
-        if (componentViewer) {
-          application.componentManager.destroyComponentViewer(componentViewer)
-        }
-      }
-    }, [application, componentViewer])
-
-    return (
-      <div className="flex flex-col h-full overflow-hidden">
-        <div className="p-4 text-base font-bold w-full">
-          <div className="title">{selectedRevision.payload.content.title}</div>
-        </div>
-        {!componentViewer && (
-          <div className="relative flex-grow min-h-0 overflow-hidden">
-            {selectedRevision.payload.content.text.length ? (
-              <textarea
-                readOnly={true}
-                className="w-full h-full resize-none p-4 pt-0 border-0 bg-default color-text text-editor font-editor"
-              >
-                {selectedRevision.payload.content.text}
-              </textarea>
-            ) : (
-              <div className={`color-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
-            )}
-          </div>
-        )}
-        {componentViewer && (
-          <div className="component-view">
-            <ComponentView
-              key={componentViewer.identifier}
-              componentViewer={componentViewer}
-              application={application}
-              appState={appState}
-            />
-          </div>
-        )}
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="p-4 text-base font-bold w-full">
+        <div className="title">{selectedRevision.payload.content.title}</div>
      </div>
-    )
-  },
-)
+      {!componentViewer && (
+        <div className="relative flex-grow min-h-0 overflow-hidden">
+          {selectedRevision.payload.content.text.length ? (
+            <textarea
+              readOnly={true}
+              className="w-full h-full resize-none p-4 pt-0 border-0 bg-default color-text text-editor font-editor"
+            >
+              {selectedRevision.payload.content.text}
+            </textarea>
+          ) : (
+            <div className={`color-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
+          )}
+        </div>
+      )}
+      {componentViewer && (
+        <div className="component-view">
+          <ComponentView
+            key={componentViewer.identifier}
+            componentViewer={componentViewer}
+            application={application}
+            appState={appState}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default observer(SelectedRevisionContent)
--- a/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
@@ -1,17 +1,26 @@
 import { HistoryEntry, NoteHistoryEntry, RevisionListEntry } from '@standardnotes/snjs'
-import { Fragment, FunctionComponent } from 'preact'
-import { StateUpdater, useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import {
+  Dispatch,
+  Fragment,
+  FunctionComponent,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
-import { HistoryListItem } from './HistoryListItem'
+import HistoryListItem from './HistoryListItem'
 import { LegacyHistoryEntry, ListGroup } from './utils'

 type Props = {
  sessionHistory: ListGroup<NoteHistoryEntry>[]
-  setSelectedRevision: StateUpdater<HistoryEntry | LegacyHistoryEntry | undefined>
-  setSelectedRemoteEntry: StateUpdater<RevisionListEntry | undefined>
+  setSelectedRevision: Dispatch<SetStateAction<HistoryEntry | LegacyHistoryEntry | undefined>>
+  setSelectedRemoteEntry: Dispatch<SetStateAction<RevisionListEntry | undefined>>
 }

-export const SessionHistoryList: FunctionComponent<Props> = ({
+const SessionHistoryList: FunctionComponent<Props> = ({
  sessionHistory,
  setSelectedRevision,
  setSelectedRemoteEntry,
@@ -83,3 +92,5 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
    </div>
  )
 }
+
+export default SessionHistoryList