From 28cb5f0bf089b871f354d641bfd36c0bb42545dd Mon Sep 17 00:00:00 2001
From: Zora Franke <github@fabfranke.de>
Date: Sat, 29 Jun 2024 16:02:20 +0200
Subject: [PATCH] Django backend preparation (#147)

This prepares the data fetching for the upcoming Django backend.
It is made in a backwards-compatible way to ensure no breakage
of the existing map.

Co-authored-by: Zora Franke <zora@zorafranke.de>
---
 main.ts     |  4 ++--
 ts/data.ts  | 18 ++++++++++++++++++
 ts/env.d.ts |  3 +++
 ts/map.ts   |  5 +++--
 4 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 ts/data.ts

diff --git a/main.ts b/main.ts
index e3fb26a..9258902 100644
--- a/main.ts
+++ b/main.ts
@@ -7,8 +7,8 @@ import { setupLegend } from "./ts/legend";
 import { setupEmergencyButton, setupResetButton, setupHamburgerButton } from "./ts/buttons";
 import { addGoatCounter } from "./ts/goatcounter";
 
-document.addEventListener("DOMContentLoaded", () => {
-	initializeMap();
+document.addEventListener("DOMContentLoaded", async () => {
+	await initializeMap();
 	initializeForms();
 	setupInfoButton();
 	setupLegend();
diff --git a/ts/data.ts b/ts/data.ts
new file mode 100644
index 0000000..a859702
--- /dev/null
+++ b/ts/data.ts
@@ -0,0 +1,18 @@
+import data from "../data/orgas.json";
+
+export const loadJSON = async () => {
+	if (!import.meta.env.VITE_QUEER_LEXIKON_BACKEND_URL) {
+		console.warn("The backend URL is not defined, using compiled JSON as fallback.");
+		return data;
+	}
+
+	const resp = await fetch(import.meta.env.VITE_QUEER_LEXIKON_BACKEND_URL);
+
+	if (!resp.ok) {
+		console.warn("Loading the data from the backend failed, using compiled JSON as fallback.");
+		return data;
+	}
+
+	const json = await resp.json();
+	return json;
+};
diff --git a/ts/env.d.ts b/ts/env.d.ts
index 72cecca..a3bc715 100644
--- a/ts/env.d.ts
+++ b/ts/env.d.ts
@@ -9,4 +9,7 @@ interface ImportMetaEnv {
 	// Although it's actually a boolean, all environment variables are strings, so we
 	// type it as string here as well.
 	readonly VITE_QUEER_LEXIKON_PRIVATE?: string;
+
+	// The backend URL for the upcoming django backend.
+	readonly VITE_QUEER_LEXIKON_BACKEND_URL?: string;
 }
diff --git a/ts/map.ts b/ts/map.ts
index 0117d17..7e09a45 100644
--- a/ts/map.ts
+++ b/ts/map.ts
@@ -2,12 +2,12 @@ import L from "leaflet";
 import "leaflet.markercluster";
 
 import "leaflet/dist/leaflet.css";
-import data from "../data/orgas.json";
 
 import defaultImage from "../assets/default.svg";
 import limitedImage from "../assets/limited.svg";
 import supportImage from "../assets/support.svg";
 import { DEFAULT_ZOOM_LEVEL, ICON_SIZE, MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL } from "./config";
+import { loadJSON as loadData } from "./data";
 
 type Organisation = {
 	country: string;
@@ -28,7 +28,7 @@ type Organisation = {
 };
 
 let map: L.Map;
-export function initializeMap() {
+export async function initializeMap() {
 	map = L.map("map").setView([51.351, 10.454], MIN_ZOOM_LEVEL); // focus on germany
 	document.querySelectorAll(".locate-button").forEach((item) => {
 		item.addEventListener("click", (event) => {
@@ -73,6 +73,7 @@ export function initializeMap() {
 			});
 		},
 	});
+	const data = await loadData();
 	data.forEach((row) => {
 		const marker = createMarker(row);
 		if (marker) markers.addLayer(marker);