commit .web, though there's not really a point in tracking this directory

src/landing/.web/utils/state.js

@@ -6,14 +6,19 @@ import env from "/env.json";
 import Cookies from "universal-cookie";
 import { useEffect, useReducer, useRef, useState } from "react";
 import Router, { useRouter } from "next/router";
-import { initialEvents, initialState, onLoadInternalEvent, state_name } from "utils/context.js"
+import {
+  initialEvents,
+  initialState,
+  onLoadInternalEvent,
+  state_name,
+} from "utils/context.js";
 
 // Endpoint URLs.
-const EVENTURL = env.EVENT
-const UPLOADURL = env.UPLOAD
+const EVENTURL = env.EVENT;
+const UPLOADURL = env.UPLOAD;
 
 // These hostnames indicate that the backend and frontend are reachable via the same domain.
-const SAME_DOMAIN_HOSTNAMES = ["localhost", "0.0.0.0", "::", "0:0:0:0:0:0:0:0"]
+const SAME_DOMAIN_HOSTNAMES = ["localhost", "0.0.0.0", "::", "0:0:0:0:0:0:0:0"];
 
 // Global variable to hold the token.
 let token;
@@ -28,7 +33,7 @@ const cookies = new Cookies();
 export const refs = {};
 
 // Flag ensures that only one event is processing on the backend concurrently.
-let event_processing = false
+let event_processing = false;
 // Array holding pending events to be processed.
 const event_queue = [];
 
