Merge pull request #56 from UW-Macrostrat/checkin-comments

Checkin comments

Author: davidsklar99

pages/checkin/@id/+Page.client.ts

@@ -3,7 +3,6 @@ import { Checkins } from "../index";
 import { useData } from "vike-react/useData";
 
 export function Page() {
-    const { checkin } = useData();
-    console.log("Checkin data:", checkin);
-    return h(Checkins, { checkin });
+    const { checkin, comments } = useData();
+    return h(Checkins, { checkin, comments });
 }

pages/checkin/@id/+data.ts

@@ -11,5 +11,14 @@ export async function data(pageContext) {
             }
             return response.json();
         });
-    return { checkin: data.success.data[0] };
+
+    const comments = await fetch(
+            `${rockdApiURL}/protected/comments?checkin_id=${id}`
+        ).then((response) => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+        });
+    return { checkin: data.success.data[0], comments: comments.success.data };
 }

pages/checkin/index.ts

@@ -1,8 +1,8 @@
 import { LngLatCoords } from "@macrostrat/map-interface";
 import { useState, useCallback } from 'react';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import { BlankImage, Footer, getProfilePicUrl, getImageUrl } from "~/components/general";
-import { Icon } from "@blueprintjs/core";
+import { BlankImage, Footer, getProfilePicUrl, getImageUrl, Comments } from "~/components/general";
+import { Icon, Divider, H2 } from "@blueprintjs/core";
 import h from "./main.module.sass";
 import { SETTINGS } from "@macrostrat-web/settings";
 import "@macrostrat/style-system";
@@ -21,34 +21,7 @@ function Map(props) {
   );
 }
 
