Relying on the change handler for Gpx, Trk and Trkseg too.

src/components/gpx/Gpx.tsx

@@ -2,13 +2,15 @@ import {
   Component,
   createEffect,
   createResource,
+  createSignal,
   For,
+  onCleanup,
   Suspense,
 } from 'solid-js';
 
 import OlMap from 'ol/Map';
 
-import dispatch from '../../workers/dispatcher-main';
+import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
 import Trk from '../trk';
 import getUri from '../../lib/ids';
 import VectorSource from 'ol/source/Vector';
@@ -23,17 +25,44 @@ interface Props {
 }
 
 export const Gpx: Component<Props> = ({ map, gpxId }) => {
-  const [gpx] = createResource(
+  const [gpx, setGpx] = createSignal<Gpx>();
-    gpxId,
+  const [dispatchId, setDispatchId] = createSignal<number>(-1);
-    async () =>
+
-      await dispatch({
+  const gpxCallBack = (error: any, result: any, id?: number) => {
-        action: 'getGpx',
+    if (error) {
+      console.error({ caller: 'gpxCallBack', error });
+    } else {
+      console.log({ caller: 'gpxCallBack', result });
+      setGpx(result);
+    }
+    if (id) {
+      setDispatchId(id);
+    }
+  };
+
+  dispatch(
+    {
+      action: 'getAndWatch',
       params: {
         id: gpxId,
+        method: 'getGpx',
       },
-      })
+    },
+    gpxCallBack,
+    true
   );
 
+  onCleanup(() => {
+    dispatch({
+      action: 'cancelWatch',
+      params: {
+        id: gpxId,
+        method: 'getGpx',
+      },
+    });
+    cancelDispatch(dispatchId());
+  });
+
   const vectorSource = new VectorSource();
   const vectorLayer = new VectorLayer({ source: vectorSource, style });
   createEffect(() => map()?.addLayer(vectorLayer));

src/components/trk/Trk.tsx

@@ -2,13 +2,15 @@ import {
   Component,
   createEffect,
   createResource,
+  createSignal,
   For,
+  onCleanup,
   Suspense,
 } from 'solid-js';
 
 import OlMap from 'ol/Map';
 
-import dispatch from '../../workers/dispatcher-main';
+import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
 import getUri from '../../lib/ids';
 
 import Trkseg from '../trkseg';
@@ -19,17 +21,44 @@ interface Props {
   vectorSource: VectorSource;
 }
 export const Trk: Component<Props> = ({ vectorSource, trkId }) => {
-  const [trk] = createResource(
+  const [trk, setTrk] = createSignal<Trk>();
-    trkId,
+  const [dispatchId, setDispatchId] = createSignal<number>(-1);
-    async () =>
+
-      await dispatch({
+  const trkCallBack = (error: any, result: any, id?: number) => {
-        action: 'getTrk',
+    if (error) {
+      console.error({ caller: 'trkCallBack', error });
+    } else {
+      console.log({ caller: 'trkCallBack', result });
+      setTrk(result);
+    }
+    if (id) {
+      setDispatchId(id);
+    }
+  };
+
+  dispatch(
+    {
+      action: 'getAndWatch',
       params: {
         id: trkId,
+        method: 'getTrk',
       },
-      })
+    },
+    trkCallBack,
+    true
   );
 
+  onCleanup(() => {
+    dispatch({
+      action: 'cancelWatch',
+      params: {
+        id: trkId,
+        method: 'getTrk',
+      },
+    });
+    cancelDispatch(dispatchId());
+  });
+
   createEffect(() => {
     console.log({ caller: 'Trk', vectorSource, trkId, trk: trk() });
   });

src/components/trkseg/Trkseg.tsx

@@ -1,9 +1,8 @@
-import { Component, createEffect, createResource } from 'solid-js';
+import { Component, createEffect, 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 { Feature } from 'ol';
 
 interface Props {
   trksegId: string;
@@ -11,17 +10,44 @@ interface Props {
 }
 
 export const Trkseg: Component<Props> = ({ vectorSource, trksegId }) => {
-  const [trkseg] = createResource(
+  const [trkseg, setTrkseg] = createSignal<Trkseg>();
-    trksegId,
+  const [dispatchId, setDispatchId] = createSignal<number>(-1);
-    async () =>
+
-      await dispatch({
+  const trksegCallBack = (error: any, result: any, id?: number) => {
-        action: 'getTrkseg',
+    if (error) {
+      console.error({ caller: 'trksegCallBack', error });
+    } else {
+      console.log({ caller: 'trksegCallBack', result });
+      setTrkseg(result);
+    }
+    if (id) {
+      setDispatchId(id);
+    }
+  };
+
+  dispatch(
+    {
+      action: 'getAndWatch',
       params: {
         id: trksegId,
+        method: 'getTrkseg',
       },
-      })
+    },
+    trksegCallBack,
+    true
   );
 
+  onCleanup(() => {
+    dispatch({
+      action: 'cancelWatch',
+      params: {
+        id: trksegId,
+        method: 'getTrkseg',
+      },
+    });
+    cancelDispatch(dispatchId());
+  });
+
   createEffect(() => {
     console.log({ caller: 'Trkseg', vectorSource, trksegId, trkseg: trkseg() });
 

src/db/change-handler.ts

@@ -1,6 +1,8 @@
 import { getWpt } from '../db/wpt';
 import { returnAgain } from '../workers/dispatcher-worker';
-import { getAllGpxes } from './gpx';
+import { getAllGpxes, getGpx } from './gpx';
+import { getTrk } from './trk';
+import { getTrkseg } from './trkseg';
 
 declare global {
   var watches: Map<string, any>;
@@ -8,6 +10,9 @@ declare global {
 
 const methods = {
   getAllGpxes,
+  getGpx,
+  getTrk,
+  getTrkseg,
   getWpt,
 };