HOLY FUCK BASIC LINK SHARE FUNCTION IS WORKING

taver-ca · Nov 9, 2024 · 480b450 · 480b450
1 parent a59ec7c
commit 480b450
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 15 deletions.
diff --git a/src/App.js b/src/App.js
@@ -85,7 +85,15 @@ function App() {
               endDate={endDate}
               shareId={shareId} />
           </Grid>} />
-          <Route path="/details/:guid" element={<Voyage />} />
+          <Route path="/tales/:guid" element={
+            <Voyage 
+                        concerts={concerts}
+                        style={mapStyle}
+                        userLocation={userLocation}
+                        setStyle={setMapStyle}
+                        setConcerts={setConcerts}
+                        setUserLocation={setUserLocation}
+          />} />
         </Routes>
       </Router>
     </div>

diff --git a/src/Voyage/Voyage.js b/src/Voyage/Voyage.js
@@ -5,13 +5,21 @@ import { useState, useEffect } from "react";
 import { useParams } from 'react-router-dom';
 import { useLoadScript } from "@react-google-maps/api"
 
+function toLowerCaseKeys(obj) { if (Array.isArray(obj)) { return obj.map(toLowerCaseKeys); } else if (obj !== null && obj.constructor === Object) { return Object.keys(obj).reduce((acc, key) => { const lowerCaseKey = key.charAt(0).toLowerCase() + key.slice(1); acc[lowerCaseKey] = toLowerCaseKeys(obj[key]); return acc; }, {}); } return obj; }
+
+
+
 const Voyage = ({
+    concerts,
+    userLocation,
+    style,
+    setConcerts,
+    setUserLocation,
+    setStyle
 
 }) => {
     const { guid } = useParams();
-    const { retrievedConcerts, setRetrievedConcerts } = useState([])
-    const { retrievedLocation, setRetrievedLocation } = useState(null);
-    const { retrievedStyle, setRetrievedStyle } = useState('');
+    const [loading, setLoading] = useState(true);
     const { isLoaded } = useLoadScript({
         googleMapsApiKey: process.env.REACT_APP_GCP_KEY, // Add your API key
     });
@@ -21,6 +29,7 @@ const Voyage = ({
     //if unable to retrieve data redirect user to the main page, let them know first though
     useEffect(() => {
         // Fetch data from an API 
+        console.log("requesting data from server");
         fetch(`${process.env.REACT_APP_BACKEND}/RetrieveTrip?tripId=${guid}`,
             {
                 method: "GET",
@@ -29,23 +38,33 @@ const Voyage = ({
                 },
             })
             .then(response => response.json())
-            .then(data =>{
+            .then(data => {
                 //these are json strings, will need to be deserialized
-
-                setRetrievedConcerts(data.ConcertJson);
-                setRetrievedLocation(data.StartingLocation);
-                setRetrievedStyle(data.mapStyleId);
-            } );
+                var parsedConcerts = JSON.parse(data.ConcertJson);
+                var transformedConcerts = toLowerCaseKeys(parsedConcerts);
+                console.log(data.StartingLocation);
+                var coords = data.StartingLocation.match(/-?\d+\.\d+/g);
+                var result = { coords: { longitude: parseFloat(coords[0]), latitude: parseFloat(coords[1]) } };
+                console.log(result);
+                setConcerts(transformedConcerts);
+                setUserLocation(result);
+                setStyle(data.mapStyleId);
+                setLoading(false);
+            });
+    }, []);
 
+    // ...
+    if (loading) {
+        return null;
+    }
 
-    }, []);
 
-    const middleIndex = Math.ceil(retrievedConcerts.length / 2);
-    const concerts1 = retrievedConcerts.slice(0, middleIndex);
-    const concerts2 = retrievedConcerts.slice(middleIndex);
+    const middleIndex = Math.ceil(concerts.length / 2);
+    const concerts1 = concerts.slice(0, middleIndex);
+    const concerts2 = concerts.slice(middleIndex);
 
     return (<Stack disablePadding spacing={3}>
-        {isLoaded ? <Map concerts={retrievedConcerts} userLocation={retrievedLocation} mapStyle={retrievedStyle} /> : null}
+        {isLoaded ? <Map concerts={concerts} userLocation={userLocation} mapStyle={style} /> : null}
         <TextField
             variant="standard"
         />