diff --git a/assets/js/hooks/Mapper/MapRoot.tsx b/assets/js/hooks/Mapper/MapRoot.tsx index 509b3717..a54b795d 100644 --- a/assets/js/hooks/Mapper/MapRoot.tsx +++ b/assets/js/hooks/Mapper/MapRoot.tsx @@ -1,14 +1,14 @@ -import { ErrorBoundary } from 'react-error-boundary'; import { PrimeReactProvider } from 'primereact/api'; +import { ErrorBoundary } from 'react-error-boundary'; -import { ReactFlowProvider } from 'reactflow'; import { MapHandlers } from '@/hooks/Mapper/types/mapHandlers.ts'; import { ErrorInfo, useCallback, useEffect, useRef } from 'react'; +import { ReactFlowProvider } from 'reactflow'; import { useMapperHandlers } from './useMapperHandlers'; -import './common-styles/main.scss'; -import { MapRootProvider } from '@/hooks/Mapper/mapRootProvider'; import { MapRootContent } from '@/hooks/Mapper/components/mapRootContent/MapRootContent.tsx'; +import { MapRootProvider } from '@/hooks/Mapper/mapRootProvider'; +import './common-styles/main.scss'; const ErrorFallback = () => { return
; @@ -20,7 +20,7 @@ export default function MapRoot({ hooks }) { const mapperHandlerRefs = useRef([providerRef]); - const { handleCommand, handleMapEvent, handleMapEvents } = useMapperHandlers(mapperHandlerRefs.current, hooksRef); + const { handleCommand, handleMapEvent } = useMapperHandlers(mapperHandlerRefs.current, hooksRef); const logError = useCallback((error: Error, info: ErrorInfo) => { if (!hooksRef.current) { @@ -35,7 +35,6 @@ export default function MapRoot({ hooks }) { } hooksRef.current.handleEvent('map_event', handleMapEvent); - hooksRef.current.handleEvent('map_events', handleMapEvents); }, []); return ( diff --git a/assets/js/hooks/Mapper/useMapperHandlers.ts b/assets/js/hooks/Mapper/useMapperHandlers.ts index 3e319491..ec1709ce 100644 --- a/assets/js/hooks/Mapper/useMapperHandlers.ts +++ b/assets/js/hooks/Mapper/useMapperHandlers.ts @@ -1,5 +1,8 @@ -import { RefObject, useCallback } from 'react'; import { MapHandlers } from '@/hooks/Mapper/types/mapHandlers.ts'; +import { RefObject, useCallback } from 'react'; + +// Force reload the page after 30 minutes of inactivity +const FORCE_PAGE_RELOAD_TIMEOUT = 1000 * 60 * 30; export const useMapperHandlers = (handlerRefs: RefObject[], hooksRef: RefObject) => { const handleCommand = useCallback( @@ -13,7 +16,13 @@ export const useMapperHandlers = (handlerRefs: RefObject[], hooksRe [hooksRef.current], ); - const handleMapEvent = useCallback(({ type, body }) => { + const handleMapEvent = useCallback(({ type, body, timestamp }) => { + const timeDiff = Date.now() - Date.parse(timestamp); + // If the event is older than the timeout, force reload the page + if (timeDiff > FORCE_PAGE_RELOAD_TIMEOUT) { + window.location.reload(); + return; + } handlerRefs.forEach(ref => { if (!ref.current) { return; @@ -23,14 +32,5 @@ export const useMapperHandlers = (handlerRefs: RefObject[], hooksRe }); }, []); - const handleMapEvents = useCallback( - events => { - events.forEach(event => { - handleMapEvent(event); - }); - }, - [handleMapEvent], - ); - - return { handleCommand, handleMapEvent, handleMapEvents }; + return { handleCommand, handleMapEvent }; }; diff --git a/lib/wanderer_app_web/live/map/map_event_handler.ex b/lib/wanderer_app_web/live/map/map_event_handler.ex index dbb08c81..5d32dea3 100644 --- a/lib/wanderer_app_web/live/map/map_event_handler.ex +++ b/lib/wanderer_app_web/live/map/map_event_handler.ex @@ -279,7 +279,8 @@ defmodule WandererAppWeb.MapEventHandler do socket |> Phoenix.LiveView.Utils.push_event("map_event", %{ type: type, - body: body + body: body, + timestamp: DateTime.utc_now() }) end