wip

Author: noituri

ts/smelter-web-client/src/hooks/useSmelter.ts

@@ -1,44 +1,52 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import Smelter from '../smelter/live';
 import type { SmelterInstanceOptions } from '../manager';
 
 export function useSmelter(options: SmelterInstanceOptions): Smelter | undefined {
   const [smelter, setSmelter] = useState<Smelter>();
-  const prevSmelter = useRef<Smelter>();
+  const [promiseQueue, setPromiseQueue] = useState<(() => Promise<void>)[]>([]);
+  const [isWaiting, setIsWaiting] = useState(false);
+
+  const enqueue = useCallback((fn: () => Promise<void>) => {
+    setPromiseQueue(queue => [
+      ...queue,
+      fn,
+    ])
+  }, []);
 
   useEffect(() => {
     const smelter = new Smelter(options);
-    const smelterToTerminate = prevSmelter.current;
-    prevSmelter.current = smelter;
 
     let cancel = false;
-    (async () => {
-      if (smelterToTerminate) {
-        console.log("Terminate");
-      }
-      await smelterToTerminate?.terminate().catch(() => { });
-      console.log("Init");
+    enqueue(async () => {
       await smelter.init();
       await smelter.start();
       if (!cancel) {
         setSmelter(smelter);
       }
-    })();
+    });
 
     return () => {
       cancel = true;
+      enqueue(async () => await smelter.terminate());
     };
-  }, [options?.url]);
+  }, [options?.url, enqueue]);
 
   useEffect(() => {
-    return () => {
-      if (prevSmelter.current) {
-        console.log("Terminate unmount");
-      }
-      // It runs only during unmount
-      void prevSmelter.current?.terminate().catch(() => { });
+    if (isWaiting) {
+      return;
+    }
+    setIsWaiting(true);
+
+    const fn = promiseQueue[0];
+    if (fn) {
+      void (async () => {
+        await fn();
+        setPromiseQueue(promiseQueue.slice(1));
+        setIsWaiting(false);
+      })();
     }
-  }, [])
+  }, [promiseQueue, isWaiting]);
 
   return smelter;
 }