store & show date of last sync

package.json

@@ -25,6 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.0",
+    "react-timeago-i18n": "^1.1.0",
     "through2": "^4.0.2",
     "wellknown": "^0.5.0"
   },

script/3conflate.ts

@@ -13,6 +13,10 @@ import {
 } from "./util";
 import { calcBBox } from "./util/calcBbox";
 
+type GeoJsonOutput = FeatureCollection<MultiLineString, ConflatedStreet> & {
+  lastUpdated: string;
+};
+
 // only used for comparing names
 const stripMacrons = (str: string) =>
   str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
@@ -53,9 +57,10 @@ async function main() {
   );
 
   console.log("Confating...");
-  const missing: FeatureCollection<MultiLineString, ConflatedStreet> = {
+  const missing: GeoJsonOutput = {
     type: "FeatureCollection",
     features: [],
+    lastUpdated: new Date().toISOString(),
   };
 
   for (const sector in linzDB) {

src/App.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
+import TimeAgo from "react-timeago-i18n";
 import { MapContainer, ScaleControl } from "react-leaflet";
 import { MapHook, Imagery, Streets, WholeNetwork } from "./map-layers";
 import type { MissingStreet } from "./types";
 import { useKeyboardShortcut } from "./util";
-import { HelpModal } from "./components";
+import { HelpModal, Modal } from "./components";
 
 import "./index.css";
 import "leaflet/dist/leaflet.css";
@@ -21,7 +22,9 @@ const home = (() => {
 export const App: React.FC = () => {
   const [data, setData] = useState<MissingStreet[]>();
   const [error, setError] = useState<unknown>();
+  const [lastUpdated, setLastUpdated] = useState<string>();
   const [modalOpen, setModalOpen] = useState(false);
+  const [infoModalOpen, setInfoModalOpen] = useState(false);
   const [hidden, setHidden] = useState(false);
 
   const toggleHidden = useCallback(() => setHidden((c) => !c), []);
@@ -35,7 +38,10 @@ export const App: React.FC = () => {
         : "https://linz-addr-cdn.kyle.kiwi/missing-streets.json"
     )
       .then((r) => r.json())
-      .then((geojson) => setData(geojson.features))
+      .then((geojson) => {
+        setData(geojson.features);
+        setLastUpdated(geojson.lastUpdated);
+      })
       .catch(setError);
   }, []);
 
@@ -45,8 +51,36 @@ export const App: React.FC = () => {
   return (
     <>
       {modalOpen && <HelpModal onClose={() => setModalOpen(false)} />}
+      {infoModalOpen && (
+        <Modal onClose={() => setInfoModalOpen(false)}>
+          Running the sync is currently a manual process. If the data hasn’t
+          been updated recently,{" "}
+          <a
+            href="https://osm.org/message/new/❤️‍🔥_import"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            send me a message on OpenStreetMap
+          </a>
+          .
+        </Modal>
+      )}
       <aside>
         <h3>Missing Streets in New Zealand</h3>
+        {lastUpdated && (
+          <small>
+            Data updated <TimeAgo date={lastUpdated} />
+            <button
+              className="small"
+              type="button"
+              onClick={() => setInfoModalOpen(true)}
+            >
+              ?
+            </button>
+          </small>
+        )}
+        <br />
+        <br />
         <button
           className="nice"
           type="button"

src/components/HelpModal.tsx

@@ -1,6 +1,8 @@
+import { Modal } from "./Modal";
+
 export const HelpModal: React.FC<{ onClose(): void }> = ({ onClose }) => {
   return (
-    <dialog open>
+    <Modal onClose={onClose}>
       <ul>
         <li>
           Press <kbd>b</kbd> to switch imagery.
@@ -12,11 +14,6 @@ export const HelpModal: React.FC<{ onClose(): void }> = ({ onClose }) => {
           Press <kbd>h</kbd> to show/hide all features.
         </li>
       </ul>
-      <form method="dialog">
-        <button className="nice" type="submit" onClick={onClose}>
-          Close
-        </button>
-      </form>
-    </dialog>
+    </Modal>
   );
 };

src/components/Modal.tsx

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from "react";
+
+export const Modal: React.FC<PropsWithChildren & { onClose(): void }> = ({
+  children,
+  onClose,
+}) => {
+  return (
+    <dialog open>
+      {children}
+      <form method="dialog">
+        <button className="nice" type="submit" onClick={onClose}>
+          Close
+        </button>
+      </form>
+    </dialog>
+  );
+};

src/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./HelpModal";
+export * from "./Modal";
 export * from "./QuickFixModal";

src/index.css

@@ -25,6 +25,11 @@ aside {
 button.nice {
   padding: 8px;
 }
+button.small {
+  padding: 0px 2px;
+  margin-left: 2px;
+}
+button.small:active,
 button.nice:active {
   transform: scale(0.9);
 }

src/map-layers/Street.tsx

@@ -12,7 +12,8 @@ export const Street = memo<{ street: MissingStreet }>(({ street }) => {
   const onClickEdit = useCallback(() => {
     const pos = popup.current!.getLatLng()!;
     window.open(
-      `https://www.openstreetmap.org/edit#map=18/${pos.lat}/${pos.lng}`
+      // open a fork of iD which has access to the roads overlay
+      `https://kyle.kiwi/iD#map=18/${pos.lat}/${pos.lng}`
     );
   }, []);
 

yarn.lock

@@ -7690,6 +7690,11 @@ react-scripts@^5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-timeago-i18n@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-timeago-i18n/-/react-timeago-i18n-1.1.0.tgz#fe2c07601ff1a5ddb7282cae424ae430a462d830"
+  integrity sha512-3yMs87tohXNBqBxV+h0hMjaujo1H67aiDVvlBeHrXrGS8OupZAA5WQ9Yy0m8rlM8Irb38v56T0HOrKKWyNj14A==
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"