overleaf/services/web/frontend/js/features/ide-react/components/layout/ide-page.tsx
Tim Down 87199c80fe React IDE page: add connection and SyncTex alerts (#15273)
Add connection and SyncTex alerts

GitOrigin-RevId: 5004a0d356d0a0355d125516a18db1f57e617a7f
2023-10-19 08:03:04 +00:00

32 lines
1.1 KiB
TypeScript

import LayoutWithPlaceholders from '@/features/ide-react/components/layout/layout-with-placeholders'
import { useConnectionContext } from '@/features/ide-react/context/connection-context'
import useEventListener from '@/shared/hooks/use-event-listener'
import { useCallback, useEffect } from 'react'
import { Alerts } from '@/features/ide-react/components/alerts/alerts'
// This is filled with placeholder content while the real content is migrated
// away from Angular
export default function IdePage() {
const { registerUserActivity } = useConnectionContext()
// 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])
return (
<>
<Alerts />
{/* TODO: Left menu will go here */}
<LayoutWithPlaceholders shouldPersistLayout />
</>
)
}