From 4fc6b1ad94fd5d7aef58100504310f66660c6cfb Mon Sep 17 00:00:00 2001
From: Type-Style <github@type-style.de>
Date: Fri, 6 Sep 2024 22:08:41 +0200
Subject: [PATCH] [Task] #123, add mapbox token in react

---
 src/app.ts                        |  2 +-
 src/client/components/App.tsx     | 26 +++++++++++++++++++++++++-
 src/client/components/Map.tsx     |  8 +++++---
 src/client/components/MiniMap.tsx | 10 ++++++++--
 src/client/scripts/layers.ts      |  2 +-
 5 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/app.ts b/src/app.ts
index a06be02..139ce80 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -58,7 +58,7 @@ app.set('trust proxy',true);
 // routes
 app.get(['/', '/login'], (req, res) => {
   logger.log(req.ip + " - " + res.locals.ip, true);
-  res.render("index");
+  res.render("index", {"mapbox": process.env.MAPBOX, "root": process.env.ROOT});
 });
 
 app.use('/write', writeRouter);
diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx
index 6229027..19e7916 100644
--- a/src/client/components/App.tsx
+++ b/src/client/components/App.tsx
@@ -4,6 +4,7 @@ import { useColorScheme } from '@mui/material/styles';
 import { useMediaQuery } from '@mui/material';
 import Start from '../pages/Start';
 import Login from '../pages/Login';
+import axios from "axios";
 
 export const Context = createContext([]);
 
@@ -38,18 +39,41 @@ const router = createBrowserRouter([
   }
 ]);
 
+
 const App = () => {
   const [userInfo, setUserInfo] = useState(convertJwt());
   const [isLoggedIn, setLogin] = useState(loginDefault(userInfo));
   const { mode, setMode } = useColorScheme();
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [mapToken, setMapToken] = useState<string | null>(null);
 
   useEffect(() => {
     setMode(prefersDarkMode ? "dark" : "light");
   }, [prefersDarkMode, setMode]);
 
+
+  useEffect(() => {
+    if (!isLoggedIn) return;
+    const fetchToken = async () => {
+      try {
+        const token = localStorage.getItem("jwt");
+        const response = await axios.get("/read/maptoken", {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        setMapToken(response.data.mapbox);
+      } catch (error) {
+        console.error("Error fetching map token:", error);
+      }
+    };
+
+    fetchToken();
+  }, [isLoggedIn]);
+
   return (
-    <Context.Provider value={[isLoggedIn, setLogin, userInfo, setUserInfo, mode, setMode, prefersDarkMode]}>
+    <Context.Provider value={[isLoggedIn, setLogin, userInfo, setUserInfo, mode, setMode, prefersDarkMode, mapToken]}>
       <RouterProvider router={router} />
     </Context.Provider>
   );
diff --git a/src/client/components/Map.tsx b/src/client/components/Map.tsx
index 6d40d42..e6b8eb4 100644
--- a/src/client/components/Map.tsx
+++ b/src/client/components/Map.tsx
@@ -54,18 +54,20 @@ const MultiColorPolyline = ({ cleanEntries }: { cleanEntries: Models.IEntry[] })
 	});
 }
 
+
 function Map({ entries }: { entries: Models.IEntry[] }) {
 	if (!entries?.length) {
 		return <span className="noData cut">No Data to be displayed</span>
 	}
-	const [, , , , mode] = useContext(Context);
+
+	const [, , , , mode, , , mapToken] = useContext(Context);
 	const [mapStyle, setMapStyle] = useState(mode);
 
 	const lastEntry = entries.at(-1);
 	const cleanEntries = entries.filter((entry) => !entry.ignore);
 	const cleanEntriesWithoutLast = cleanEntries.slice(0, -1);
 
-
+	const replaceKeyword = "XXXREPLACEXXX";
 
 	// Function to create custom icon with dynamic className
 	function createCustomIcon(entry: Models.IEntry) {
@@ -128,7 +130,7 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 							>
 								<TileLayer
 									attribution={layer.attribution}
-									url={layer.url}
+									url={layer.url.includes(replaceKeyword) ? layer.url.replace(replaceKeyword, mapToken) : layer.url}
 									tileSize={layer.size || 256}
 									zoomOffset={layer.zoomOffset || 0}
 
diff --git a/src/client/components/MiniMap.tsx b/src/client/components/MiniMap.tsx
index ddac239..54e0be9 100644
--- a/src/client/components/MiniMap.tsx
+++ b/src/client/components/MiniMap.tsx
@@ -1,8 +1,14 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { MapContainer, TileLayer } from "react-leaflet";
 import { MapRecenter } from "./MapCenter";
+import { Context } from "./App";
 
 export default function MiniMap({ layer, lastEntry, index }: client.MiniMapProps) {
+
+	const [, , , , , , , mapToken] = useContext(Context);
+
+	const replaceKeyword = "XXXREPLACEXXX";
+
 	function handleClick() {
 		const elements = document.querySelectorAll('input.leaflet-control-layers-selector');
 		const el = elements[index] as HTMLInputElement | null;
@@ -24,7 +30,7 @@ export default function MiniMap({ layer, lastEntry, index }: client.MiniMapProps
 				<MapRecenter lat={lastEntry.lat} lon={lastEntry.lon} zoom={15} fly={false} />
 				<TileLayer
 					attribution={layer.attribution}
-					url={layer.url}
+					url={layer.url.includes(replaceKeyword) ? layer.url.replace(replaceKeyword, mapToken) : layer.url}
 					tileSize={layer.size || 256}
 					zoomOffset={layer.zoomOffset || 0}
 				/>
diff --git a/src/client/scripts/layers.ts b/src/client/scripts/layers.ts
index 0ede698..68d19e5 100644
--- a/src/client/scripts/layers.ts
+++ b/src/client/scripts/layers.ts
@@ -40,7 +40,7 @@ export const layers:client.Layer[] = [
 	{
 		name: "Mapbox Satelite Streets",
 		attribution: '&copy; <a href="https://www.mapbox.com/" target="_blank">Mapbox</a>',
-		url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidHlwZS1zdHlsZSIsImEiOiJjbGJ4aG14enEwZ2toM3BvNW5uanhuOGRvIn0.7TUEM9vA-EYSt3WW_bcsAA',
+		url: `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/tiles/{z}/{x}/{y}?access_token=XXXREPLACEXXX`,
 		markerStyle: "dark",
 		size: 512,
 		zoomOffset: -1