Merge pull request #57 from UW-Macrostrat/trips

Trips map load

Author: davidsklar99

pages/trip/@id/+data.ts

@@ -3,7 +3,7 @@ import { rockdApiURL } from "@macrostrat-web/settings";
 
 export async function data(pageContext) {
     const data = await fetch(
-        `${rockdApiURL}/trips/${pageContext.routeParams.id}`
+        `${rockdApiURL}/trips/${pageContext.routeParams.id}?simple=true`
     ).then((response) => {
         if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);

pages/trip/index.ts

@@ -14,11 +14,11 @@ import {
   PanelCard,
 } from "@macrostrat/map-interface";
 import { useMapRef } from "@macrostrat/mapbox-react";
+import { map } from "underscore";
 
 export function Trips({data, commentsData}) {
     const [showSatelite, setSatelite] = useState(false);
-    console.log("Trips data:", data);
-    console.log("Comments data:", commentsData);
+    const [mapLoaded, setMapLoaded] = useState(false);
 
     const style = useMapStyle({showSatelite});
 
@@ -29,7 +29,7 @@ export function Trips({data, commentsData}) {
     data.updated = date.toLocaleDateString('en-US', options);
 
     const toolbar = h(Toolbar, {showSatelite, setSatelite});
-    const sidebar = h(SideBar, {data, commentsData});
+    const sidebar = h(SideBar, {data, commentsData, mapLoaded});
 
     if (!sidebar) {
         return h("div", { className: 'loading' }, [
@@ -60,7 +60,9 @@ export function Trips({data, commentsData}) {
                     style: { paddingRight: "calc(30% + 14px)"},
                 },
                 [
-                    h(MapView, { style: style, mapboxToken: SETTINGS.mapboxAccessToken, mapPosition: newMapPosition }),
+                    h(MapView, { style: style, mapboxToken: SETTINGS.mapboxAccessToken, mapPosition: newMapPosition, onMapLoaded: () => {
+                        setMapLoaded(true);
+                    }},),
                     sidebar,
                 ]
                 ),
@@ -102,15 +104,14 @@ function useMapStyle({showSatelite}) {
     return showSatelite ? SETTINGS.satelliteMapURL : useDarkMode()?.isEnabled ? SETTINGS.darkMapURL : SETTINGS.whiteMapURL;
 }
 
-function SideBar({data, commentsData}) {
+function SideBar({data, commentsData, mapLoaded}) {
     const mapRef = useMapRef();
     const map = mapRef.current;
     const profile_pic = h(BlankImage, {src: getProfilePicUrl(data.person_id), className: "profile-pic-header"});
     const stops = data.stops;
     const [commentsOpen, setCommentsOpen] = useState(false);
-    console.log("commentsOpen:", commentsOpen); 
 
-    if(!map) return h("div", {className: "stop-container loading2"}, [
+    if(!mapLoaded) return h("div", {className: "stop-container loading2"}, [
         h("h1", "Loading trip " + data.trip_id + "..."),
         h(Spinner, {style: {marginTop: "30px"}})
     ]);

src/components/general/index.ts

@@ -412,14 +412,14 @@ function Checkin({checkin, mapRef, setInspectPosition, len}) {
             }),
             h("h3", { className: "likes" }, checkin.likes),
           ]),
-          h("div", { className: "observations-container" }, [
+          h.if(checkin?.observations)("div", { className: "observations-container" }, [
             h(Icon, {
               className:
                 "observations-icon " + (isDarkMode ? "icon-dark-mode" : ""),
               icon: "camera",
               style: { color: "white" },
             }),
-            h("h3", { className: "likes" }, checkin.observations.length),
+            h("h3", { className: "likes" }, checkin.observations?.length),
           ]),
           h("div", { className: "comments-container" }, [
             h(Icon, {