Merge pull request #15610 from overleaf/td-ide-page-editor-events

React IDE page: hook up events

GitOrigin-RevId: 1121a30755fc600023f06925ca3eafa7a8e1ee14

services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx

@@ -1,6 +1,5 @@
 import { useConnectionContext } from '@/features/ide-react/context/connection-context'
-import useEventListener from '@/shared/hooks/use-event-listener'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Alerts } from '@/features/ide-react/components/alerts/alerts'
 import { useLayoutContext } from '@/shared/context/layout-context'
 import MainLayout from '@/features/ide-react/components/layout/main-layout'
@@ -12,12 +11,18 @@ import { useLayoutEventTracking } from '@/features/ide-react/hooks/use-layout-ev
 import useSocketListeners from '@/features/ide-react/hooks/use-socket-listeners'
 import { useModalsContext } from '@/features/ide-react/context/modals-context'
 import { useOpenFile } from '@/features/ide-react/hooks/use-open-file'
+import { useEditingSessionHeartbeat } from '@/features/ide-react/hooks/use-editing-session-heartbeat'
+import { useRegisterUserActivity } from '@/features/ide-react/hooks/use-register-user-activity'
+import { useHasLintingError } from '@/features/ide-react/hooks/use-has-linting-error'
 
 // This is filled with placeholder content while the real content is migrated
 // away from Angular
 export default function IdePage() {
   useLayoutEventTracking()
   useSocketListeners()
+  useEditingSessionHeartbeat()
+  useRegisterUserActivity()
+  useHasLintingError()
 
   // This returns a function to open a binary file but for now we just use the
   // fact that it also patches in ide.binaryFilesManager. Once Angular is gone,
@@ -26,7 +31,7 @@ export default function IdePage() {
   useOpenFile()
 
   const [leftColumnDefaultSize, setLeftColumnDefaultSize] = useState(20)
-  const { connectionState, registerUserActivity } = useConnectionContext()
+  const { connectionState } = useConnectionContext()
   const { showLockEditorMessageModal } = useModalsContext()
 
   // Show modal when editor is forcefully disconnected
@@ -40,19 +45,6 @@ export default function IdePage() {
     showLockEditorMessageModal,
   ])
 
-  // Inform the connection manager when the user is active
-  const listener = useCallback(
-    () => registerUserActivity(),
-    [registerUserActivity]
-  )
-
-  useEventListener('cursor:editor:update', listener)
-
-  useEffect(() => {
-    document.body.addEventListener('click', listener)
-    return () => document.body.removeEventListener('click', listener)
-  }, [listener])
-
   const { chatIsOpen } = useLayoutContext()
 
   const mainContent = (