Change WebUI to read API URL not from env but from config file

src/MapClient/public/config.json

@@ -0,0 +1,3 @@
+{
+    "API": "http://localhost:8080/api/v1/client"
+}

src/MapClient/src/api/mapService.js

@@ -3,9 +3,9 @@ import axios from "axios";
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
 // Fetch the center coordinates for the initial map load
-export const fetchCenterCoordinates = async () => {
+export const fetchCenterCoordinates = async (apiUrl) => {
     try {
-        const response = await axios.get(`${API_BASE_URL}/area`);
+        const response = await axios.get(`${apiUrl}/area`);
         return response.data;
     } catch (error) {
         console.error("Error fetching center coordinates:", error);
@@ -14,9 +14,9 @@ export const fetchCenterCoordinates = async () => {
 };
 
 // Fetch all hives and extract their latitude/longitude
-export const fetchHives = async () => {
+export const fetchHives = async (apiUrl) => {
     try {
-        const response = await axios.get(`${API_BASE_URL}/hive`);
+        const response = await axios.get(`${apiUrl}/hive`);
 
         return response.data.map(hive => ({
             id: hive.HiveID,
@@ -31,9 +31,9 @@ export const fetchHives = async () => {
 };
 
 // Move all hives to a new location
-export const moveHives = async (lat, lon, ids) => {
+export const moveHives = async (apiUrl, lat, lon, ids) => {
     try {
-        await axios.patch(`${API_BASE_URL}/hive`, { 
+        await axios.patch(`${apiUrl}/hive`, { 
             Hives: ids, 
             Destination: {
                 Latitude: lat,

src/MapClient/src/components/MapView.jsx

@@ -21,6 +21,7 @@ const MapView = () => {
     const mapRef = useRef(null);
     const vectorLayerRef = useRef(null);
     const initialized = useRef(false);
+    const apiUrl = useRef(null)
     const [hives, setHives] = useState([]);
     const [popup, setPopup] = useState({ visible: false, coords: null });
     const [mouseCoords, setMouseCoords] = useState({ lat: "", lon: "" });
@@ -28,11 +29,17 @@ const MapView = () => {
 
     useEffect(() => {
         const initializeMap = async () => {
+
+            const res = await fetch('/config.json')
+            const data = await res.json()
+
+            apiUrl.current = data.API
+
             if (initialized.current) return;
             initialized.current = true;
 
             try {
-                const center = await fetchCenterCoordinates();
+                const center = await fetchCenterCoordinates(apiUrl.current);
                 if (center) {
                     initMap(center.Latitude, center.Longitude);
                     await fetchAndDrawHives();
@@ -66,7 +73,7 @@ const MapView = () => {
     // Fetch hives and draw them on the map
     const fetchAndDrawHives = async () => {
         try {
-            const data = await fetchHives();
+            const data = await fetchHives(apiUrl.current);
             setHives(data);
             drawHives(data);
         } catch (error) {
@@ -174,7 +181,7 @@ const MapView = () => {
             <Popup 
                 isVisible={popup.visible} 
                 coords={popup.coords} 
-                onConfirm={() => moveHives(popup.coords.lat, popup.coords.lon, hives.map(h => h.id))} 
+                onConfirm={() => moveHives(apiUrl.current, popup.coords.lat, popup.coords.lon, hives.map(h => h.id))} 
                 onCancel={() => setPopup({ visible: false })} 
             />
         </div>