From 7c09a5536a3e12b4f5739ed11b3d1db377ce2d89 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Thu, 17 Nov 2022 23:04:47 +0100
Subject: [PATCH] Adding a simple cache to keep track of points

---
 src/components/map/CurrentLocation.tsx |  1 +
 src/components/map/Marker.tsx          | 18 ++++++++-
 src/components/map/Trkseg.tsx          |  2 +
 src/lib/cache.ts                       | 54 ++++++++++++++++++++++++++
 4 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/cache.ts

diff --git a/src/components/map/CurrentLocation.tsx b/src/components/map/CurrentLocation.tsx
index 5961d25..022cca3 100644
--- a/src/components/map/CurrentLocation.tsx
+++ b/src/components/map/CurrentLocation.tsx
@@ -23,6 +23,7 @@ export const CurrentLocation: react.FC<CurrentLocationProperties> = (
   return location !== null ? (
     <Marker
       key='currentLocation'
+      id='currentLocation'
       coordinates={location}
       icon={
         <circle
diff --git a/src/components/map/Marker.tsx b/src/components/map/Marker.tsx
index 0fad209..edaa916 100644
--- a/src/components/map/Marker.tsx
+++ b/src/components/map/Marker.tsx
@@ -1,8 +1,10 @@
-import react, { ReactNode } from 'react';
+import react, { ReactNode, useEffect } from 'react';
 import { lat2tile, lon2tile } from '../../lib/geo';
+import cache from '../../lib/cache';
 import { geoPoint, Rectangle, TileKeyObject } from './types';
 
 export interface MarkerProperties {
+  id: string;
   coordinates: geoPoint;
   icon: ReactNode;
   keyObject?: TileKeyObject;
@@ -14,6 +16,14 @@ export interface MarkerProperties {
 export const Marker: react.FC<MarkerProperties> = (props: MarkerProperties) => {
   console.log(`Rendering Marker`);
 
+  useEffect(() => {
+    console.log(`Marker onMount, id:${props.id}`);
+    return () => {
+      console.log(`Marker onUnmount, id:${props.id}`);
+      cache.delete({ cacheId: 'points', key: props.id });
+    };
+  }, []);
+
   if (
     props.keyObject === undefined ||
     props.zoom === undefined ||
@@ -31,11 +41,17 @@ export const Marker: react.FC<MarkerProperties> = (props: MarkerProperties) => {
     y < props.viewPort.topLeft.y ||
     y > props.viewPort.bottomRight.y + 1
   ) {
+    cache.delete({ cacheId: 'points', key: props.id });
     console.log(
       `Marker ${x}, ${y} out of viewport: ${JSON.stringify(props.viewPort)} `
     );
     return null;
   }
+  cache.set({
+    cacheId: 'points',
+    key: props.id,
+    value: { id: props.id, coordinates: props.coordinates },
+  });
   return (
     <g
       transform={`translate(${(x - props.keyObject.x) * 256}, ${
diff --git a/src/components/map/Trkseg.tsx b/src/components/map/Trkseg.tsx
index 7f70b6f..f4125d3 100644
--- a/src/components/map/Trkseg.tsx
+++ b/src/components/map/Trkseg.tsx
@@ -50,6 +50,7 @@ export const Trkseg: react.FC<TrksegProperties> = (props: TrksegProperties) => {
       {trkseg[1] !== undefined ? (
         <>
           <Marker
+            id={`${props.id}/start`}
             coordinates={trkseg[1].doc.doc.$ as geoPoint}
             key='start'
             keyObject={props.keyObject}
@@ -67,6 +68,7 @@ export const Trkseg: react.FC<TrksegProperties> = (props: TrksegProperties) => {
 
           <path d={d} pointerEvents='none' className={css.track} />
           <Marker
+            id={`${props.id}/finish`}
             coordinates={trkseg.at(-1).doc.doc.$ as geoPoint}
             key='finish'
             keyObject={props.keyObject}
diff --git a/src/lib/cache.ts b/src/lib/cache.ts
new file mode 100644
index 0000000..f239234
--- /dev/null
+++ b/src/lib/cache.ts
@@ -0,0 +1,54 @@
+/**
+ * @hidden
+ */
+export const thisIsAModule = true;
+
+/**
+ *
+ */
+
+declare global {
+  var _allCaches: any;
+}
+
+globalThis._allCaches = new Map();
+
+const cache = {
+  set: (params: any) => {
+    const { cacheId, key, value } = params;
+    if (!_allCaches.has(cacheId)) {
+      _allCaches.set(cacheId, new Map());
+    }
+    const k = _allCaches.get(cacheId);
+    k.set(key, value);
+  },
+  get: (params: any) => {
+    const { cacheId, key } = params;
+    if (!_allCaches.has(cacheId)) {
+      return null;
+    }
+    const k = _allCaches.get(cacheId);
+    if (!k.has(key)) {
+      return null;
+    }
+    const value = k.get(key);
+    k.delete(key);
+    k.set(key, value);
+    return value;
+  },
+  delete: (params: any) => {
+    const { cacheId, key } = params;
+    if (!_allCaches.has(cacheId)) {
+      return null;
+    }
+    const k = _allCaches.get(cacheId);
+    if (!k.has(key)) {
+      return null;
+    }
+    const value = k.get(key);
+    k.delete(key);
+    return value;
+  },
+};
+
+export default cache;