@@ -64,7 +69,7 @@ export const getToken = () => {
   if (token) {
     return token;
   }
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     if (!window.sessionStorage.getItem(TOKEN_KEY)) {
       window.sessionStorage.setItem(TOKEN_KEY, generateUUID());
     }
@@ -81,7 +86,10 @@ export const getToken = () => {
 export const getBackendURL = (url_str) => {
   // Get backend URL object from the endpoint.
   const endpoint = new URL(url_str);
-  if ((typeof window !== 'undefined') && SAME_DOMAIN_HOSTNAMES.includes(endpoint.hostname)) {
+  if (
+    typeof window !== "undefined" &&
+    SAME_DOMAIN_HOSTNAMES.includes(endpoint.hostname)
+  ) {
     // Use the frontend domain to access the backend
     const frontend_hostname = window.location.hostname;
     endpoint.hostname = frontend_hostname;
@@ -91,11 +99,11 @@ export const getBackendURL = (url_str) => {
       } else if (endpoint.protocol === "http:") {
         endpoint.protocol = "https:";
       }
-      endpoint.port = "";  // Assume websocket is on https port via load balancer.
+      endpoint.port = ""; // Assume websocket is on https port via load balancer.
     }
   }
-  return endpoint
-}
+  return endpoint;
+};
 
 /**
  * Apply a delta to the state.
@@ -103,10 +111,9 @@ export const getBackendURL = (url_str) => {
  * @param delta The delta to apply.
  */
 export const applyDelta = (state, delta) => {
-  return { ...state, ...delta }
+  return { ...state, ...delta };
 };
 
-
 /**
  * Handle frontend event or send the event to the backend via Websocket.
  * @param event The event to send.
@@ -117,10 +124,8 @@ export const applyDelta = (state, delta) => {
 export const applyEvent = async (event, socket) => {
   // Handle special events
   if (event.name == "_redirect") {
-    if (event.payload.external)
-      window.open(event.payload.path, "_blank");
-    else
-      Router.push(event.payload.path);
+    if (event.payload.external) window.open(event.payload.path, "_blank");
+    else Router.push(event.payload.path);
     return false;
   }
 
@@ -130,20 +135,20 @@ export const applyEvent = async (event, socket) => {
   }
 
   if (event.name == "_remove_cookie") {
-    cookies.remove(event.payload.key, { ...event.payload.options })
-    queueEvents(initialEvents(), socket)
+    cookies.remove(event.payload.key, { ...event.payload.options });
+    queueEvents(initialEvents(), socket);
     return false;
   }
 
   if (event.name == "_clear_local_storage") {
     localStorage.clear();
-    queueEvents(initialEvents(), socket)
+    queueEvents(initialEvents(), socket);
     return false;
   }
 
   if (event.name == "_remove_local_storage") {
     localStorage.removeItem(event.payload.key);
-    queueEvents(initialEvents(), socket)
+    queueEvents(initialEvents(), socket);
     return false;
   }
 
@@ -154,9 +159,9 @@ export const applyEvent = async (event, socket) => {
   }
 
   if (event.name == "_download") {
-    const a = document.createElement('a');
+    const a = document.createElement("a");
     a.hidden = true;
-    a.href = event.payload.url
+    a.href = event.payload.url;
     a.download = event.payload.filename;
     a.click();
     a.remove();
@@ -178,7 +183,9 @@ export const applyEvent = async (event, socket) => {
   if (event.name == "_set_value") {
     const ref =
       event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;
-    ref.current.value = event.payload.value;
+    if (ref.current) {
+      ref.current.value = event.payload.value;
+    }
     return false;
   }
 
@@ -186,10 +193,10 @@ export const applyEvent = async (event, socket) => {
     try {
       const eval_result = eval(event.payload.javascript_code);
       if (event.payload.callback) {
-        if (!!eval_result && typeof eval_result.then === 'function') {
-          eval(event.payload.callback)(await eval_result)
+        if (!!eval_result && typeof eval_result.then === "function") {
+          eval(event.payload.callback)(await eval_result);
         } else {
-          eval(event.payload.callback)(eval_result)
+          eval(event.payload.callback)(eval_result);
         }
       }
     } catch (e) {
@@ -199,14 +206,24 @@ export const applyEvent = async (event, socket) => {
   }
 
   // Update token and router data (if missing).
-  event.token = getToken()
-  if (event.router_data === undefined || Object.keys(event.router_data).length === 0) {
-    event.router_data = (({ pathname, query, asPath }) => ({ pathname, query, asPath }))(Router)
+  event.token = getToken();
+  if (
+    event.router_data === undefined ||
+    Object.keys(event.router_data).length === 0
+  ) {
+    event.router_data = (({ pathname, query, asPath }) => ({
+      pathname,
+      query,
+      asPath,
+    }))(Router);
   }
 
   // Send the event to the server.
   if (socket) {
-    socket.emit("event", JSON.stringify(event, (k, v) => v === undefined ? null : v));
+    socket.emit(
+      "event",
+      JSON.stringify(event, (k, v) => (v === undefined ? null : v))
+    );
     return true;
   }
 
@@ -242,17 +259,15 @@ export const applyRestEvent = async (event, socket) => {
  * @param socket The socket object to send the event on.
  */
 export const queueEvents = async (events, socket) => {
-  event_queue.push(...events)
-  await processEvent(socket.current)
-}
+  event_queue.push(...events);
+  await processEvent(socket.current);
+};
 
 /**
  * Process an event off the event queue.
  * @param socket The socket object to send the event on.
  */
