refactor: repo (#1070)

packages/web/src/javascripts/Hooks/useBeforeUnload.tsx

@@ -0,0 +1,11 @@
+import { useEffect } from 'react'
+
+export const useBeforeUnload = (): void => {
+  useEffect(() => {
+    window.onbeforeunload = () => true
+
+    return () => {
+      window.onbeforeunload = null
+    }
+  }, [])
+}

packages/web/src/javascripts/Hooks/useCloseOnBlur.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction, useCallback, useState } from 'react'
+
+/**
+ * @returns a callback that will close a dropdown if none of its children has
+ * focus. Use the returned function as the onBlur callback of children that need to be
+ * monitored.
+ */
+export function useCloseOnBlur(
+  container: { current?: HTMLDivElement | null },
+  setOpen: (open: boolean) => void,
+): [(event: { relatedTarget: EventTarget | null }) => void, Dispatch<SetStateAction<boolean>>] {
+  const [locked, setLocked] = useState(false)
+  return [
+    useCallback(
+      function onBlur(event: { relatedTarget: EventTarget | null }) {
+        if (!locked && !container.current?.contains(event.relatedTarget as Node)) {
+          setOpen(false)
+        }
+      },
+      [container, setOpen, locked],
+    ),
+    setLocked,
+  ]
+}

packages/web/src/javascripts/Hooks/useCloseOnClickOutside.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect } from 'react'
+
+export function useCloseOnClickOutside(container: { current: HTMLDivElement | null }, callback: () => void): void {
+  const closeOnClickOutside = useCallback(
+    (event: { target: EventTarget | null }) => {
+      if (!container.current) {
+        return
+      }
+      const isDescendantOfContainer = container.current.contains(event.target as Node)
+      const isDescendantOfDialog = (event.target as HTMLElement).closest('[role="dialog"]')
+      if (!isDescendantOfContainer && !isDescendantOfDialog) {
+        callback()
+      }
+    },
+    [container, callback],
+  )
+
+  useEffect(() => {
+    document.addEventListener('click', closeOnClickOutside, { capture: true })
+    return () => {
+      document.removeEventListener('click', closeOnClickOutside, {
+        capture: true,
+      })
+    }
+  }, [closeOnClickOutside])
+}

packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts

@@ -0,0 +1,88 @@
+import { KeyboardKey } from '@/Services/IOService'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import { useCallback, useState, useEffect, RefObject } from 'react'
+
+export const useListKeyboardNavigation = (container: RefObject<HTMLElement | null>, initialFocus = 0) => {
+  const [listItems, setListItems] = useState<HTMLButtonElement[]>()
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number>(initialFocus)
+
+  const focusItemWithIndex = useCallback(
+    (index: number, items?: HTMLButtonElement[]) => {
+      setFocusedItemIndex(index)
+      if (items && items.length > 0) {
+        items[index]?.focus()
+      } else {
+        listItems?.[index]?.focus()
+      }
+    },
+    [listItems],
+  )
+
+  useEffect(() => {
+    if (container.current) {
+      container.current.tabIndex = FOCUSABLE_BUT_NOT_TABBABLE
+      setListItems(Array.from(container.current.querySelectorAll('button')))
+    }
+  }, [container])
+
+  const keyDownHandler = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === KeyboardKey.Up || e.key === KeyboardKey.Down) {
+        e.preventDefault()
+      } else {
+        return
+      }
+
+      if (!listItems?.length) {
+        setListItems(Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>))
+      }
+
+      if (listItems) {
+        if (e.key === KeyboardKey.Up) {
+          let previousIndex = focusedItemIndex - 1
+          if (previousIndex < 0) {
+            previousIndex = listItems.length - 1
+          }
+          focusItemWithIndex(previousIndex)
+        }
+
+        if (e.key === KeyboardKey.Down) {
+          let nextIndex = focusedItemIndex + 1
+          if (nextIndex > listItems.length - 1) {
+            nextIndex = 0
+          }
+          focusItemWithIndex(nextIndex)
+        }
+      }
+    },
+    [container, focusItemWithIndex, focusedItemIndex, listItems],
+  )
+
+  const FIRST_ITEM_FOCUS_TIMEOUT = 20
+
+  const containerFocusHandler = useCallback(() => {
+    let temporaryItems = listItems && listItems?.length > 0 ? listItems : []
+    if (!temporaryItems.length) {
+      temporaryItems = Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
+      setListItems(temporaryItems)
+    }
+    if (temporaryItems.length > 0) {
+      const selectedItemIndex = Array.from(temporaryItems).findIndex((item) => item.dataset.selected)
+      const indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : initialFocus
+      setTimeout(() => {
+        focusItemWithIndex(indexToFocus, temporaryItems)
+      }, FIRST_ITEM_FOCUS_TIMEOUT)
+    }
+  }, [container, focusItemWithIndex, initialFocus, listItems])
+
+  useEffect(() => {
+    const containerElement = container.current
+    containerElement?.addEventListener('focus', containerFocusHandler)
+    containerElement?.addEventListener('keydown', keyDownHandler)
+
+    return () => {
+      containerElement?.removeEventListener('focus', containerFocusHandler)
+      containerElement?.removeEventListener('keydown', keyDownHandler)
+    }
+  }, [container, containerFocusHandler, keyDownHandler])
+}

packages/web/src/javascripts/Hooks/usePremiumModal.tsx

@@ -0,0 +1,83 @@
+import { WebApplication } from '@/Application/Application'
+import { ViewControllerManager } from '@/Services/ViewControllerManager'
+import { observer } from 'mobx-react-lite'
+import { FunctionComponent, createContext, useCallback, useContext, ReactNode } from 'react'
+import PremiumFeaturesModal from '@/Components/PremiumFeaturesModal/PremiumFeaturesModal'
+
+type PremiumModalContextData = {
+  activate: (featureName: string) => void
+}
+
+const PremiumModalContext = createContext<PremiumModalContextData | null>(null)
+
+const PremiumModalProvider_ = PremiumModalContext.Provider
+
+export const usePremiumModal = (): PremiumModalContextData => {
+  const value = useContext(PremiumModalContext)
+
+  if (!value) {
+    throw new Error('invalid PremiumModal context')
+  }
+
+  return value
+}
+
+interface Props {
+  application: WebApplication
+  viewControllerManager: ViewControllerManager
+  children: ReactNode
+}
+
+const PremiumModalProvider: FunctionComponent<Props> = observer(
+  ({ application, viewControllerManager, children }: Props) => {
+    const featureName = viewControllerManager.featuresController.premiumAlertFeatureName || ''
+
+    const showModal = !!featureName
+
+    const hasSubscription = Boolean(
+      viewControllerManager.subscriptionController.userSubscription &&
+        !viewControllerManager.subscriptionController.isUserSubscriptionExpired &&
+        !viewControllerManager.subscriptionController.isUserSubscriptionCanceled,
+    )
+
+    const activate = useCallback(
+      (feature: string) => {
+        viewControllerManager.featuresController.showPremiumAlert(feature).catch(console.error)
+      },
+      [viewControllerManager],
+    )
+
+    const close = useCallback(() => {
+      viewControllerManager.featuresController.closePremiumAlert()
+    }, [viewControllerManager])
+
+    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,
+  viewControllerManager,
+  children,
+}) => {
+  return (
+    <PremiumModalProvider application={application} viewControllerManager={viewControllerManager} children={children} />
+  )
+}
+
+export default observer(PremiumModalProviderWithDeallocateHandling)