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;