refactor: format and lint codebase (#971)

app/assets/javascripts/Hooks/useBeforeUnload.tsx

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

app/assets/javascripts/Hooks/useCloseOnBlur.ts

@@ -0,0 +1,24 @@
+import { StateUpdater, useCallback, useState } from 'preact/hooks'
+
+/**
+ * @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, StateUpdater<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,
+  ]
+}

app/assets/javascripts/Hooks/useCloseOnClickOutside.ts

@@ -0,0 +1,29 @@
+import { useCallback, useEffect } from 'preact/hooks'
+
+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])
+}

app/assets/javascripts/Hooks/useListKeyboardNavigation.ts

@@ -0,0 +1,96 @@
+import { KeyboardKey } from '@/Services/IOService'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
+import { useCallback, useState, useEffect, Ref } from 'preact/hooks'
+
+export const useListKeyboardNavigation = (container: Ref<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])
+}

app/assets/javascripts/Hooks/usePremiumModal.tsx

@@ -0,0 +1,61 @@
+import { WebApplication } from '@/UIModels/Application'
+import { AppState } from '@/UIModels/AppState'
+import { observer } from 'mobx-react-lite'
+import { FunctionalComponent } from 'preact'
+import { useContext } from 'preact/hooks'
+import { createContext } from 'react'
+import { PremiumFeaturesModal } from '@/Components/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
+  appState: AppState
+}
+
+export const PremiumModalProvider: FunctionalComponent<Props> = observer(
+  ({ application, appState, children }) => {
+    const featureName = appState.features._premiumAlertFeatureName
+    const activate = appState.features.showPremiumAlert
+    const close = appState.features.closePremiumAlert
+
+    const showModal = !!featureName
+
+    const hasSubscription = Boolean(
+      appState.subscription.userSubscription &&
+        !appState.subscription.isUserSubscriptionExpired &&
+        !appState.subscription.isUserSubscriptionCanceled,
+    )
+
+    return (
+      <>
+        {showModal && (
+          <PremiumFeaturesModal
+            application={application}
+            featureName={featureName}
+            hasSubscription={hasSubscription}
+            onClose={close}
+            showModal={!!featureName}
+          />
+        )}
+        <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
+      </>
+    )
+  },
+)