Relying on the change handler for AllGpxes and FPX import.

src/components/all-gpxes/AllGpxes.tsx

@@ -1,28 +1,59 @@
 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 Gpx from '../gpx';
 
 interface Props {
   map: () => OlMap | null;
 }
 
-const [allGpxIds, { refetch }] = createResource(
-  async () =>
-    await dispatch({
-      action: 'getAllGpxes',
-      params: {},
-    })
+const [allGpxIds, setAllGpxIds] = createSignal<string[]>([]);
+const [dispatchId, setDispatchId] = createSignal<number>(-1);
+
+const allGpxesCallBack = (error: any, result: any, id?: number) => {
+  if (error) {
+    console.error({ caller: 'allGpxesCallBack', error });
+  } else {
+    console.log({ caller: 'allGpxesCallBack', result });
+    setAllGpxIds(result);
+  }
+  if (id) {
+    setDispatchId(id);
+  }
+};
+
+dispatch(
+  {
+    action: 'getAndWatch',
+    params: {
+      id: 'gpx',
+      method: 'getAllGpxes',
+    },
+  },
+  allGpxesCallBack,
+  true
 );
 
+onCleanup(() => {
+  dispatch({
+    action: 'cancelWatch',
+    params: {
+      id: 'gpx',
+      method: 'getAllGpxes',
+    },
+  });
+  cancelDispatch(dispatchId());
+});
+
 export const AllGpxes: Component<Props> = ({ map }) => {
   createEffect(() => {
     console.log({ caller: 'AllGpxes', allGpxes: allGpxIds(), map: map() });
@@ -44,4 +75,3 @@ export const AllGpxes: Component<Props> = ({ map }) => {
 };
 
 export default AllGpxes;
-export { refetch };

src/components/all-gpxes/index.ts

@@ -1 +1 @@
-export { default, refetch as refetchGpxList } from './AllGpxes';
+export { default } from './AllGpxes';

src/components/gpx-import/GpxImport.tsx

@@ -9,7 +9,6 @@ import css from './GpxImport.module.css';
 import { findStartTime } from '../../lib/gpx';
 import dispatch from '../../workers/dispatcher-main';
 import { intToGpxId } from '../../lib/ids';
-import { refetchGpxList } from '../all-gpxes';
 
 const GpxImport: Component = () => {
   const onChangeHandler = (event: any) => {
@@ -41,7 +40,6 @@ const GpxImport: Component = () => {
               },
             },
           });
-          refetchGpxList();
         } else {
           console.error({
             message: "can't parse GPX file",

src/db/change-handler.ts

@@ -1,28 +1,37 @@
 import { getWpt } from '../db/wpt';
 import { returnAgain } from '../workers/dispatcher-worker';
+import { getAllGpxes } from './gpx';
 
 declare global {
   var watches: Map<string, any>;
 }
 
 const methods = {
+  getAllGpxes,
   getWpt,
 };
 
+const sendUpdate = async (params: any) => {
+  if (params) {
+    console.log({ caller: 'ChangeHandler / sendUpdate', params });
+    const { method, _dispatchId, id, ...otherParams } = params;
+    const returnValue = await methods[<keyof typeof methods>method](params);
+    if (returnValue) {
+      returnAgain(_dispatchId, returnValue);
+    }
+  }
+};
+
 const changeHandler = async (change: any) => {
   console.log({ caller: 'ChangeHandler', change });
   const { id } = change;
   if (!globalThis.watches) {
     globalThis.watches = new Map();
   }
-  const params = globalThis.watches.get(id);
-  if (params) {
-    const { method, _dispatchId, id, ...otherParams } = params;
-    const returnValue = await methods[<keyof typeof methods>method](params);
-    if (returnValue) {
-      returnAgain(_dispatchId, returnValue);
-    }
-  }
+  sendUpdate(globalThis.watches.get(id));
+
+  const parentId = id.substring(0, id.lastIndexOf('/'));
+  sendUpdate(globalThis.watches.get(parentId));
 };
 
 export default changeHandler;