-export const processEvent = async (
-  socket
-) => {
+export const processEvent = async (socket) => {
   // Only proceed if the socket is up, otherwise we throw the event into the void
   if (!socket) {
     return;
@@ -264,12 +279,12 @@ export const processEvent = async (
   }
 
   // Set processing to true to block other events from being processed.
-  event_processing = true
+  event_processing = true;
 
   // Apply the next event in the queue.
   const event = event_queue.shift();
 
-  let eventSent = false
+  let eventSent = false;
   // Process events with handlers via REST and all others via websockets.
   if (event.handler) {
     eventSent = await applyRestEvent(event, socket);
@@ -281,27 +296,27 @@ export const processEvent = async (
     event_processing = false;
     // recursively call processEvent to drain the queue, since there is
     // no state update to trigger the useEffect event loop.
-    await processEvent(socket)
+    await processEvent(socket);
   }
-}
+};
 
 /**
  * Connect to a websocket and set the handlers.
  * @param socket The socket object to connect.
  * @param dispatch The function to queue state update
  * @param transports The transports to use.
- * @param setConnectError The function to update connection error value.
+ * @param setConnectErrors The function to update connection error value.
  * @param client_storage The client storage object from context.js
  */
 export const connect = async (
   socket,
   dispatch,
   transports,
-  setConnectError,
-  client_storage = {},
+  setConnectErrors,
+  client_storage = {}
 ) => {
   // Get backend URL object from the endpoint.
-  const endpoint = getBackendURL(EVENTURL)
+  const endpoint = getBackendURL(EVENTURL);
 
   // Create the socket.
   socket.current = io(endpoint.href, {
@@ -310,27 +325,39 @@ export const connect = async (
     autoUnref: false,
   });
 
+  function checkVisibility() {
+    if (document.visibilityState === "visible") {
+      if (!socket.current.connected) {
+        console.log("Socket is disconnected, attempting to reconnect ");
+        socket.current.connect();
+      } else {
+        console.log("Socket is reconnected ");
+      }
+    }
+  }
+
   // Once the socket is open, hydrate the page.
   socket.current.on("connect", () => {
-    setConnectError(null)
+    setConnectErrors([]);
   });
 
-  socket.current.on('connect_error', (error) => {
-    setConnectError(error)
+  socket.current.on("connect_error", (error) => {
+    setConnectErrors((connectErrors) => [connectErrors.slice(-9), error]);
   });
-
   // On each received message, queue the updates and events.
-  socket.current.on("event", message => {
-    const update = JSON5.parse(message)
+  socket.current.on("event", (message) => {
+    const update = JSON5.parse(message);
     for (const substate in update.delta) {
-      dispatch[substate](update.delta[substate])
+      dispatch[substate](update.delta[substate]);
     }
-    applyClientStorageDelta(client_storage, update.delta)
-    event_processing = !update.final
+    applyClientStorageDelta(client_storage, update.delta);
+    event_processing = !update.final;
     if (update.events) {
-      queueEvents(update.events, socket)
+      queueEvents(update.events, socket);
     }
   });
+
+  document.addEventListener("visibilitychange", checkVisibility);
 };
 
 /**
@@ -344,38 +371,44 @@ export const connect = async (
  *
  * @returns The response from posting to the UPLOADURL endpoint.
  */
-export const uploadFiles = async (handler, files, upload_id, on_upload_progress, socket) => {
+export const uploadFiles = async (
+  handler,
+  files,
+  upload_id,
+  on_upload_progress,
+  socket
+) => {
   // return if there's no file to upload
   if (files === undefined || files.length === 0) {
     return false;
   }
 
   if (upload_controllers[upload_id]) {
-    console.log("Upload already in progress for ", upload_id)
+    console.log("Upload already in progress for ", upload_id);
     return false;
   }
 
   let resp_idx = 0;
   const eventHandler = (progressEvent) => {
     // handle any delta / event streamed from the upload event handler
-    const chunks = progressEvent.event.target.responseText.trim().split("\n")
+    const chunks = progressEvent.event.target.responseText.trim().split("\n");
     chunks.slice(resp_idx).map((chunk) => {
       try {
         socket._callbacks.$event.map((f) => {
-          f(chunk)
-        })
-        resp_idx += 1
+          f(chunk);
+        });
+        resp_idx += 1;
       } catch (e) {
         if (progressEvent.progress === 1) {
           // Chunk may be incomplete, so only report errors when full response is available.
-          console.log("Error parsing chunk", chunk, e)
+          console.log("Error parsing chunk", chunk, e);
         }
-        return
+        return;
       }
-    })
-  }
+    });
+  };
 
-  const controller = new AbortController()
+  const controller = new AbortController();
   const config = {
     headers: {
       "Reflex-Client-Token": getToken(),
@@ -383,26 +416,22 @@ export const uploadFiles = async (handler, files, upload_id, on_upload_progress,
     },
     signal: controller.signal,
     onDownloadProgress: eventHandler,
-  }
+  };
   if (on_upload_progress) {
-    config["onUploadProgress"] = on_upload_progress
+    config["onUploadProgress"] = on_upload_progress;
   }
   const formdata = new FormData();
 
   // Add the token and handler to the file name.
   files.forEach((file) => {
-    formdata.append(
-      "files",
-      file,
-      file.path || file.name
-    );
-  })
+    formdata.append("files", file, file.path || file.name);
+  });
 
   // Send the file to the server.
-  upload_controllers[upload_id] = controller
+  upload_controllers[upload_id] = controller;
 
   try {
-    return await axios.post(getBackendURL(UPLOADURL), formdata, config)
+    return await axios.post(getBackendURL(UPLOADURL), formdata, config);
   } catch (error) {
     if (error.response) {
       // The request was made and the server responded with a status code
@@ -419,7 +448,7 @@ export const uploadFiles = async (handler, files, upload_id, on_upload_progress,
     }
     return false;
   } finally {
-    delete upload_controllers[upload_id]
+    delete upload_controllers[upload_id];
   }
 };
 
@@ -441,30 +470,32 @@ export const Event = (name, payload = {}, handler = null) => {
  * @returns payload dict of client storage values
  */
 export const hydrateClientStorage = (client_storage) => {
-  const client_storage_values = {}
+  const client_storage_values = {};
   if (client_storage.cookies) {
     for (const state_key in client_storage.cookies) {
-      const cookie_options = client_storage.cookies[state_key]
-      const cookie_name = cookie_options.name || state_key
-      const cookie_value = cookies.get(cookie_name)
+      const cookie_options = client_storage.cookies[state_key];
+      const cookie_name = cookie_options.name || state_key;
+      const cookie_value = cookies.get(cookie_name);
       if (cookie_value !== undefined) {
-        client_storage_values[state_key] = cookies.get(cookie_name)
+        client_storage_values[state_key] = cookies.get(cookie_name);
       }
     }
   }
-  if (client_storage.local_storage && (typeof window !== 'undefined')) {
+  if (client_storage.local_storage && typeof window !== "undefined") {
     for (const state_key in client_storage.local_storage) {
-      const options = client_storage.local_storage[state_key]
-      const local_storage_value = localStorage.getItem(options.name || state_key)
+      const options = client_storage.local_storage[state_key];
+      const local_storage_value = localStorage.getItem(
+        options.name || state_key
+      );
       if (local_storage_value !== null) {
-        client_storage_values[state_key] = local_storage_value
+        client_storage_values[state_key] = local_storage_value;
       }
     }
   }
   if (client_storage.cookies || client_storage.local_storage) {
-    return client_storage_values
+    return client_storage_values;
   }
-  return {}
+  return {};
 };
 
 /**
@@ -474,9 +505,11 @@ export const hydrateClientStorage = (client_storage) => {
  */
 const applyClientStorageDelta = (client_storage, delta) => {
   // find the main state and check for is_hydrated
-  const unqualified_states = Object.keys(delta).filter((key) => key.split(".").length === 1);
+  const unqualified_states = Object.keys(delta).filter(
+    (key) => key.split(".").length === 1
+  );
   if (unqualified_states.length === 1) {
-    const main_state = delta[unqualified_states[0]]
+    const main_state = delta[unqualified_states[0]];
     if (main_state.is_hydrated !== undefined && !main_state.is_hydrated) {
       // skip if the state is not hydrated yet, since all client storage
       // values are sent in the hydrate event
@@ -486,19 +519,23 @@ const applyClientStorageDelta = (client_storage, delta) => {
   // Save known client storage values to cookies and localStorage.
   for (const substate in delta) {
     for (const key in delta[substate]) {
-      const state_key = `${substate}.${key}`
+      const state_key = `${substate}.${key}`;
       if (client_storage.cookies && state_key in client_storage.cookies) {
-        const cookie_options = { ...client_storage.cookies[state_key] }
-        const cookie_name = cookie_options.name || state_key
-        delete cookie_options.name  // name is not a valid cookie option
+        const cookie_options = { ...client_storage.cookies[state_key] };
+        const cookie_name = cookie_options.name || state_key;
+        delete cookie_options.name; // name is not a valid cookie option
         cookies.set(cookie_name, delta[substate][key], cookie_options);
-      } else if (client_storage.local_storage && state_key in client_storage.local_storage && (typeof window !== 'undefined')) {
-        const options = client_storage.local_storage[state_key]
+      } else if (
+        client_storage.local_storage &&
+        state_key in client_storage.local_storage &&
+        typeof window !== "undefined"
+      ) {
+        const options = client_storage.local_storage[state_key];
         localStorage.setItem(options.name || state_key, delta[substate][key]);
       }
     }
   }
-}
+};
 
 /**
  * Establish websocket event loop for a NextJS page.
@@ -506,18 +543,18 @@ const applyClientStorageDelta = (client_storage, delta) => {
  * @param initial_events The initial app events.
  * @param client_storage The client storage object from context.js
  *
- * @returns [addEvents, connectError] -
+ * @returns [addEvents, connectErrors] -
  *   addEvents is used to queue an event, and
- *   connectError is a reactive js error from the websocket connection (or null if connected).
+ *   connectErrors is an array of reactive js error from the websocket connection (or null if connected).
  */
 export const useEventLoop = (
   dispatch,
   initial_events = () => [],
-  client_storage = {},
+  client_storage = {}
 ) => {
-  const socket = useRef(null)
-  const router = useRouter()
-  const [connectError, setConnectError] = useState(null)
+  const socket = useRef(null);
+  const router = useRouter();
+  const [connectErrors, setConnectErrors] = useState([]);
 
   // Function to add new events to the event queue.
   const addEvents = (events, _e, event_actions) => {
@@ -527,22 +564,26 @@ export const useEventLoop = (
     if (event_actions?.stopPropagation && _e?.stopPropagation) {
       _e.stopPropagation();
     }
-    queueEvents(events, socket)
-  }
+    queueEvents(events, socket);
+  };
 
-  const sentHydrate = useRef(false);  // Avoid double-hydrate due to React strict-mode
+  const sentHydrate = useRef(false); // Avoid double-hydrate due to React strict-mode
   useEffect(() => {
     if (router.isReady && !sentHydrate.current) {
-    const events = initial_events()
-      addEvents(events.map((e) => (
-        {
+      const events = initial_events();
+      addEvents(
+        events.map((e) => ({
           ...e,
-          router_data: (({ pathname, query, asPath }) => ({ pathname, query, asPath }))(router)
-        }
-      )))
-      sentHydrate.current = true
+          router_data: (({ pathname, query, asPath }) => ({
+            pathname,
+            query,
+            asPath,
+          }))(router),
+        }))
+      );
+      sentHydrate.current = true;
     }
-  }, [router.isReady])
+  }, [router.isReady]);
 
   // Main event loop.
   useEffect(() => {
@@ -554,17 +595,22 @@ export const useEventLoop = (
     if (Object.keys(initialState).length > 1) {
       // Initialize the websocket connection.
       if (!socket.current) {
-        connect(socket, dispatch, ['websocket', 'polling'], setConnectError, client_storage)
+        connect(
+          socket,
+          dispatch,
+          ["websocket", "polling"],
+          setConnectErrors,
+          client_storage
+        );
       }
       (async () => {
         // Process all outstanding events.
         while (event_queue.length > 0 && !event_processing) {
-          await processEvent(socket.current)
+          await processEvent(socket.current);
         }
-      })()
+      })();
     }
-  })
-
+  });
 
   // localStorage event handling
   useEffect(() => {
@@ -583,9 +629,12 @@ export const useEventLoop = (
     // e is StorageEvent
     const handleStorage = (e) => {
       if (storage_to_state_map[e.key]) {
-        const vars = {}
-        vars[storage_to_state_map[e.key]] = e.newValue
-        const event = Event(`${state_name}.update_vars_internal`, {vars: vars})
+        const vars = {};
+        vars[storage_to_state_map[e.key]] = e.newValue;
+        const event = Event(
+          `${state_name}.update_vars_internal_state.update_vars_internal`,
+          { vars: vars }
+        );
         addEvents([event], e);
       }
     };
@@ -594,18 +643,17 @@ export const useEventLoop = (
     return () => window.removeEventListener("storage", handleStorage);
   });
 
-
   // Route after the initial page hydration.
   useEffect(() => {
-    const change_complete = () => addEvents(onLoadInternalEvent())
-    router.events.on('routeChangeComplete', change_complete)
+    const change_complete = () => addEvents(onLoadInternalEvent());
+    router.events.on("routeChangeComplete", change_complete);
     return () => {
-      router.events.off('routeChangeComplete', change_complete)
-    }
-  }, [router])
+      router.events.off("routeChangeComplete", change_complete);
+    };
+  }, [router]);
 
-  return [addEvents, connectError]
-}
+  return [addEvents, connectErrors];
+};
 
 /***
  * Check if a value is truthy in python.
@@ -626,17 +674,25 @@ export const getRefValue = (ref) => {
     return;
   }
   if (ref.current.type == "checkbox") {
-    return ref.current.checked;  // chakra
-  } else if (ref.current.className.includes("rt-CheckboxButton") || ref.current.className.includes("rt-SwitchButton")) {
-    return ref.current.ariaChecked == "true";  // radix
-  } else if (ref.current.className.includes("rt-SliderRoot")) {
+    return ref.current.checked; // chakra
+  } else if (
+    ref.current.className?.includes("rt-CheckboxButton") ||
+    ref.current.className?.includes("rt-SwitchButton")
+  ) {
+    return ref.current.ariaChecked == "true"; // radix
+  } else if (ref.current.className?.includes("rt-SliderRoot")) {
     // find the actual slider
-    return ref.current.querySelector(".rt-SliderThumb").ariaValueNow;
+    return ref.current.querySelector(".rt-SliderThumb")?.ariaValueNow;
   } else {
     //querySelector(":checked") is needed to get value from radio_group
-    return ref.current.value || (ref.current.querySelector(':checked') && ref.current.querySelector(':checked').value);
+    return (
+      ref.current.value ||
+      (ref.current.querySelector &&
+        ref.current.querySelector(":checked") &&
+        ref.current.querySelector(":checked")?.value)
+    );
   }
-}
+};
 
 /**
  * Get the values from a ref array.
@@ -648,21 +704,25 @@ export const getRefValues = (refs) => {
     return;
   }
   // getAttribute is used by RangeSlider because it doesn't assign value
-  return refs.map((ref) => ref.current ? ref.current.value || ref.current.getAttribute("aria-valuenow") : null);
-}
+  return refs.map((ref) =>
+    ref.current
+      ? ref.current.value || ref.current.getAttribute("aria-valuenow")
+      : null
+  );
+};
 
 /**
-* Spread two arrays or two objects.
-* @param first The first array or object.
-* @param second The second array or object.
-* @returns The final merged array or object.
-*/
+ * Spread two arrays or two objects.
+ * @param first The first array or object.
+ * @param second The second array or object.
+ * @returns The final merged array or object.
+ */
 export const spreadArraysOrObjects = (first, second) => {
   if (Array.isArray(first) && Array.isArray(second)) {
     return [...first, ...second];
-  } else if (typeof first === 'object' && typeof second === 'object') {
+  } else if (typeof first === "object" && typeof second === "object") {
     return { ...first, ...second };
   } else {
-    throw new Error('Both parameters must be either arrays or objects.');
+    throw new Error("Both parameters must be either arrays or objects.");
   }
-}
+};