fix(Networking): Fixes an issue where reconnecting doesn't restart ne…

…tRequests. Closes #79

client/src/context/useNetRequest.ts

@@ -1,4 +1,4 @@
-import {useEffect} from "react";
+import {useCallback, useEffect, useReducer} from "react";
 import {
   AllRequestNames,
   AllRequestParams,
@@ -56,12 +56,38 @@ export function useNetRequest<
   const requestId = stableValueHash({requestName, params});
   const data = useSnapshot(netRequestProxy);
   const {socket} = useThorium();
+  const [ready, resetReady] = useReducer(() => ({}), {});
   if (!socket) throw new Promise(() => {});
 
-  if (!data[requestId] && data[requestId] !== null) {
+  const setUpRequest = useCallback(() => {
     if (!netRequestPromises[requestId]) {
       socket.send("netRequest", {requestName, params, requestId});
     }
+  }, [params, requestId, requestName, socket]);
+
+  const takeDownRequest = useCallback(() => {
+    socket.send("netRequestEnd", {requestId});
+    delete netRequestPromises[requestId];
+  }, [requestId, socket]);
+
+  useEffect(() => {
+    const handleReady = () => {
+      resetReady();
+      delete data[requestId];
+    };
+    socket.on("ready", handleReady);
+    return () => {
+      socket.off("ready", handleReady);
+    };
+  }, [socket, requestId, data]);
+
+  useEffect(() => {
+    setUpRequest();
+    return () => takeDownRequest();
+  }, [setUpRequest, takeDownRequest, ready]);
+
+  if (!data[requestId] && data[requestId] !== null) {
+    setUpRequest();
     throw new Promise(res => {
       netRequestPromises[requestId] = res;
     });

client/src/hooks/useInterval.ts

@@ -0,0 +1,24 @@
+import {useEffect, useRef} from "react";
+
+export default function useInterval(
+  callback: () => void,
+  delay: number = 1000
+) {
+  const savedCallback = useRef<() => void>(callback);
+
+  // Remember the latest callback.
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+}

server/src/classes/Client.ts

@@ -93,6 +93,7 @@ export class ServerClient extends BaseClient {
         pubsub.unsubscribe(netRequestList[requestId]?.subscriptionId);
       }
     });
+
     // Set up the whole netSend process for calling input functions
     socket.socket.on("message", async data => {
       try {
@@ -234,6 +235,13 @@ export class ServerClient extends BaseClient {
         );
       }
     });
+
+    // Send a message to the client indicating that the connection is open
+    socket.socket.send(
+      JSON.stringify({
+        type: "ready",
+      })
+    );
   }
   get cards() {
     // TODO Aug 28, 2021 Populate this list with the dynamic list of cards assigned to the client.

server/src/classes/Plugins/index.ts

@@ -35,6 +35,7 @@ export default class BasePlugin extends FSDataStore {
   description: string;
   _coverImage: string;
   get coverImage() {
+    if (!this._coverImage) return "";
     // Allow images from the internet
     if (this._coverImage.startsWith("http")) return this._coverImage;
     // Allow absolute paths