Refactoring

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

@@ -0,0 +1,52 @@
+import { IconButton } from '@suid/material';
+import SearchIcon from '@suid/icons-material/Search';
+
+import { Component, Show } from 'solid-js';
+import { findAddress, getVillageOrTown } from '../../lib/osm';
+import { cloneDeep } from 'lodash';
+import { useI18n } from '@solid-primitives/i18n';
+import dispatch from '../../workers/dispatcher-main';
+
+interface Props {
+  target: any;
+  putAction: string;
+  putParamName: string;
+}
+
+const DisplayOrGetAddress: Component<Props> = ({
+  target,
+  putAction,
+  putParamName,
+}) => {
+  const [t, { add, locale, dict }] = useI18n();
+
+  const findClickHandlerFactory = (target: any) => async () => {
+    const address = await findAddress(target.$.lon, target.$.lat, locale);
+    const updatedTarget = cloneDeep(target);
+    if (updatedTarget.extensions === undefined) {
+      updatedTarget.extensions = {};
+    }
+    updatedTarget.extensions.address = address;
+    const params: any = { id: target.id };
+    params[putParamName] = updatedTarget;
+    dispatch({
+      action: putAction,
+      params,
+    });
+  };
+
+  return (
+    <Show
+      when={target.extensions?.address}
+      fallback={
+        <IconButton color='primary' onClick={findClickHandlerFactory(target)}>
+          <SearchIcon />
+        </IconButton>
+      }
+    >
+      <>{getVillageOrTown(target.extensions?.address)}</>
+    </Show>
+  );
+};
+
+export default DisplayOrGetAddress;

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

@@ -0,0 +1 @@
+export { default } from './DisplayOrGetAddress';

src/components/rte/RteViewer.tsx

@@ -1,16 +1,13 @@
-import { Component, createResource, Show } from 'solid-js';
+import { Component } from 'solid-js';
 import { peekCachedSignal } from '../../workers/cached-signals';
 import RteIcon from '../../icons/directions-svgrepo-com.svg?component-solid';
-import SearchIcon from '@suid/icons-material/Search';
 import { useI18n } from '@solid-primitives/i18n';
 
 import Tree from '../tree';
-import { findAddress, getVillageOrTown } from '../../lib/osm';
 import { getLength } from 'ol/sphere';
-import { Geometry, LineString } from 'ol/geom';
+import { LineString } from 'ol/geom';
-import { IconButton } from '@suid/material';
+import DisplayOrGetAddress from '../display-or-get-address';
-import { cloneDeep } from 'lodash';
+import { getFormatedLength } from '../../lib/ol';
-import dispatch from '../../workers/dispatcher-main';
 
 interface Props {
   rteId: string;
@@ -25,49 +22,10 @@ const RteViewer: Component<Props> = ({ rteId }) => {
     return rte().name;
   };
 
-  //   const [startAddress] = createResource(rte, (r: Rte) =>
+  const lineString = new LineString(
-  //     findAddress(r.rtept[0].$.lon, r.rtept[0].$.lat, locale)
-  //   );
-  //   const [endAddress] = createResource(rte, (r: Rte) =>
-  //     findAddress(r.rtept.at(-1).$.lon, r.rtept.at(-1).$.lat, locale)
-  //   );
-
-  const formatLength = (length: number) => {
-    if (length > 1000) {
-      const l = length / 1000;
-      return ` ${l.toLocaleString(undefined, {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      })} km`;
-    }
-    return ` ${length.toLocaleString(undefined, {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    })} m`;
-  };
-
-  const geometry = new LineString(
     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 = (rtept: any) => async () => {
-    const address = await findAddress(rtept.$.lon, rtept.$.lat, locale);
-    const updatedRtept = cloneDeep(rtept);
-    if (updatedRtept.extensions === undefined) {
-      updatedRtept.extensions = {};
-    }
-    updatedRtept.extensions.address = address;
-    dispatch({
-      action: 'putRtept',
-      params: { id: rtept.id, rtept: updatedRtept },
-    });
-  };
-
   return (
     <Tree
       title={
@@ -78,34 +36,18 @@ const RteViewer: Component<Props> = ({ rteId }) => {
       content={
         <>
           <div>
-            {formatLength(length)} {t('from')}{' '}
+            {getFormatedLength(lineString)} {t('from')}{' '}
-            <Show
+            <DisplayOrGetAddress
-              when={!rte().rtept.at(0).extensions?.address}
+              target={rte().rtept.at(0)}
-              fallback={
+              putAction='putRtept'
-                <>{getVillageOrTown(rte().rtept.at(0).extensions?.address)}</>
+              putParamName='rtept'
-              }
+            />{' '}
-            >
-              <IconButton
-                color='primary'
-                onClick={findClickHandlerFactory(rte().rtept.at(0))}
-              >
-                <SearchIcon />
-              </IconButton>
-            </Show>{' '}
             {t('to')}{' '}
-            <Show
+            <DisplayOrGetAddress
-              when={!rte().rtept.at(-1).extensions?.address}
+              target={rte().rtept.at(-1)}
-              fallback={
+              putAction='putRtept'
-                <>{getVillageOrTown(rte().rtept.at(-1).extensions?.address)}</>
+              putParamName='rtept'
-              }
+            />
-            >
-              <IconButton
-                color='primary'
-                onClick={findClickHandlerFactory(rte().rtept.at(-1))}
-              >
-                <SearchIcon />
-              </IconButton>
-            </Show>
           </div>
         </>
       }

src/lib/ol.ts

@@ -0,0 +1,17 @@
+import { LineString } from 'ol/geom';
+import { getLength } from 'ol/sphere';
+
+export const getFormatedLength = (lineString: LineString) => {
+  const length = getLength(lineString, { projection: 'EPSG:4326' });
+  if (length > 1000) {
+    const l = length / 1000;
+    return ` ${l.toLocaleString(undefined, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })} km`;
+  }
+  return ` ${length.toLocaleString(undefined, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  })} m`;
+};