Adapting the address fetcher for rtes.

src/components/display-or-get-address/DisplayOrGetAddress.tsx

@@ -8,43 +8,34 @@ import { useI18n } from '@solid-primitives/i18n';
 import dispatch from '../../workers/dispatcher-main';
 
 interface Props {
-  target: () => any;
-  putAction: string;
-  putParamName: string;
+  wpt: () => Wpt;
+  dispatchParams: (wpt: Wpt) => { action: string; params: any };
 }
 
-const DisplayOrGetAddress: Component<Props> = ({
-  target,
-  putAction,
-  putParamName,
-}) => {
+const DisplayOrGetAddress: Component<Props> = ({ wpt, dispatchParams }) => {
   const [t, { add, locale, dict }] = useI18n();
 
   const findClickHandler = async () => {
-    const address = await findAddress(target().$.lon, target().$.lat, locale);
-    const updatedTarget = cloneDeep(target());
+    console.log({ caller: 'findClickHandler', wpt: wpt() });
+    const address = await findAddress(wpt().$.lon, wpt().$.lat, locale);
+    const updatedTarget = cloneDeep(wpt());
     if (updatedTarget.extensions === undefined) {
       updatedTarget.extensions = {};
     }
     updatedTarget.extensions.address = address;
-    const params: any = { id: target().id };
-    params[putParamName] = updatedTarget;
-    dispatch({
-      action: putAction,
-      params,
-    });
+    dispatch(dispatchParams(updatedTarget));
   };
 
   return (
     <Show
-      when={target().extensions?.address}
+      when={wpt()?.extensions?.address}
       fallback={
         <IconButton color='primary' onClick={findClickHandler}>
           <SearchIcon />
         </IconButton>
       }
     >
-      <>{getVillageOrTown(target().extensions?.address)}</>
+      <>{getVillageOrTown(wpt()?.extensions?.address)}</>
     </Show>
   );
 };

src/components/display-or-get-address/DisplayOrGetStartEndAddresses.tsx

@@ -0,0 +1,36 @@
+import { Component } from 'solid-js';
+import { useI18n } from '@solid-primitives/i18n';
+import DisplayOrGetAddress from '.';
+
+interface Props {
+  id: string;
+  wpts: () => Wpt[];
+  putAction: string;
+}
+
+const DisplayOrGetStartEndAddresses: Component<Props> = (props) => {
+  const { id, wpts, putAction } = props;
+  const [t, { add, locale, dict }] = useI18n();
+
+  const dispatchParamsFactory = (index: number) => (wpt: Wpt) => ({
+    action: putAction,
+    params: { id, index, wpt },
+  });
+
+  return (
+    <>
+      {t('from')}{' '}
+      <DisplayOrGetAddress
+        wpt={() => wpts()?.at(0)}
+        dispatchParams={dispatchParamsFactory(0)}
+      />{' '}
+      {t('to')}{' '}
+      <DisplayOrGetAddress
+        wpt={() => wpts()?.at(-1)}
+        dispatchParams={dispatchParamsFactory(-1)}
+      />
+    </>
+  );
+};
+
+export default DisplayOrGetStartEndAddresses;

src/components/display-or-get-address/index.ts

@@ -1 +1,2 @@
 export { default } from './DisplayOrGetAddress';
+export { default as DisplayOrGetStartEndAddresses } from './DisplayOrGetStartEndAddresses';

src/components/rte/RteViewer.tsx

@@ -7,7 +7,9 @@ import DeleteIcon from '@suid/icons-material/Delete';
 import QuestionMarkIcon from '@suid/icons-material/QuestionMark';
 import Tree from '../tree';
 import { LineString } from 'ol/geom';
-import DisplayOrGetAddress from '../display-or-get-address';
+import DisplayOrGetAddress, {
+  DisplayOrGetStartEndAddresses,
+} from '../display-or-get-address';
 import { getFormatedLength } from '../../lib/ol';
 import Alert from '../alert';
 import dispatch from '../../workers/dispatcher-main';
@@ -73,19 +75,11 @@ const RteViewer: Component<Props> = ({ rteId }) => {
         content={
           <>
             <div>
-              {getFormatedLength(lineString)} {t('from')}{' '}
-              <Show when={false}>
-                <DisplayOrGetAddress
-                  target={() => rte().rtept.at(0)}
+              {getFormatedLength(lineString)}
+              <DisplayOrGetStartEndAddresses
+                id={rteId}
+                wpts={() => rte().rtept}
                 putAction='putRtept'
-                  putParamName='rtept'
-                />{' '}
-              </Show>
-              {t('to')}{' '}
-              <DisplayOrGetAddress
-                target={() => rte().rtept.at(-1)}
-                putAction='putRtept'
-                putParamName='rtept'
               />
             </div>
           </>

src/db/rte.ts

@@ -74,7 +74,6 @@ export const getRteDocs: ({
 }) => Promise<{ docs: any; rte: Rte }> = async (params) => {
   const { id } = params;
   const docs = await getFamily(id, { include_docs: true });
-  console.log({ caller: 'getRteDocs', id, docs });
   let rte: Rte;
   if (docs.rows.length === 1) {
     rte = docs.rows[0].doc.doc;
@@ -91,7 +90,7 @@ export const getRteDocs: ({
     caller: 'getRteDocs',
     id,
     docs,
-    nbRteptIn: docs.rows[0].doc.rtept?.length,
+    nbRteptIn: docs.rows[0].doc.doc.rtept?.length,
     nbRteptTotal: rte?.rtept?.length,
   });
   return { docs, rte };

src/db/rtept.test.ts

@@ -69,7 +69,7 @@ describe('The rtept module with a real db', () => {
 
     const rtePut = await putRte({ id: idRte, rte: rte0 });
     expect(rtePut).toEqual(rte0);
-    const rtePutRtept = await putRtept({ idRte, index: 1, rtept });
+    const rtePutRtept = await putRtept({ id: idRte, index: 1, wpt: rtept });
     const rteGetRtept = await getRte({ id: idRte });
     expect(rteGetRtept).toEqual(rte1);
   });
@@ -123,9 +123,9 @@ describe('The rtept module with a real db', () => {
     await put(idRtept, 'rtept', () => rtept3, emptyWpt);
     expect(await getRte({ id: idRte })).toEqual(rte1);
     await putRtept({
-      idRte,
+      id: idRte,
       index: 2,
-      rtept: rtept4,
+      wpt: rtept4,
     });
     expect((await getFamily(idRte)).rows.length).toEqual(2);
     expect(await getRte({ id: idRte })).toEqual(rte2);
@@ -179,9 +179,9 @@ describe('The rtept module with a real db', () => {
     const rtePut = await putRte({ id: idRte, rte: rte0 });
     await put(idRtept, 'rtept', () => rtept3, emptyWpt);
     await putRtept({
-      idRte,
+      id: idRte,
       index: -1,
-      rtept: rtept4,
+      wpt: rtept4,
     });
     expect(await getRte({ id: idRte })).toEqual(rte2);
     expect((await get(idRtept)).doc).toEqual(rtept4);

src/db/rtept.ts

@@ -26,8 +26,8 @@ export const emptyRtept: Wpt = {
 };
 
 export const putRtept = async (params: any) => {
-  const { idRte, index, rtept } = params;
-  const { docs } = await getRteDocs({ id: idRte });
+  const { id, index, wpt } = params;
+  const { docs } = await getRteDocs({ id: id });
   const rte = docs.rows[0].doc.doc;
   const nbRteptInRte = rte && rte.rtept ? rte.rtept.length : 0;
   const nbRteptOutRte = docs.rows.length - 1;
@@ -41,11 +41,11 @@ export const putRtept = async (params: any) => {
   //   positiveIndex,
   // });
   if (positiveIndex < nbRteptInRte) {
-    rte.rtept[positiveIndex] = rtept;
-    await putRte({ id: idRte, rte });
+    rte.rtept[positiveIndex] = wpt;
+    await putRte({ id, rte });
   } else {
     const reptId = docs.rows[1 + positiveIndex - nbRteptInRte].doc._id;
-    await put(reptId, 'rtept', () => rtept, emptyRtept);
+    await put(reptId, 'rtept', () => wpt, emptyRtept);
   }
-  return rtept;
+  return wpt;
 };

src/workers/dispatcher-worker.ts

@@ -14,6 +14,7 @@ import {
 } from '../db/gpx';
 import { putOverlays } from '../db/overlays';
 import { deleteRte, putRte } from '../db/rte';
+import { putRtept } from '../db/rtept';
 import { getSettings, putSettings } from '../db/settings';
 import { getState, setState } from '../db/state';
 import { deleteTrk, getTrk, putNewTrk } from '../db/trk';
@@ -52,6 +53,7 @@ onmessage = async function (e) {
     putWpt,
     putRte,
     putTrkpt,
+    putRtept,
 
     deleteTrk,
     deleteRte,