Adding an onCleanup hook to cancel dispatches and watches for Wpt

src/components/wpt/Wpt.tsx

@@ -3,9 +3,10 @@ import {
   createEffect,
   createResource,
   createSignal,
+  onCleanup,
 } from 'solid-js';
 
-import dispatch from '../../workers/dispatcher-main';
+import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
 import VectorSource from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
 import { setBranch, tree } from '../map';
@@ -18,14 +19,18 @@ interface Props {
 
 export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
   const [wpt, setWpt] = createSignal<Wpt>();
+  const [dispatchId, setDispatchId] = createSignal<number>(-1);
 
-  const wptCallBack = (error: any, result: any) => {
+  const wptCallBack = (error: any, result: any, id?: number) => {
     if (error) {
       console.error({ caller: 'wptCallBack', error });
     } else {
       console.log({ caller: 'wptCallBack', result });
       setWpt(result);
     }
+    if (id) {
+      setDispatchId(id);
+    }
   };
 
   dispatch(
@@ -40,6 +45,17 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
     true
   );
 
+  onCleanup(() => {
+    dispatch({
+      action: 'cancelWatch',
+      params: {
+        id: wptId,
+        method: 'getWpt',
+      },
+    });
+    cancelDispatch(dispatchId());
+  });
+
   createEffect(() => {
     console.log({ caller: 'Wpt', vectorSource, wptId, wpt: wpt() });
 

src/workers/dispatcher-main.ts

@@ -22,9 +22,9 @@ export const init = () => {
       payload,
       dispatcherQueue: JSON.parse(JSON.stringify(dispatcherQueue)),
     });
-    dispatcherQueue.queue.get(id).callBack(null, payload);
+    dispatcherQueue.queue.get(id).callBack(null, payload, id);
     if (!dispatcherQueue.queue.get(id).live) {
-      cancel(id);
+      cancelDispatch(id);
     }
   };
 
@@ -33,7 +33,7 @@ export const init = () => {
 
 const dispatch = (
   payload: any,
-  callBack?: (error: any, result: any) => void,
+  callBack?: (error: any, result: any, id?: number|undefined) => void,
   live?: boolean
 ) => {
   console.log({ caller: 'dispatcher-main / dispatch', payload });
@@ -66,7 +66,7 @@ const dispatch = (
   });
 };
 
-export const cancel = (id: number) => {
+export const cancelDispatch = (id: number) => {
   dispatcherQueue.queue.delete(id);
 };