Refactoring to watch WPT updates.

src/components/wpt/Wpt.tsx

@@ -1,4 +1,9 @@
-import { Component, createEffect, createResource } from 'solid-js';
+import {
+  Component,
+  createEffect,
+  createResource,
+  createSignal,
+} from 'solid-js';
 
 import dispatch from '../../workers/dispatcher-main';
 import VectorSource from 'ol/source/Vector';
@@ -12,15 +17,27 @@ interface Props {
 }
 
 export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
-  const [wpt] = createResource(
-    wptId,
-    async () =>
-      await dispatch({
-        action: 'getWpt',
-        params: {
-          id: wptId,
-        },
-      })
+  const [wpt, setWpt] = createSignal<Wpt>();
+
+  const wptCallBack = (error: any, result: any) => {
+    if (error) {
+      console.error({ caller: 'wptCallBack', error });
+    } else {
+      console.log({ caller: 'wptCallBack', result });
+      setWpt(result);
+    }
+  };
+
+  dispatch(
+    {
+      action: 'getAndWatch',
+      params: {
+        id: wptId,
+        method: 'getWpt',
+      },
+    },
+    wptCallBack,
+    true
   );
 
   createEffect(() => {

src/db/change-handler.ts

@@ -1,6 +1,46 @@
+import { getWpt } from '../db/wpt';
+import { returnAgain } from '../workers/dispatcher-worker';
 
-const changeHandler = (change: any) => {
-    console.log({caller: 'ChangeHandler', change});
+declare global {
+  var watches: Map<string, any>;
 }
 
-export default changeHandler;
+const methods = {
+  getWpt,
+};
+
+const changeHandler = async (change: any) => {
+  console.log({ caller: 'ChangeHandler', change });
+  const { id } = change.id;
+  if (!globalThis.watches) {
+    globalThis.watches = new Map();
+  }
+  const params = globalThis.watches.get(id);
+  if (params) {
+    const { method, _dispatchId, id, ...otherParams } = params;
+    const returnValue = await methods[<keyof typeof methods>method](params);
+    if (false) {
+      returnAgain(_dispatchId, returnValue);
+    }
+  }
+};
+
+export default changeHandler;
+
+export const getAndWatch = async (params: any) => {
+  const { method, _dispatchId, id, ...otherParams } = params;
+  if (!globalThis.watches) {
+    globalThis.watches = new Map();
+  }
+  globalThis.watches.set(id, params);
+  const returnValue = await methods[<keyof typeof methods>method](params);
+  return returnValue;
+};
+
+export const cancelWatch = (params: any) => {
+  if (!globalThis.watches) {
+    globalThis.watches = new Map();
+  }
+  const { id } = params;
+  globalThis.watches.delete(id);
+};

src/db/index.ts

@@ -99,12 +99,8 @@ export const initDb = async (params: any) => {
   console.log({ caller: 'initDb / before db.changes' });
 
   const changes = db
-    .changes({ since: 'now', live: true, include_docs: true })
+    .changes({ since: 'now', live: true, include_docs: false })
     .on('change', changeHandler)
-    // .on('change', (info: any) => {
-    //   console.log({ caller: 'changes / change', info });
-    //   changeHandler(info);
-    // })
     .on('complete', (info: any) => {
       console.log({ caller: 'changes / complete', info });
     })
@@ -112,7 +108,7 @@ export const initDb = async (params: any) => {
       console.log({ caller: 'changes / complete', error });
     });
 
-  console.log({ caller: 'initDb / back from db.changes', changes });
+  // console.log({ caller: 'initDb / back from db.changes', changes });
 
   //  changes.cancel();
 

src/workers/dispatcher-main.ts

@@ -22,8 +22,10 @@ export const init = () => {
       payload,
       dispatcherQueue: JSON.parse(JSON.stringify(dispatcherQueue)),
     });
-    dispatcherQueue.queue.get(id)(null, payload);
-    dispatcherQueue.queue.delete(id);
+    dispatcherQueue.queue.get(id).callBack(null, payload);
+    if (!dispatcherQueue.queue.get(id).live) {
+      cancel(id);
+    }
   };
 
   dispatch({ action: 'initDb' });
@@ -31,7 +33,8 @@ export const init = () => {
 
 const dispatch = (
   payload: any,
-  callBack?: (error: any, result: any) => void
+  callBack?: (error: any, result: any) => void,
+  live?: boolean
 ) => {
   console.log({ caller: 'dispatcher-main / dispatch', payload });
   if (worker === undefined) {
@@ -50,7 +53,7 @@ const dispatch = (
     });
   }
   /** Otherwise, use the callback function */
-  dispatcherQueue.queue.set(dispatcherQueue.index, callBack);
+  dispatcherQueue.queue.set(dispatcherQueue.index, { callBack, live });
   const message = {
     id: dispatcherQueue.index++,
     payload: payload,
@@ -63,4 +66,8 @@ const dispatch = (
   });
 };
 
+export const cancel = (id: number) => {
+  dispatcherQueue.queue.delete(id);
+};
+
 export default dispatch;

src/workers/dispatcher-worker.ts

@@ -1,5 +1,6 @@
 /// <reference lib="webworker" />
 import { initDb } from '../db';
+import { cancelWatch, getAndWatch } from '../db/change-handler';
 import {
   putNewGpx,
   existsGpx,
@@ -14,34 +15,43 @@ import { getWpt } from '../db/wpt';
 
 //const self = globalThis as unknown as WorkerGlobalScope;
 
-const actions = {
-  initDb,
-  putNewGpx,
-  putNewTrk,
-  existsGpx,
-  pruneAndSaveImportedGpx,
-  getAllGpxes,
-  getGpxesForViewport,
-  getGpx,
-  getTrk,
-  getTrkseg,
-  getWpt
-};
-
-console.log({ caller: 'dispatcher-worker', actions });
+console.log({ caller: 'dispatcher-worker' });
 
 onmessage = async function (e) {
+  const actions = {
+    initDb,
+    putNewGpx,
+    putNewTrk,
+    existsGpx,
+    pruneAndSaveImportedGpx,
+    getAllGpxes,
+    getGpxesForViewport,
+    getGpx,
+    getTrk,
+    getTrkseg,
+    getWpt,
+
+    getAndWatch,
+    cancelWatch,
+  };
+
   console.log({ caller: 'dispatcher-worker / onmessage', e });
   const { id, payload } = e.data;
   var returnValue: any = 'unknownAction';
   if (payload.action in actions) {
     console.log({ caller: 'dispatcher-worker / awaiting', id, payload });
-    returnValue = await actions[<keyof typeof actions>payload.action](
-      payload.params
-    );
+    returnValue = await actions[<keyof typeof actions>payload.action]({
+      ...payload.params,
+      _dispatchId: id,
+    });
   }
   postMessage({ id: id, payload: returnValue });
   console.log({ caller: 'dispatcher-worker / response sent', id, returnValue });
 };
 
+export const returnAgain = (id: number, returnValue: any) => {
+  console.log({ caller: 'dispatcher-worker / returnAgain', id, returnValue });
+  postMessage({ id: id, payload: returnValue });
+};
+
 //export default self;