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

app/assets/javascripts/Hooks/useBeforeUnload.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from '@node_modules/preact/hooks'
+import { useEffect } from 'react'
 
 export const useBeforeUnload = (): void => {
   useEffect(() => {

app/assets/javascripts/Hooks/useCloseOnBlur.ts

@@ -1,4 +1,4 @@
-import { StateUpdater, useCallback, useState } from 'preact/hooks'
+import { Dispatch, SetStateAction, useCallback, useState } from 'react'
 
 /**
  * @returns a callback that will close a dropdown if none of its children has
@@ -8,7 +8,7 @@ import { StateUpdater, useCallback, useState } from 'preact/hooks'
 export function useCloseOnBlur(
   container: { current?: HTMLDivElement | null },
   setOpen: (open: boolean) => void,
-): [(event: { relatedTarget: EventTarget | null }) => void, StateUpdater<boolean>] {
+): [(event: { relatedTarget: EventTarget | null }) => void, Dispatch<SetStateAction<boolean>>] {
   const [locked, setLocked] = useState(false)
   return [
     useCallback(

app/assets/javascripts/Hooks/useCloseOnClickOutside.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'preact/hooks'
+import { useCallback, useEffect } from 'react'
 
 export function useCloseOnClickOutside(container: { current: HTMLDivElement | null }, callback: () => void): void {
   const closeOnClickOutside = useCallback(

app/assets/javascripts/Hooks/useListKeyboardNavigation.ts

@@ -1,8 +1,8 @@
 import { KeyboardKey } from '@/Services/IOService'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
-import { useCallback, useState, useEffect, Ref } from 'preact/hooks'
+import { useCallback, useState, useEffect, RefObject } from 'react'
 
-export const useListKeyboardNavigation = (container: Ref<HTMLElement | null>, initialFocus = 0) => {
+export const useListKeyboardNavigation = (container: RefObject<HTMLElement | null>, initialFocus = 0) => {
   const [listItems, setListItems] = useState<HTMLButtonElement[]>()
   const [focusedItemIndex, setFocusedItemIndex] = useState<number>(initialFocus)
 

app/assets/javascripts/Hooks/usePremiumModal.tsx

@@ -1,10 +1,8 @@
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
 import { observer } from 'mobx-react-lite'
-import { ComponentChildren, FunctionalComponent, createContext } from 'preact'
-import { useCallback, useContext } from 'preact/hooks'
-
-import { PremiumFeaturesModal } from '@/Components/PremiumFeaturesModal/PremiumFeaturesModal'
+import { FunctionComponent, createContext, useCallback, useContext, ReactNode } from 'react'
+import PremiumFeaturesModal from '@/Components/PremiumFeaturesModal/PremiumFeaturesModal'
 
 type PremiumModalContextData = {
   activate: (featureName: string) => void
@@ -27,50 +25,51 @@ export const usePremiumModal = (): PremiumModalContextData => {
 interface Props {
   application: WebApplication
   appState: AppState
-  children: ComponentChildren | ComponentChildren[]
+  children: ReactNode
 }
 
-export const PremiumModalProvider: FunctionalComponent<Props> = observer(
-  ({ application, appState, children }: Props) => {
-    const dealloced = !appState || appState.dealloced == undefined
-    if (dealloced) {
-      return null
-    }
+const PremiumModalProvider: FunctionComponent<Props> = observer(({ application, appState, children }: Props) => {
+  const featureName = appState.features.premiumAlertFeatureName || ''
 
-    const featureName = appState.features.premiumAlertFeatureName || ''
+  const showModal = !!featureName
 
-    const showModal = !!featureName
+  const hasSubscription = Boolean(
+    appState.subscription.userSubscription &&
+      !appState.subscription.isUserSubscriptionExpired &&
+      !appState.subscription.isUserSubscriptionCanceled,
+  )
 
-    const hasSubscription = Boolean(
-      appState.subscription.userSubscription &&
-        !appState.subscription.isUserSubscriptionExpired &&
-        !appState.subscription.isUserSubscriptionCanceled,
-    )
+  const activate = useCallback(
+    (feature: string) => {
+      appState.features.showPremiumAlert(feature).catch(console.error)
+    },
+    [appState],
+  )
 
-    const activate = useCallback(
-      (feature: string) => {
-        appState.features.showPremiumAlert(feature).catch(console.error)
-      },
-      [appState],
-    )
+  const close = useCallback(() => {
+    appState.features.closePremiumAlert()
+  }, [appState])
 
-    const close = useCallback(() => {
-      appState.features.closePremiumAlert()
-    }, [appState])
+  return (
+    <>
+      {showModal && (
+        <PremiumFeaturesModal
+          application={application}
+          featureName={featureName}
+          hasSubscription={hasSubscription}
+          onClose={close}
+          showModal={!!featureName}
+        />
+      )}
+      <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
+    </>
+  )
+})
 
-    return (
-      <>
-        {showModal && (
-          <PremiumFeaturesModal
-            application={application}
-            featureName={featureName}
-            hasSubscription={hasSubscription}
-            onClose={close}
-            showModal={!!featureName}
-          />
-        )}
-        <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
-      </>
-    )
-  },
-)
+PremiumModalProvider.displayName = 'PremiumModalProvider'
+
+const PremiumModalProviderWithDeallocateHandling: FunctionComponent<Props> = ({ application, appState, children }) => {
+  return <PremiumModalProvider application={application} appState={appState} children={children} />
+}
+
+export default observer(PremiumModalProviderWithDeallocateHandling)