From f97c1ef4f4731db5b16afef8ac49e252f992b56b Mon Sep 17 00:00:00 2001
From: Raphael Arce <raphael.arce@ts.berlin>
Date: Thu, 13 Jul 2023 12:01:24 +0200
Subject: [PATCH] feat: split up show point modal and get point data, added
 loading screen that is shown before receiving the data

Signed-off-by: Raphael Arce <raphael.arce@ts.berlin>
---
 src/components/Icons/Spinner.tsx        | 22 ++++++
 src/components/Icons/index.tsx          |  1 +
 src/components/PointInfoModal/index.tsx | 97 +++++++++++++++----------
 src/components/filter/FilterLayer.tsx   | 10 ++-
 src/components/map/Map.tsx              |  6 +-
 5 files changed, 90 insertions(+), 46 deletions(-)
 create mode 100644 src/components/Icons/Spinner.tsx

diff --git a/src/components/Icons/Spinner.tsx b/src/components/Icons/Spinner.tsx
new file mode 100644
index 0000000..7cd3253
--- /dev/null
+++ b/src/components/Icons/Spinner.tsx
@@ -0,0 +1,22 @@
+export const Spinner = () => {
+	return (
+		<>
+			<svg
+				aria-hidden="true"
+				className="h-8 w-8 fill-gray-200 text-primary dark:text-gray-600"
+				viewBox="0 0 100 101"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+					fill="currentFill"
+				/>
+			</svg>
+		</>
+	);
+};
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index a2652ff..65b1ec1 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -50,3 +50,4 @@ export { ArrowDown } from "./ArrowDown";
 export { ArrowUp } from "./ArrowUp";
 export { Box } from "./Box";
 export { Trash } from "./Trash";
+export { Spinner } from "./Spinner";
diff --git a/src/components/PointInfoModal/index.tsx b/src/components/PointInfoModal/index.tsx
index 16e94ae..6019f9c 100644
--- a/src/components/PointInfoModal/index.tsx
+++ b/src/components/PointInfoModal/index.tsx
@@ -4,12 +4,13 @@ import {
 	BusinessAtPointData,
 	BusinessData,
 } from "../../../pages/api/getsinglepointdata";
-import { Cross } from "../Icons";
+import { Cross, Spinner } from "../Icons";
 
 export interface PointInfoModalType {
 	poinInfoModalOpen: boolean;
 	setPoinInfoModalOpen: (date: boolean) => void;
 	businessAtPointData: BusinessAtPointData;
+	setBusinessAtPoint: (businessAtPoint: undefined) => void;
 	color: string;
 }
 
