Use comments component

Author: davidsklar99

pages/checkin/index.ts

@@ -1,15 +1,14 @@
 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, Divider } 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";
 import { Overlay2 } from "@blueprintjs/core";
 import { LithologyList } from "@macrostrat/data-components";
 import { ClientOnly } from "vike-react/ClientOnly";
-import { ExpansionPanel } from "@macrostrat/map-interface";
 
 function Map(props) {
   return h(
@@ -23,34 +22,6 @@ function Map(props) {
 }
 
 export function Checkins({checkin, comments}) {
-    console.log("checkin", comments)
-    /*
-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);
-
     const center = {
         lat: checkin.lat,
         lng: checkin.lng
@@ -112,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),
             ]),
@@ -125,7 +96,11 @@ const [isOpen, setIsOpen] = useState(false);
             }),
             h('div', { className: 'observations' }, observations),
         ]),
-        h(Comments, { comments }),
+        h.if(comments?.length > 0)('div.comments-container', [
+            h('h2', 'Comments'),
+            h(Divider),
+            h(Comments, { comments }),
+        ]),
         h(Footer),
     ])
 
@@ -250,42 +225,4 @@ function observationFooter(observation) {
             h('p', {className: "notes"}, rocks.notes),
         ]),
     ]);
-}
-
-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', [
-        h('h2', 'Comments'),
-        h(Divider),
-        ...commentArr
-    ]);
 }

pages/checkin/main.module.sass

@@ -247,30 +247,6 @@ h4
   width: 50%
   text-align: center
 
-.comments
-  margin-left: 20%
+.comments-container
   width: 60%
-  margin-bottom: 2em
-
-  h2
-    margin: 0
-  
-  .comment
-    display: grid
-    grid-template-columns: 25% 55% 15% 5% 
-    padding: .5em
-    align-items: center
-
-    .comment-likes
-      display: flex
-      gap: .5em
-
-    .comment-author
-      display: flex
-      flex-direction: column
-      justify-content: center
-      align-items: center
-
-    .comment-pic
-      height: 6em
-      width: 6em
+  margin: 0 0 2em 20%