feat(Core): force map page reload after 30 mins of user inactivity (switched browser/tab)

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 <div className="!z-100 absolute w-screen h-screen bg-transparent"></div>;
@@ -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 (

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<MapHandlers>[], hooksRef: RefObject<any>) => {
   const handleCommand = useCallback(
@@ -13,7 +16,13 @@ export const useMapperHandlers = (handlerRefs: RefObject<MapHandlers>[], 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<MapHandlers>[], hooksRe
     });
   }, []);
 
-  const handleMapEvents = useCallback(
-    events => {
-      events.forEach(event => {
-        handleMapEvent(event);
-      });
-    },
-    [handleMapEvent],
-  );
-
-  return { handleCommand, handleMapEvent, handleMapEvents };
+  return { handleCommand, handleMapEvent };
 };

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