Using peekCachedSignal to speedup GpxDialog

src/components/dialog/Dialog.tsx

@@ -3,11 +3,9 @@ import {
   Dialog as MuiDialog,
   DialogContent,
   DialogTitle,
-  Grid,
   IconButton,
 } from '@suid/material';
 import CloseIcon from '@suid/icons-material/Close';
-import { debounce } from 'lodash';
 
 const Dialog: Component<{
   open: boolean;

src/components/gpx-dialog/GpxDialog.tsx

@@ -2,6 +2,8 @@ import { useI18n } from '@solid-primitives/i18n';
 import { Box, Button, IconButton, SvgIcon, TextField } from '@suid/material';
 import { cloneDeep } from 'lodash';
 import { Component, createSignal, Show } from 'solid-js';
+import { newEmptyGpx } from '../../db/gpx';
+import { peekCachedSignal } from '../../workers/cached-signals';
 import dispatch from '../../workers/dispatcher-main';
 import Dialog from '../dialog';
 import GpxChooser from '../gpx-chooser';
@@ -18,19 +20,24 @@ const GpxDialog: Component<{}> = (props) => {
   const [selectedGpxId, setSelectedGpxId] = createSignal<string>('');
   const [gpx, setGpx] = createSignal<Gpx>();
 
-  console.log({ caller: 'GpxDialog', currentGpx: currentGpxId() });
+  console.log({ caller: 'GpxDialog', currentGpxId: currentGpxId() });
+
+  const fetchGpx = (gpxId: string) => {
+    if (gpxId === 'new') {
+      return newEmptyGpx();
+    }
+    const newGpx = peekCachedSignal({
+      id: gpxId,
+      action: 'getGpx',
+    });
+    return newGpx();
+  };
 
   const handleClickOpen = async () => {
     setOpen(true);
     setSelectedGpxId(currentGpxId());
     if (currentGpxId() !== '') {
-      const newGpx = await dispatch({
+      setGpx(fetchGpx(currentGpxId()) as Gpx);
-        action: 'getGpx',
-        params: {
-          id: currentGpxId(),
-        },
-      });
-      setGpx(newGpx as Gpx);
     }
     console.log({
       caller: 'GpxDialog / handleClickOpen',
@@ -38,6 +45,7 @@ const GpxDialog: Component<{}> = (props) => {
       gpx: gpx(),
     });
   };
+
   const handleClose = (event: any, reason?: string) => {
     console.log({
       caller: 'GpxDialog / handleClose',
@@ -50,15 +58,10 @@ const GpxDialog: Component<{}> = (props) => {
   };
   const gpxChangeHandler = async (gpxId: string) => {
     setSelectedGpxId(gpxId);
-    const newGpx = await dispatch({
+    setGpx(fetchGpx(gpxId) as Gpx);
-      action: 'getGpx',
-      params: {
-        id: gpxId,
-      },
-    });
-    setGpx(newGpx as Gpx);
     console.log({
       caller: 'GpxDialog / gpxChangeHandler',
+      gpxId,
       gpx: gpx(),
     });
   };

src/components/gpx/GpxViewer.tsx

@@ -12,7 +12,7 @@ interface Props {
 }
 
 const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
-  const gpx = peekCachedSignal({ id: gpxId, method: 'getGpx' });
+  const gpx = peekCachedSignal({ id: gpxId, action: 'getGpx' });
   console.log({ caller: 'GpxViewer', gpxId, restrictToHierarchy, gpx: gpx() });
   const title = () => {
     return gpx().metadata.name;

src/db/gpx.ts

@@ -37,6 +37,8 @@ export const emptyGpx: Gpx = {
   extensions: undefined,
 };
 
+export const newEmptyGpx = () => cloneDeep(emptyGpx);
+
 export const putNewGpx = async (
   id: IdGpx = { gpx: intToGpxId(Date.now()) }
 ) => {

src/lib/osm.ts

@@ -37,7 +37,7 @@ export const getVillageOrTown = (address: any) => {
   ];
 
   for (let synonym of citySynonyms) {
-    console.log({ caller: 'getVillageOrTown', address, synonym });
+  //  console.log({ caller: 'getVillageOrTown', address, synonym });
     if (synonym in address?.address) {
       return address?.address[synonym];
     }

src/workers/cached-signals.ts

@@ -32,6 +32,7 @@ export const createCachedSignal = (params: any) => {
 
 export const peekCachedSignal = (params: any) => {
   const cachedSignal = cache.get({ cacheId: 'signals', key: params.id });
+  console.log({ caller: 'peekCachedSignal', params, cachedSignal });
   if (cachedSignal !== null) {
     return cachedSignal;
   }