@@ -67,35 +68,43 @@ export const PointInfoModal: FC<PointInfoModalType> = ({
 	poinInfoModalOpen,
 	setPoinInfoModalOpen,
 	businessAtPointData,
+	setBusinessAtPoint,
 	color,
 }) => {
 	function closeModal() {
 		setPoinInfoModalOpen(false);
+		setBusinessAtPoint(undefined);
 	}
 
 	return (
 		<>
-			{businessAtPointData && (
-				<Dialog
-					as="div"
-					className="fixed inset-0 z-10"
-					onClose={closeModal}
-					open={poinInfoModalOpen}
-				>
-					<div className="min-h-screen text-center">
-						<Dialog.Backdrop className="fixed inset-0 bg-white/80" />
-
-						{/* This element is to trick the browser into centering the modal contents. */}
+			<Dialog
+				as="div"
+				className="fixed inset-0"
+				onClose={closeModal}
+				open={poinInfoModalOpen}
+				style={{ zIndex: 70 }}
+			>
+				<div className="min-h-screen text-center">
+					<>
+						<Dialog.Backdrop
+							className="fixed inset-0 bg-white/80"
+							style={{ zIndex: 60 }}
+						/>
+						{/* This element is to trick the browser into centering the modal
+							contents. */}
 						<span
 							className="inline-block h-screen align-middle"
 							aria-hidden="true"
 						>
 							&#8203;
 						</span>
-
 						<div
 							className="relative my-8 inline-block w-full max-w-xl rounded-2xl bg-white px-6 text-left align-middle shadow-lg"
-							style={{ maxHeight: "50vh", overflowY: "scroll" }}
+							style={{
+								maxHeight: "50vh",
+								overflowY: businessAtPointData && "scroll",
+							}}
 						>
 							<Dialog.Title className="sticky top-0 bg-white pb-6 text-xl leading-6">
 								<div className="flex w-full flex-col text-sm">
@@ -106,17 +115,22 @@ export const PointInfoModal: FC<PointInfoModalType> = ({
 										/>
 										<div className="flex w-0 grow flex-col pt-6">
 											<div className="text-xl font-bold">
-												Eingetragene Unternehmen (
-												{businessAtPointData.businesses.length})
-											</div>
-											<div>
-												Für den Standort: {businessAtPointData.latitude},{" "}
-												{businessAtPointData.longitude}
-											</div>
-											<div>
-												Planungsraum:{" "}
-												{businessAtPointData.businesses[0].planungsraum}
+												Eingetragene Unternehmen{" "}
+												{businessAtPointData &&
+													`(${businessAtPointData.businesses.length})`}
 											</div>
+											{businessAtPointData && (
+												<>
+													<div>
+														Für den Standort: {businessAtPointData.latitude},{" "}
+														{businessAtPointData.longitude}
+													</div>
+													<div>
+														Planungsraum:{" "}
+														{businessAtPointData.businesses[0].planungsraum}
+													</div>
+												</>
+											)}
 										</div>
 										<button
 											className="text-textcolor pt-2"
@@ -130,22 +144,31 @@ export const PointInfoModal: FC<PointInfoModalType> = ({
 
 							<Dialog.Panel>
 								<div className="pb-6">
-									<div className="grid grid-cols-6 gap-5">
-										{businessAtPointData.businesses.map((b, idx) => (
-											<Section
-												key={b.opendata_id}
-												index={idx}
-												totalCount={businessAtPointData.businesses.length}
-												business={b}
-											></Section>
-										))}
-									</div>
+									{businessAtPointData ? (
+										<div className="grid grid-cols-6 gap-5">
+											{businessAtPointData.businesses.map((b, idx) => (
+												<Section
+													key={b.opendata_id}
+													index={idx}
+													totalCount={businessAtPointData.businesses.length}
+													business={b}
+												></Section>
+											))}
+										</div>
+									) : (
+										<p className="flex items-center gap-2">
+											Daten werden geladen...
+											<span className="animate-spin">
+												<Spinner />
+											</span>
+										</p>
+									)}
 								</div>
 							</Dialog.Panel>
 						</div>
-					</div>
-				</Dialog>
-			)}
+					</>
+				</div>
+			</Dialog>
 		</>
 	);
 };
diff --git a/src/components/filter/FilterLayer.tsx b/src/components/filter/FilterLayer.tsx
index 7280ae2..d578c7f 100644
--- a/src/components/filter/FilterLayer.tsx
+++ b/src/components/filter/FilterLayer.tsx
@@ -162,11 +162,11 @@ export const FilterLayer: FC<FilterLayerType> = ({
 		filterValBezirk,
 	]);
 
-	async function showPointInfo(info) {
+	async function getPointInfo(info) {
 		const data = await getSinglePointData(info.object.id, info.object.p);
-		console.log(data);
+		// the following line is on purpose to reduce fast jumping elements.
+		await new Promise((resolve) => setTimeout(() => resolve(), 1000));
 		setPointData(data as BusinessAtPointData);
-		setPoinInfoModalOpen(true);
 	}
 
 	function calculatePointRadius(zoom) {
@@ -219,7 +219,8 @@ export const FilterLayer: FC<FilterLayerType> = ({
 						getFillColor: layersData[layerId].color, // [86, 189, 102],
 						opacity: layerOpacity,
 						onClick: (info) => {
-							showPointInfo(info);
+							setPoinInfoModalOpen(true);
+							getPointInfo(info);
 						},
 						transitions: {
 							// transition with a duration of 3000ms
@@ -308,6 +309,7 @@ export const FilterLayer: FC<FilterLayerType> = ({
 				poinInfoModalOpen={poinInfoModalOpen}
 				setPoinInfoModalOpen={setPoinInfoModalOpen}
 				businessAtPointData={pointData!}
+				setBusinessAtPoint={setPointData}
 			></PointInfoModal>
 
 			<div
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index 203d9a5..fe5cd1a 100644
--- a/src/components/map/Map.tsx
+++ b/src/components/map/Map.tsx
@@ -84,11 +84,7 @@ export const MapComponent: FC<MapType> = ({
 					<Map
 						reuseMaps
 						mapLib={maplibregl}
-						mapStyle={
-							process.env.NODE_ENV == "development"
-								? mapStyle()
-								: process.env.NEXT_PUBLIC_MAPTILER_STYLE
-						}
+						mapStyle={process.env.NEXT_PUBLIC_MAPTILER_STYLE}
 						styleDiffing={true}
 						zoom={mapZoom} // Pass the mapZoom value as the zoom prop
 						attributionControl={false}