Rip out Modal system completely (#9903)

src/state/modals/index.tsx

@@ -1,105 +0,0 @@
-import {createContext, useContext, useEffect, useMemo, useState} from 'react'
-
-import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {useHotkeysContext} from '#/lib/hotkeys'
-
-export interface ContentLanguagesSettingsModal {
-  name: 'content-languages-settings'
-}
-
-/**
- * @deprecated DO NOT ADD NEW MODALS
- */
-export type Modal =
-  // Curation
-  ContentLanguagesSettingsModal
-
-const ModalContext = createContext<{
-  isModalActive: boolean
-  activeModals: Modal[]
-}>({
-  isModalActive: false,
-  activeModals: [],
-})
-ModalContext.displayName = 'ModalContext'
-
-const ModalControlContext = createContext<{
-  openModal: (modal: Modal) => void
-  closeModal: () => boolean
-  closeAllModals: () => boolean
-}>({
-  openModal: () => {},
-  closeModal: () => false,
-  closeAllModals: () => false,
-})
-ModalControlContext.displayName = 'ModalControlContext'
-
-export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [activeModals, setActiveModals] = useState<Modal[]>([])
-  const {disableScope, enableScope} = useHotkeysContext()
-
-  useEffect(() => {
-    if (activeModals.length > 0) {
-      disableScope('global')
-    } else {
-      enableScope('global')
-    }
-  }, [activeModals.length, disableScope, enableScope])
-
-  const openModal = useNonReactiveCallback((modal: Modal) => {
-    setActiveModals(modals => [...modals, modal])
-  })
-
-  const closeModal = useNonReactiveCallback(() => {
-    let wasActive = activeModals.length > 0
-    setActiveModals(modals => {
-      return modals.slice(0, -1)
-    })
-    return wasActive
-  })
-
-  const closeAllModals = useNonReactiveCallback(() => {
-    let wasActive = activeModals.length > 0
-    setActiveModals([])
-    return wasActive
-  })
-
-  const state = useMemo(
-    () => ({
-      isModalActive: activeModals.length > 0,
-      activeModals,
-    }),
-    [activeModals],
-  )
-
-  const methods = useMemo(
-    () => ({
-      openModal,
-      closeModal,
-      closeAllModals,
-    }),
-    [openModal, closeModal, closeAllModals],
-  )
-
-  return (
-    <ModalContext.Provider value={state}>
-      <ModalControlContext.Provider value={methods}>
-        {children}
-      </ModalControlContext.Provider>
-    </ModalContext.Provider>
-  )
-}
-
-/**
- * @deprecated use the dialog system from `#/components/Dialog.tsx`
- */
-export function useModals() {
-  return useContext(ModalContext)
-}
-
-/**
- * @deprecated use the dialog system from `#/components/Dialog.tsx`
- */
-export function useModalControls() {
-  return useContext(ModalControlContext)
-}

src/state/util.ts

@@ -2,7 +2,6 @@ import {useCallback} from 'react'
 
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {useLightboxControls} from '#/components/Lightbox/state'
-import {useModalControls} from './modals'
 import {useComposerControls} from './shell/composer'
 import {useSetDrawerOpen} from './shell/drawer-open'
 
@@ -12,7 +11,6 @@ import {useSetDrawerOpen} from './shell/drawer-open'
  */
 export function useCloseAnyActiveElement() {
   const {closeLightbox} = useLightboxControls()
-  const {closeModal} = useModalControls()
   const {closeComposer} = useComposerControls()
   const {closeAllDialogs} = useDialogStateControlContext()
   const setDrawerOpen = useSetDrawerOpen()
@@ -20,9 +18,6 @@ export function useCloseAnyActiveElement() {
     if (closeLightbox()) {
       return true
     }
-    if (closeModal()) {
-      return true
-    }
     if (closeAllDialogs()) {
       return true
     }
@@ -31,7 +26,7 @@ export function useCloseAnyActiveElement() {
     }
     setDrawerOpen(false)
     return false
-  }, [closeLightbox, closeModal, closeComposer, setDrawerOpen, closeAllDialogs])
+  }, [closeLightbox, closeComposer, setDrawerOpen, closeAllDialogs])
 }
 
 /**
@@ -39,21 +34,13 @@ export function useCloseAnyActiveElement() {
  */
 export function useCloseAllActiveElements() {
   const {closeLightbox} = useLightboxControls()
-  const {closeAllModals} = useModalControls()
   const {closeComposer} = useComposerControls()
   const {closeAllDialogs: closeAlfDialogs} = useDialogStateControlContext()
   const setDrawerOpen = useSetDrawerOpen()
   return useCallback(() => {
     closeLightbox()
-    closeAllModals()
     closeComposer()
     closeAlfDialogs()
     setDrawerOpen(false)
-  }, [
-    closeLightbox,
-    closeAllModals,
-    closeComposer,
-    closeAlfDialogs,
-    setDrawerOpen,
-  ])
+  }, [closeLightbox, closeComposer, closeAlfDialogs, setDrawerOpen])
 }