Refactoring to implement visualization and edition features.

src/components/all-gpxes/AllGpxes.tsx

@@ -1,60 +1,28 @@
-import {
+import { Component, createEffect, For, onCleanup, Suspense } from 'solid-js';
-  Component,
-  createEffect,
-  createSignal,
-  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() });
   });

src/components/gpx/Gpx.tsx

@@ -1,8 +1,6 @@
 import {
   Component,
   createEffect,
-  createResource,
-  createSignal,
   For,
   onCleanup,
   Suspense,
@@ -10,15 +8,17 @@ import {
 
 import OlMap from 'ol/Map';
 
-import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
 import Trk from '../trk';
-import getUri from '../../lib/ids';
 import VectorSource from 'ol/source/Vector';
 import VectorLayer from 'ol/layer/Vector';
 
 import style from './styles';
 import Wpt from '../wpt';
 import Rte from '../rte';
+import {
+  createCachedSignal,
+  destroyCachedSignal,
+} from '../../workers/cached-signals';
 
 interface Props {
   gpxId: string;
@@ -26,42 +26,14 @@ interface Props {
 }
 
 export const Gpx: Component<Props> = ({ map, gpxId }) => {
-  const [gpx, setGpx] = createSignal<Gpx>();
+  const params = {
-  const [dispatchId, setDispatchId] = createSignal<number>(-1);
+    id: gpxId,
-
+    method: 'getGpx',
-  const gpxCallBack = (error: any, result: any, id?: number) => {
-    if (error) {
-      console.error({ caller: 'gpxCallBack', error });
-    } else {
-      console.log({ caller: 'gpxCallBack', result });
-      setGpx(result);
-    }
-    if (id) {
-      setDispatchId(id);
-    }
   };
-
+  const gpx = createCachedSignal(params);
-  dispatch(
-    {
-      action: 'getAndWatch',
-      params: {
-        id: gpxId,
-        method: 'getGpx',
-      },
-    },
-    gpxCallBack,
-    true
-  );
 
   onCleanup(() => {
-    dispatch({
+    destroyCachedSignal(params);
-      action: 'cancelWatch',
-      params: {
-        id: gpxId,
-        method: 'getGpx',
-      },
-    });
-    cancelDispatch(dispatchId());
   });
 
   const vectorSource = new VectorSource();

src/components/gpx/GpxViewer.tsx

@@ -0,0 +1,16 @@
+import { Component } from 'solid-js';
+import cache from '../../lib/cache';
+import Tree from '../tree';
+
+interface Props {
+  gpxId: string;
+}
+
+const GpxViewer: Component<Props> = ({ gpxId }) => {
+  const gpx = cache.get({ cacheId: 'signals', key: gpxId });
+  console.log({ caller: 'GpxViewer', gpx: gpx() });
+  const title = () => {};
+  return <Tree title={'gpx'} content={undefined} subTree={undefined} />;
+};
+
+export default GpxViewer;

src/components/gpx/index.ts

@@ -1 +1,3 @@
 export { default } from './Gpx';
+
+export { default as GpxViewer } from './GpxViewer';

src/components/infos/Infos.tsx

@@ -9,6 +9,7 @@ import { Paper, Stack } from '@suid/material';
 import styled from '@suid/material/styles/styled';
 import Dialog from '../dialog';
 import Tree from '../tree';
+import { GpxViewer } from '../gpx';
 
 const Item = styled(Paper)(({ theme }) => ({
   ...theme.typography.body2,
@@ -124,7 +125,7 @@ const FeaturesTree: Component<{ featuresHierarchy: any }> = ({
       subTree={Object.keys(featuresHierarchy)
         .filter((key: string) => key.startsWith('gpx/'))
         .map((key: string) => (
-          <FeaturesTree featuresHierarchy={featuresHierarchy[key]} />
+          <GpxViewer gpxId={key} />
         ))}
     />
   );

src/components/rte/Rte.tsx

@@ -3,6 +3,10 @@ import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
 import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
 import VectorSource from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
+import {
+  createCachedSignal,
+  destroyCachedSignal,
+} from '../../workers/cached-signals';
 
 interface Props {
   rteId: string;
@@ -11,42 +15,14 @@ interface Props {
 }
 
 export const Rte: Component<Props> = ({ vectorSource, rteId, context }) => {
-  const [rte, setRte] = createSignal<Rte>();
+  const params = {
-  const [dispatchId, setDispatchId] = createSignal<number>(-1);
+    id: rteId,
-
+    method: 'getRte',
-  const rteCallBack = (error: any, result: any, id?: number) => {
-    if (error) {
-      console.error({ caller: 'rteCallBack', error });
-    } else {
-      console.log({ caller: 'rteCallBack', result });
-      setRte(result);
-    }
-    if (id) {
-      setDispatchId(id);
-    }
   };
-
+  const rte = createCachedSignal(params);
-  dispatch(
-    {
-      action: 'getAndWatch',
-      params: {
-        id: rteId,
-        method: 'getRte',
-      },
-    },
-    rteCallBack,
-    true
-  );
 
   onCleanup(() => {
-    dispatch({
+    destroyCachedSignal(params);
-      action: 'cancelWatch',
-      params: {
-        id: rteId,
-        method: 'getRte',
-      },
-    });
-    cancelDispatch(dispatchId());
   });
 
   createEffect(() => {

src/components/trk/Trk.tsx

@@ -15,6 +15,10 @@ import getUri from '../../lib/ids';
 
 import Trkseg from '../trkseg';
 import VectorSource from 'ol/source/Vector';
+import {
+  createCachedSignal,
+  destroyCachedSignal,
+} from '../../workers/cached-signals';
 
 interface Props {
   trkId: string;
@@ -22,42 +26,14 @@ interface Props {
   context: any;
 }
 export const Trk: Component<Props> = ({ vectorSource, trkId, context }) => {
-  const [trk, setTrk] = createSignal<Trk>();
+  const params = {
-  const [dispatchId, setDispatchId] = createSignal<number>(-1);
+    id: trkId,
-
+    method: 'getTrk',
-  const trkCallBack = (error: any, result: any, id?: number) => {
-    if (error) {
-      console.error({ caller: 'trkCallBack', error });
-    } else {
-      console.log({ caller: 'trkCallBack', result });
-      setTrk(result);
-    }
-    if (id) {
-      setDispatchId(id);
-    }
   };
-
+  const trk = createCachedSignal(params);
-  dispatch(
-    {
-      action: 'getAndWatch',
-      params: {
-        id: trkId,
-        method: 'getTrk',
-      },
-    },
-    trkCallBack,
-    true
-  );
 
   onCleanup(() => {
-    dispatch({
+    destroyCachedSignal(params);
-      action: 'cancelWatch',
-      params: {
-        id: trkId,
-        method: 'getTrk',
-      },
-    });
-    cancelDispatch(dispatchId());
   });
 
   createEffect(() => {

src/components/trkseg/Trkseg.tsx

@@ -3,6 +3,10 @@ import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
 import dispatch, { cancelDispatch } from '../../workers/dispatcher-main';
 import VectorSource from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
+import {
+  createCachedSignal,
+  destroyCachedSignal,
+} from '../../workers/cached-signals';
 
 interface Props {
   trksegId: string;
@@ -15,42 +19,14 @@ export const Trkseg: Component<Props> = ({
   trksegId,
   context,
 }) => {
-  const [trkseg, setTrkseg] = createSignal<Trkseg>();
+  const params = {
-  const [dispatchId, setDispatchId] = createSignal<number>(-1);
+    id: trksegId,
-
+    method: 'getTrkseg',
-  const trksegCallBack = (error: any, result: any, id?: number) => {
-    if (error) {
-      console.error({ caller: 'trksegCallBack', error });
-    } else {
-      console.log({ caller: 'trksegCallBack', result });
-      setTrkseg(result);
-    }
-    if (id) {
-      setDispatchId(id);
-    }
   };
-
+  const trkseg = createCachedSignal(params);
-  dispatch(
-    {
-      action: 'getAndWatch',
-      params: {
-        id: trksegId,
-        method: 'getTrkseg',
-      },
-    },
-    trksegCallBack,
-    true
-  );
 
   onCleanup(() => {
-    dispatch({
+    destroyCachedSignal(params);
-      action: 'cancelWatch',
-      params: {
-        id: trksegId,
-        method: 'getTrkseg',
-      },
-    });
-    cancelDispatch(dispatchId());
   });
 
   createEffect(() => {

src/components/wpt/Wpt.tsx

@@ -7,6 +7,11 @@ import { useI18n } from '@solid-primitives/i18n';
 import { cloneDeep } from 'lodash';
 import Dialog from '../dialog';
 import { Box, Button, Stack, TextField } from '@suid/material';
+import wpt from '.';
+import {
+  createCachedSignal,
+  destroyCachedSignal,
+} from '../../workers/cached-signals';
 
 interface Props {
   wptId: string;
@@ -26,9 +31,17 @@ export const Wpt: Component<Props> = ({
 }) => {
   const [t, { add, locale, dict }] = useI18n();
 
-  const [wpt, setWpt] = createSignal<Wpt>();
+  const params = {
+    id: wptId,
+    method: 'getWpt',
+  };
+  const wpt = createCachedSignal(params);
+
+  onCleanup(() => {
+    destroyCachedSignal(params);
+  });
+
   const [editedWpt, setEditedWpt] = createSignal<Wpt>();
-  const [dispatchId, setDispatchId] = createSignal<number>(-1);
 
   const getTitle = () => {
     if (wpt()?.name) {
@@ -37,41 +50,6 @@ export const Wpt: Component<Props> = ({
     return t('wpt');
   };
 
-  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(
-    {
-      action: 'getAndWatch',
-      params: {
-        id: wptId,
-        method: 'getWpt',
-      },
-    },
-    wptCallBack,
-    true
-  );
-
-  onCleanup(() => {
-    dispatch({
-      action: 'cancelWatch',
-      params: {
-        id: wptId,
-        method: 'getWpt',
-      },
-    });
-    cancelDispatch(dispatchId());
-  });
-
   const [mode, setMode] = createSignal<Mode>(Mode.CLOSED);
 
   const edit = () => {

src/lib/cache.ts

@@ -32,8 +32,8 @@ const cache = {
       return null;
     }
     const value = k.get(key);
-    k.delete(key);
+//    k.delete(key);
-    k.set(key, value);
+//    k.set(key, value);
     return value;
   },
   delete: (params: any) => {

src/workers/cached-signals.ts

@@ -0,0 +1,41 @@
+import { createSignal } from 'solid-js';
+import cache from '../lib/cache';
+import dispatch, { cancelDispatch } from './dispatcher-main';
+
+export const createCachedSignal = (params: any) => {
+  const [signal, setSignal] = createSignal();
+  const callBack = (error: any, result: any, id?: number) => {
+    if (error) {
+      console.error({ caller: 'createCachedSignal / callBack', error });
+    } else {
+      console.log({ caller: 'createCachedSignal / callBack', result });
+      setSignal(result);
+    }
+    if (id) {
+      cache.set({ cacheId: 'dispatchIds', key: params.id, value: id });
+    }
+  };
+
+  dispatch(
+    {
+      action: 'getAndWatch',
+      params,
+    },
+    callBack,
+    true
+  );
+
+  cache.set({ cacheId: 'signals', key: params.id, value: signal });
+
+  return signal;
+};
+
+export const destroyCachedSignal = (params: any) => {
+  dispatch({
+    action: 'cancelWatch',
+    params,
+  });
+  const dispatchId = cache.get({ cacheId: 'dispatchIds', key: params.id });
+  cancelDispatch(dispatchId);
+  cache.delete({ cacheId: 'signals', key: params.id });
+};