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)}
-                  putAction='putRtept'
-                  putParamName='rtept'
-                />{' '}
-              </Show>
-              {t('to')}{' '}
-              <DisplayOrGetAddress
-                target={() => rte().rtept.at(-1)}
+              {getFormatedLength(lineString)}
+              <DisplayOrGetStartEndAddresses
+                id={rteId}
+                wpts={() => rte().rtept}
                 putAction='putRtept'
-                putParamName='rtept'
               />
             </div>
           </>