Refactoring to implement visualization and edition features.

src/components/all-gpxes/AllGpxes.tsx

@@ -1,60 +1,28 @@
-import {
-  Component,
-  createEffect,
-  createSignal,
-  For,
-  onCleanup,
-  Suspense,
-} from 'solid-js';
+import { Component, createEffect, For, onCleanup, Suspense } from 'solid-js';
 
 import OlMap from 'ol/Map';
 
-import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
 import Gpx from '../gpx';
+import {
+  createCachedSignal,
+  destroyCachedSignal,
+} from '../../workers/cached-signals';
 
 interface Props {
   map: () => OlMap | null;
 }
 
-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 }) => {
+  const params = {
+    id: 'gpx',
+    method: 'getAllGpxes',
+  };
+  const allGpxIds = createCachedSignal(params);
+
+  onCleanup(() => {
+    destroyCachedSignal(params);
+  });
+
   createEffect(() => {
     console.log({ caller: 'AllGpxes', allGpxes: allGpxIds(), map: map() });
   });