Adding adresses to rtept rather than rte.

src/components/rte/RteViewer.tsx

@@ -50,23 +50,21 @@ const RteViewer: Component<Props> = ({ rteId }) => {
     rte().rtept.map((rtept: any) => [rtept.$.lon, rtept.$.lat])
   );
 
+  const firstRtept = rte().rtept.at(0);
+  const lastRtept = rte().rtept.at(-1);
+
   const length = getLength(geometry, { projection: 'EPSG:4326' });
 
-  const findClickHandlerFactory = (target: string) => async () => {
-    const index = target === 'from' ? 0 : -1;
-    const address = await findAddress(
-      rte().rtept.at(index).$.lon,
-      rte().rtept.at(index).$.lat,
-      locale
-    );
-    const updatedRte = cloneDeep(rte());
-    if (updatedRte.extensions === undefined) {
-      updatedRte.extensions = {};
+  const findClickHandlerFactory = (rtept: any) => async () => {
+    const address = await findAddress(rtept.$.lon, rtept.$.lat, locale);
+    const updatedRtept = cloneDeep(rtept);
+    if (updatedRtept.extensions === undefined) {
+      updatedRtept.extensions = {};
     }
-    updatedRte.extensions[target] = address;
+    updatedRtept.extensions.address = address;
     dispatch({
-      action: 'putRte',
-      params: { id: rteId, rte: updatedRte },
+      action: 'putRtept',
+      params: { id: rtept.id, rtept: updatedRtept },
     });
   };
 
@@ -82,24 +80,28 @@ const RteViewer: Component<Props> = ({ rteId }) => {
           <div>
             {formatLength(length)} {t('from')}{' '}
             <Show
-              when={!rte()?.extensions?.from}
-              fallback={<>{getVillageOrTown(rte()?.extensions?.from)}</>}
+              when={!rte().rtept.at(0).extensions?.address}
+              fallback={
+                <>{getVillageOrTown(rte().rtept.at(0).extensions?.address)}</>
+              }
             >
               <IconButton
                 color='primary'
-                onClick={findClickHandlerFactory('from')}
+                onClick={findClickHandlerFactory(rte().rtept.at(0))}
               >
                 <SearchIcon />
               </IconButton>
             </Show>{' '}
             {t('to')}{' '}
             <Show
-              when={!rte()?.extensions?.to}
-              fallback={<>{getVillageOrTown(rte()?.extensions?.to)}</>}
+              when={!rte().rtept.at(-1).extensions?.address}
+              fallback={
+                <>{getVillageOrTown(rte().rtept.at(-1).extensions?.address)}</>
+              }
             >
               <IconButton
                 color='primary'
-                onClick={findClickHandlerFactory('to')}
+                onClick={findClickHandlerFactory(rte().rtept.at(-1))}
               >
                 <SearchIcon />
               </IconButton>