Merge pull request #35182 from overleaf/ii-use-event-listener

[web] Replace useScopeEventEmitter and useScopeEventListener with useEventListener

GitOrigin-RevId: 8348c8c980b01e172fee3371980176d2b58ceec6

services/web/frontend/js/shared/context/ide-context.tsx

@@ -1,6 +1,5 @@
 import { createContext, FC, useContext, useEffect, useMemo } from 'react'
 import { ScopeValueStore } from '../../../../types/ide/scope-value-store'
-import { ScopeEventEmitter } from '../../../../types/ide/scope-event-emitter'
 import { Socket } from '@/features/ide-react/connection/types/socket'
 import { useUserSettingsContext } from './user-settings-context'
 import { userStyles } from '../utils/styles'
@@ -11,7 +10,6 @@ export type Ide = {
 }
 
 type IdeContextValue = Ide & {
-  scopeEventEmitter: ScopeEventEmitter
   unstableStore: ScopeValueStore
 }
 
@@ -20,10 +18,9 @@ export const IdeContext = createContext<IdeContextValue | undefined>(undefined)
 export const IdeProvider: FC<
   React.PropsWithChildren<{
     ide: Ide
-    scopeEventEmitter: ScopeEventEmitter
     unstableStore: ScopeValueStore
   }>
-> = ({ ide, scopeEventEmitter, unstableStore, children }) => {
+> = ({ ide, unstableStore, children }) => {
   /**
    * Expose unstableStore via `window.overleaf.unstable.store`, so it can be accessed by external extensions.
    *
@@ -65,10 +62,9 @@ export const IdeProvider: FC<
   const value = useMemo<IdeContextValue>(() => {
     return {
       ...ide,
-      scopeEventEmitter,
       unstableStore,
     }
-  }, [ide, scopeEventEmitter, unstableStore])
+  }, [ide, unstableStore])
 
   return <IdeContext.Provider value={value}>{children}</IdeContext.Provider>
 }

services/web/frontend/js/shared/context/layout-context.tsx

@@ -16,7 +16,6 @@ import getMeta from '../../utils/meta'
 import { DetachRole } from './detach-context'
 import { debugConsole } from '@/utils/debugging'
 import { BinaryFile } from '@/features/file-view/types/binary-file'
-import useScopeEventEmitter from '@/shared/hooks/use-scope-event-emitter'
 import useEventListener from '@/shared/hooks/use-event-listener'
 import { isMac } from '@/shared/utils/os'
 import { sendSearchEvent } from '@/features/event-tracking/search-events'
@@ -90,7 +89,6 @@ export const LayoutProvider: FC<React.PropsWithChildren> = ({ children }) => {
   // what to show in the "flat" view (editor or pdf)
   const [view, _setView] = useState<IdeView | null>('editor')
   const [openFile, setOpenFile] = useState<BinaryFile | null>(null)
-  const historyToggleEmitter = useScopeEventEmitter('history:toggle', true)
   const { isOpen: railIsOpen, setIsOpen: setRailIsOpen } = useRailContext()
   const [prevRailIsOpen, setPrevRailIsOpen] = useState(railIsOpen)
   // Whether we came from a file or a document when we left the ide
@@ -102,7 +100,7 @@ export const LayoutProvider: FC<React.PropsWithChildren> = ({ children }) => {
       _setView(oldValue => {
         // ensure that the "history:toggle" event is broadcast when switching in or out of history view
         if (value === 'history' || oldValue === 'history') {
-          historyToggleEmitter()
+          window.dispatchEvent(new CustomEvent('history:toggle'))
         }
 
         if (value === 'history') {
@@ -121,14 +119,7 @@ export const LayoutProvider: FC<React.PropsWithChildren> = ({ children }) => {
         return value
       })
     },
-    [
-      _setView,
-      setRailIsOpen,
-      historyToggleEmitter,
-      prevRailIsOpen,
-      setPrevRailIsOpen,
-      railIsOpen,
-    ]
+    [_setView, setRailIsOpen, prevRailIsOpen, setPrevRailIsOpen, railIsOpen]
   )
 
   const restoreView = useCallback(() => {