🚚 Remove business logic from Component instances

frontend/src/passagesDisplay.tsx

@@ -16,13 +16,13 @@ export const PassagesDisplay: Component = () => {
 	const maxPassagePerPanel = 5;
 	const syncPeriodMsec = 20 * 1000;
 
-	const { passages, getLinePassages, addPassages, clearPassages, serverUrl } = useContext(BusinessDataContext);
-	const { getDisplayedStop } = useContext(SearchContext);
+	const { passages, getLine, getLinePassages, refreshPassages, clearPassages } = useContext(BusinessDataContext);
+
+	// TODO: Use props instead
+	const { getDisplayedStops } = useContext(SearchContext);
 
-	const [panels, setPanels] = createStore([]);
 	const [displayedPanelId, setDisplayedPanelId] = createSignal<number>(0);
-
-	let _lines = new Map();
+	const [panels, setPanels] = createStore([]);
 
 	const [dateNow] = createDateNow(1000);
 
@@ -37,61 +37,24 @@ export const PassagesDisplay: Component = () => {
 	createEffect(() => {
 		console.log("######### onStopIdUpdate #########");
 		// Track local.stopIp to force dependency.
-		console.log("getDisplayedStop=", getDisplayedStop());
+		console.log("getDisplayedStop=", getDisplayedStops());
 		clearPassages();
 	});
 
 	createEffect(async () => {
 		console.log(`## OnPassageUpdate ${passages()} ##`);
-		/* console.log(passages()); */
-		await requestPassages();
+		const stops = getDisplayedStops();
+		if (stops.length > 0) {
+			refreshPassages(stops[0].id);
+		}
 	});
 
-	async function _fetchLine(lineId: string) {
-		if (!_lines.has(lineId)) {
-			const data = await fetch(`${serverUrl()}/line/${lineId}`, {
-				headers: { "Content-Type": "application/json" },
-			});
-			const line = await data.json();
-			_lines.set(line.id, line);
-		}
-	}
-
-	async function requestPassages() {
-		console.log("### requestPassages ###");
-		/* TODO: Manage several displays (one by stop) */
-		const stops = getDisplayedStop();
-		if (stops.length == 0) {
-			return;
-		}
-		const stop = stops[0];
-
-		const httpOptions = { headers: { "Content-Type": "application/json" } };
-		if (stop !== undefined) {
-			const stopId = stop.id;
-			console.log(`Fetching data for ${stopId}`);
-			const url = `${serverUrl()}/stop/nextPassages/${stopId}`;
-			/* console.log(`url=${url}`); */
-			const data = await fetch(url, httpOptions);
-			const response = await data.json();
-			/* console.log(response); */
-			const byLineByDstPassages = response.passages;
-			/* console.log(byLineByDstPassages); */
-			const linePromises = [];
-			for (const lineId of Object.keys(byLineByDstPassages)) {
-				linePromises.push(_fetchLine(lineId));
-			}
-			await Promise.all(linePromises);
-			console.log("byLineByDstPassages=", byLineByDstPassages);
-			// console.log("before addPassages passages=", passages());
-			addPassages(byLineByDstPassages);
-			console.log("AFTER passages=", passages());
-		}
-	}
-
 	setInterval(
 		async () => {
-			await requestPassages();
+			const stops = getDisplayedStops();
+			if (stops.length > 0) {
+				refreshPassages(stops[0].id);
+			}
 		},
 		syncPeriodMsec
 	);