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() });