diff --git a/src/components/all-gpxes/AllGpxes.tsx b/src/components/all-gpxes/AllGpxes.tsx index 7d6c14b..87d1d78 100644 --- a/src/components/all-gpxes/AllGpxes.tsx +++ b/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([]); -const [dispatchId, setDispatchId] = createSignal(-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 = ({ map }) => { + const params = { + id: 'gpx', + method: 'getAllGpxes', + }; + const allGpxIds = createCachedSignal(params); + + onCleanup(() => { + destroyCachedSignal(params); + }); + createEffect(() => { console.log({ caller: 'AllGpxes', allGpxes: allGpxIds(), map: map() }); }); diff --git a/src/components/gpx/Gpx.tsx b/src/components/gpx/Gpx.tsx index 88e5fb8..9af9f79 100644 --- a/src/components/gpx/Gpx.tsx +++ b/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 = ({ map, gpxId }) => { - const [gpx, setGpx] = createSignal(); - const [dispatchId, setDispatchId] = createSignal(-1); - - 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 params = { + id: gpxId, + method: 'getGpx', }; - - dispatch( - { - action: 'getAndWatch', - params: { - id: gpxId, - method: 'getGpx', - }, - }, - gpxCallBack, - true - ); + const gpx = createCachedSignal(params); onCleanup(() => { - dispatch({ - action: 'cancelWatch', - params: { - id: gpxId, - method: 'getGpx', - }, - }); - cancelDispatch(dispatchId()); + destroyCachedSignal(params); }); const vectorSource = new VectorSource(); diff --git a/src/components/gpx/GpxViewer.tsx b/src/components/gpx/GpxViewer.tsx new file mode 100644 index 0000000..0dec52d --- /dev/null +++ b/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 = ({ gpxId }) => { + const gpx = cache.get({ cacheId: 'signals', key: gpxId }); + console.log({ caller: 'GpxViewer', gpx: gpx() }); + const title = () => {}; + return ; +}; + +export default GpxViewer; diff --git a/src/components/gpx/index.ts b/src/components/gpx/index.ts index e0b42cf..ce1117e 100644 --- a/src/components/gpx/index.ts +++ b/src/components/gpx/index.ts @@ -1 +1,3 @@ export { default } from './Gpx'; + +export { default as GpxViewer } from './GpxViewer'; diff --git a/src/components/infos/Infos.tsx b/src/components/infos/Infos.tsx index e63067e..a5955a2 100644 --- a/src/components/infos/Infos.tsx +++ b/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) => ( - + ))} /> ); diff --git a/src/components/rte/Rte.tsx b/src/components/rte/Rte.tsx index 32aa061..e5c0a2a 100644 --- a/src/components/rte/Rte.tsx +++ b/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 = ({ vectorSource, rteId, context }) => { - const [rte, setRte] = createSignal(); - const [dispatchId, setDispatchId] = createSignal(-1); - - 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 params = { + id: rteId, + method: 'getRte', }; - - dispatch( - { - action: 'getAndWatch', - params: { - id: rteId, - method: 'getRte', - }, - }, - rteCallBack, - true - ); + const rte = createCachedSignal(params); onCleanup(() => { - dispatch({ - action: 'cancelWatch', - params: { - id: rteId, - method: 'getRte', - }, - }); - cancelDispatch(dispatchId()); + destroyCachedSignal(params); }); createEffect(() => { diff --git a/src/components/trk/Trk.tsx b/src/components/trk/Trk.tsx index 1d56099..749b8ef 100644 --- a/src/components/trk/Trk.tsx +++ b/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 = ({ vectorSource, trkId, context }) => { - const [trk, setTrk] = createSignal(); - const [dispatchId, setDispatchId] = createSignal(-1); - - 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 params = { + id: trkId, + method: 'getTrk', }; - - dispatch( - { - action: 'getAndWatch', - params: { - id: trkId, - method: 'getTrk', - }, - }, - trkCallBack, - true - ); + const trk = createCachedSignal(params); onCleanup(() => { - dispatch({ - action: 'cancelWatch', - params: { - id: trkId, - method: 'getTrk', - }, - }); - cancelDispatch(dispatchId()); + destroyCachedSignal(params); }); createEffect(() => { diff --git a/src/components/trkseg/Trkseg.tsx b/src/components/trkseg/Trkseg.tsx index 94282b1..cf92d03 100644 --- a/src/components/trkseg/Trkseg.tsx +++ b/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 = ({ trksegId, context, }) => { - const [trkseg, setTrkseg] = createSignal(); - const [dispatchId, setDispatchId] = createSignal(-1); - - 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 params = { + id: trksegId, + method: 'getTrkseg', }; - - dispatch( - { - action: 'getAndWatch', - params: { - id: trksegId, - method: 'getTrkseg', - }, - }, - trksegCallBack, - true - ); + const trkseg = createCachedSignal(params); onCleanup(() => { - dispatch({ - action: 'cancelWatch', - params: { - id: trksegId, - method: 'getTrkseg', - }, - }); - cancelDispatch(dispatchId()); + destroyCachedSignal(params); }); createEffect(() => { diff --git a/src/components/wpt/Wpt.tsx b/src/components/wpt/Wpt.tsx index 122c72a..86ed529 100644 --- a/src/components/wpt/Wpt.tsx +++ b/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 = ({ }) => { const [t, { add, locale, dict }] = useI18n(); - const [wpt, setWpt] = createSignal(); + const params = { + id: wptId, + method: 'getWpt', + }; + const wpt = createCachedSignal(params); + + onCleanup(() => { + destroyCachedSignal(params); + }); + const [editedWpt, setEditedWpt] = createSignal(); - const [dispatchId, setDispatchId] = createSignal(-1); const getTitle = () => { if (wpt()?.name) { @@ -37,41 +50,6 @@ export const Wpt: Component = ({ 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.CLOSED); const edit = () => { diff --git a/src/lib/cache.ts b/src/lib/cache.ts index 14e3dc6..8d64ad9 100644 --- a/src/lib/cache.ts +++ b/src/lib/cache.ts @@ -32,8 +32,8 @@ const cache = { return null; } const value = k.get(key); - k.delete(key); - k.set(key, value); +// k.delete(key); +// k.set(key, value); return value; }, delete: (params: any) => { diff --git a/src/workers/cached-signals.ts b/src/workers/cached-signals.ts new file mode 100644 index 0000000..af8a594 --- /dev/null +++ b/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 }); +};