-export function Checkins({checkin}) {
-    /*
-const [isOpen, setIsOpen] = useState(false);
-    const toggleOverlay = useCallback(() => setIsOpen(open => !open), [setIsOpen]);
-
-    return h("div.container", [
-        h('button', {
-            className: "bp3-button bp3-intent-primary",
-            onClick: toggleOverlay
-        }, "Open Overlay"),
-         h(Overlay2,
-        {
-            isOpen,
-            onClose: toggleOverlay,
-            className: "checkin-overlay",
-            usePortal: true,
-            canEscapeKeyClose: true,
-            canOutsideClickClose: true,
-            hasBackdrop: true,
-        }, "hello"
-        
-    )
-    ]);
-    */
-
-    const [overlayOpen, setOverlayOpen] = useState(false);
-    const [showMap, setShowMap] = useState(false);
-
+export function Checkins({checkin, comments}) {
     const center = {
         lat: checkin.lat,
         lng: checkin.lng
@@ -110,7 +83,7 @@ const [isOpen, setIsOpen] = useState(false);
 
 
     let main = h('div', { className: "container" }, [
-        h('div', { className: showMap ? 'hide' : 'main'}, [
+        h('div', { className: 'main'}, [
             h('div', { className: "checkin-head" }, [
                 h('h1', checkin.notes),
             ]),
@@ -123,9 +96,12 @@ const [isOpen, setIsOpen] = useState(false);
             }),
             h('div', { className: 'observations' }, observations),
         ]),
-        h('div', { className: showMap ? 'hide' : 'bottom' }, [
-            h(Footer),
+        h.if(comments?.length > 0)('div.comments-container', [
+            h('h2', 'Comments'),
+            h(Divider),
+            h(Comments, { comments }),
         ]),
+        h(Footer),
     ])
 
     return main;

pages/checkin/main.module.sass

@@ -245,4 +245,8 @@ h4
 
 .error-img
   width: 50%
-  text-align: center
+  text-align: center
+
+.comments-container
+  width: 60%
+  margin: 0 0 2em 20%

pages/terms/+Page.client.ts

@@ -2,7 +2,7 @@ import { Footer } from "~/components/general";
 import h from "./main.module.sass";
 import "@macrostrat/style-system";
 
-export function Page() {    
+export function Page() { 
     return h("div", { className: "main-page" }, [
         h("div", { className: "content" }, [
             h("div", { className: 'header' }, [

pages/trip/@id/+Page.client.ts

@@ -3,7 +3,9 @@ import { Trips } from "../index";
 import { useData } from "vike-react/useData";
 
 export function Page() {
-    const { data } = useData();
+    const { data, commentsData } = useData();
+    console.log("Trips data:", data);
+    console.log("Comments data:", commentsData);
 
-    return h(Trips, { data: data.success.data[0]});
+    return h(Trips, { data: data.success.data[0], commentsData: commentsData.success.data });
 }

pages/trip/@id/+data.ts

@@ -10,6 +10,15 @@ export async function data(pageContext) {
         }
         return response.json();
     });
-    
-    return { data}
+
+    const commentsData = await fetch(
+        `${rockdApiURL}/protected/comments?trip_id=${pageContext.routeParams.id}`
+    ).then((response) => {
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+    });
+
+    return { data, commentsData }
 }

pages/trip/index.ts

@@ -2,11 +2,11 @@ import h from "./main.module.sass";
 import { useState } from 'react';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import { BlankImage, getProfilePicUrl, Image, createCheckins } from "~/components/general";
+import { BlankImage, getProfilePicUrl, Image, createCheckins, Comments } from "~/components/general";
 import "@macrostrat/style-system";
-import { SETTINGS } from "@macrostrat-web/settings";
+import { rockdApiURL, SETTINGS } from "@macrostrat-web/settings";
 import { DarkModeButton, useDarkMode } from "@macrostrat/ui-components";
-import { Divider, Icon, Spinner } from "@blueprintjs/core";
+import { Divider, Icon, Overlay2, Spinner } from "@blueprintjs/core";
 import {
   MapAreaContainer,
   MapMarker,
@@ -15,9 +15,10 @@ import {
 } from "@macrostrat/map-interface";
 import { useMapRef } from "@macrostrat/mapbox-react";
 
-export function Trips({data}) {
+export function Trips({data, commentsData}) {
     const [showSatelite, setSatelite] = useState(false);
     console.log("Trips data:", data);
+    console.log("Comments data:", commentsData);
 
     const style = useMapStyle({showSatelite});
 
@@ -28,7 +29,7 @@ export function Trips({data}) {
     data.updated = date.toLocaleDateString('en-US', options);
 
     const toolbar = h(Toolbar, {showSatelite, setSatelite});
-    const sidebar = h(SideBar, {data});
+    const sidebar = h(SideBar, {data, commentsData});
 
     if (!sidebar) {
         return h("div", { className: 'loading' }, [
@@ -101,11 +102,13 @@ function useMapStyle({showSatelite}) {
     return showSatelite ? SETTINGS.satelliteMapURL : useDarkMode()?.isEnabled ? SETTINGS.darkMapURL : SETTINGS.whiteMapURL;
 }
 
-function SideBar({data}) {
+function SideBar({data, commentsData}) {
     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"}, [
         h("h1", "Loading trip " + data.trip_id + "..."),
@@ -187,12 +190,34 @@ function SideBar({data}) {
                     h('h4', {className: 'edited'}, "Edited " + data.updated),
                 ]),
                 h('div', {className: 'download-button'}, [
-                    h('a', {className: 'kmz', href: import.meta.env.ROCKD_API_URL + "/trips/" + data.trip_id + "?format=kmz"}, "DOWNLOAD KMZ"),
+                    h('a', {className: 'kmz', href: rockdApiURL + "/trips/" + data.trip_id + "?format=kmz"}, "DOWNLOAD KMZ"),
                 ]),
             ]),
             h("div.details", [
                 h('h1', {className: 'park'}, data.name),
                 h('p', {className: 'description'}, data.description),
+                h.if(commentsData?.length > 0)('div', {className: 'download-button', onClick: () => setCommentsOpen(true)}, [
+                    h('div', {className: 'kmz'}, "View comments"),
+                ]),
+                h.if(commentsData?.length > 0)(Overlay2, {className: 'overlay', isOpen: commentsOpen, usePortal: true}, [
+                    h('div', {className: 'overlay-content'}, [
+                        h('div.comments-container', [
+                            h('div.comments-header', [
+                                h('h2', {className: 'comments-title'}, "Comments"),
+                                h(Icon, {
+                                    icon: "cross",
+                                    className: "close-icon",
+                                    onClick: () => {
+                                        setCommentsOpen(false)
+                                    },
+                                    style: { cursor: "pointer", color: "red" },
+                                }),
+                            ]),
+                            h(Divider),
+                            h(Comments, {comments: commentsData}),
+                        ])
+                    ])
+                ])
             ]),
         ]),
         h('div', { className: 'stop-bottom' }, [

pages/trip/main.module.sass

@@ -12,10 +12,6 @@
   @each $name, $color in $colors
     --#{$name}: #{$color}
 
-*
-  padding: 0
-  margin: 0
-
 body
   &.bp5-dark
     color-scheme: dark
@@ -315,10 +311,12 @@ html, body, .wrapper, #react, .app, #map
   display: flex
   justify-content: center
   align-items: center
-  a
+  cursor: pointer
+
+  .kmz
     color: var(--text-emphasized-color)
 
-  a:hover
+  .kmz:hover
     color: var(--text-emphasized-color)
     background-color: var(--scrollbar-thumb)
     text-decoration: none
@@ -386,3 +384,22 @@ html, body, .wrapper, #react, .app, #map
 #map
   width: 70%
   height: 100%
+
+.overlay-content
+  width: 70%
+  height: 80vh
+  display: flex
+  justify-content: center
+  align-items: center
+
+  h2
+    margin: 0
+
+  .comments-container
+    background-color: var(--background-color)
+    width: 80%
+    padding: 1em
+
+    .comments-header
+      display: flex
+      justify-content: space-between

src/components/general/index.ts

@@ -5,12 +5,11 @@ import {
   useAPIResult,
   useDarkMode,
 } from "@macrostrat/ui-components";
-import { Icon } from "@blueprintjs/core";
+import { Icon, Divider } from "@blueprintjs/core";
 import mapboxgl from "mapbox-gl";
 import { SETTINGS } from "@macrostrat-web/settings";
 import { rockdApiURL, rockdApiOldURL } from "@macrostrat-web/settings";
 import { useState } from "react";
-import { has } from "underscore";
 
 export function Footer() {
   const isDarkMode = useDarkMode().isEnabled;
@@ -437,4 +436,40 @@ function Checkin({checkin, mapRef, setInspectPosition, len}) {
 
     return temp
 
+}
+
+export function Comments({comments}) {
+   const commentArr = [];
+
+    comments.forEach((item, index) => {
+        const { created, comment, person_id, name, likes } = item;
+
+        const commentNode = h('div.comment', [
+            h('div.comment-author', [
+                h(BlankImage, {
+                    className: 'comment-pic',
+                    src: getProfilePicUrl(person_id),
+                    alt: "profile picture"
+                }),
+                h('p', { className: 'comment-author' }, name),
+            ]),
+            h('p', { className: 'comment-text' }, comment),
+            h('p', { className: 'comment-date' }, created),
+            h('div.comment-likes', [
+                h(Icon, { icon: 'thumbs-up', className: 'like-icon' }),
+                h('p', { className: 'comment-likes' }, String(likes)),
+            ])
+        ]);
+
+        commentArr.push(commentNode);
+
+        // Add divider between comments (but not after the last one)
+        if (index < comments.length - 1) {
+            commentArr.push(h(Divider));
+        }
+    });
+
+    return h('div.comments', [
+        ...commentArr
+    ]);
 }