refactor: simplify image location loading

package.json

@@ -20,11 +20,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "buffer": "^6.0.3",
-    "exif-reader": "^2.0.3",
     "exifr": "^7.1.3",
     "maplibre-gl": "^5.24.0",
-    "piexif-ts": "^2.1.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-map-gl": "^8.1.1",
@@ -33,6 +30,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@tailwindcss/vite": "^4.3.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^25.9.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
@@ -41,6 +39,7 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
+    "jsdom": "^29.1.1",
     "prettier": "^3.8.4",
     "prettier-plugin-tailwindcss": "^0.8.0",
     "typescript": "^6.0.3",

src/hooks/create-event-hook.test.tsx

@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, renderHook } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { createEventHook } from "./create-event-hook";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("createEventHook", () => {
+  it("replays an earlier event and aborts it on unmount", () => {
+    const event = createEventHook();
+    const signals: AbortSignal[] = [];
+    event.emit();
+
+    const { unmount } = renderHook(() =>
+      event.useEvent((signal) => {
+        signals.push(signal);
+        return Promise.resolve();
+      }),
+    );
+
+    expect(signals).toHaveLength(1);
+    expect(signals[0].aborted).toBe(false);
+
+    unmount();
+
+    expect(signals[0].aborted).toBe(true);
+  });
+
+  it("aborts the previous handler before running the next event", () => {
+    const event = createEventHook();
+    const signals: AbortSignal[] = [];
+
+    renderHook(() =>
+      event.useEvent((signal) => {
+        signals.push(signal);
+        return Promise.resolve();
+      }),
+    );
+
+    act(() => event.emit());
+    act(() => event.emit());
+
+    expect(signals).toHaveLength(2);
+    expect(signals[0].aborted).toBe(true);
+    expect(signals[1].aborted).toBe(false);
+  });
+
+  it("cleans up an earlier mount before replaying the event", () => {
+    const event = createEventHook();
+    const signals: AbortSignal[] = [];
+    event.emit();
+
+    const useEvent = () =>
+      event.useEvent((signal) => {
+        signals.push(signal);
+        return Promise.resolve();
+      });
+
+    const firstRender = renderHook(useEvent);
+    firstRender.unmount();
+    renderHook(useEvent);
+
+    expect(signals).toHaveLength(2);
+    expect(signals[0].aborted).toBe(true);
+    expect(signals[1].aborted).toBe(false);
+  });
+});

src/hooks/create-event-hook.ts

@@ -0,0 +1,41 @@
+import { useEffect, useEffectEvent } from "react";
+
+export type CancellableEventHandler = (signal: AbortSignal) => Promise<void>;
+
+/** Replays the latest event to new subscribers and aborts superseded handlers. */
+export function createEventHook() {
+  let hasEmitted = false;
+  const listeners = new Set<() => void>();
+
+  function emit(): void {
+    hasEmitted = true;
+    listeners.forEach((listener) => listener());
+  }
+
+  function useEvent(handler: CancellableEventHandler): void {
+    const handleEvent = useEffectEvent(handler);
+
+    useEffect(() => {
+      let controller: AbortController | undefined;
+
+      const listener = () => {
+        controller?.abort();
+        controller = new AbortController();
+        void handleEvent(controller.signal);
+      };
+
+      listeners.add(listener);
+
+      if (hasEmitted) {
+        listener();
+      }
+
+      return () => {
+        listeners.delete(listener);
+        controller?.abort();
+      };
+    }, []);
+  }
+
+  return { emit, useEvent };
+}