Add comments and back nav

web/pages/date-docs/[username].tsx

@@ -1,5 +1,5 @@
 import { getDateDoc } from 'web/lib/firebase/posts'
-import { LinkIcon } from '@heroicons/react/outline'
+import { ArrowLeftIcon, LinkIcon } from '@heroicons/react/outline'
 import { Page } from 'web/components/page'
 import dayjs from 'dayjs'
 
@@ -18,19 +18,21 @@ import { track } from '@amplitude/analytics-browser'
 import toast from 'react-hot-toast'
 import { copyToClipboard } from 'web/lib/util/copy'
 import { useUser } from 'web/hooks/use-user'
-import { RichEditPost } from '../post/[...slugs]'
+import { PostCommentsActivity, RichEditPost } from '../post/[...slugs]'
 import { usePost } from 'web/hooks/use-post'
+import { useTipTxns } from 'web/hooks/use-tip-txns'
+import { useCommentsOnPost } from 'web/hooks/use-comments'
 
 export async function getStaticProps(props: { params: { username: string } }) {
   const { username } = props.params
-  const { user, post } = (await getDateDoc(username)) ?? {
-    user: null,
+  const { user: creator, post } = (await getDateDoc(username)) ?? {
+    creator: null,
     post: null,
   }
 
   return {
     props: {
-      user,
+      creator,
       post,
     },
     revalidate: 5, // regenerate after five seconds
@@ -41,19 +43,38 @@ export async function getStaticPaths() {
   return { paths: [], fallback: 'blocking' }
 }
 
-export default function DateDocPage(props: {
-  user: User | null
+export default function DateDocPageHelper(props: {
+  creator: User | null
   post: DateDoc | null
 }) {
-  const { user, post } = props
+  const { creator, post } = props
 
-  if (!user || !post) return <Custom404 />
+  if (!creator || !post) return <Custom404 />
+
+  return <DateDocPage creator={creator} post={post} />
+}
+
+function DateDocPage(props: { creator: User; post: DateDoc }) {
+  const { creator, post } = props
+
+  const tips = useTipTxns({ postId: post.id })
+  const comments = useCommentsOnPost(post.id) ?? []
 
   return (
     <Page>
-      <div className="mx-auto w-full max-w-xl">
-        <DateDocPost dateDoc={post} creator={user} />
-      </div>
+      <Col className="mx-auto w-full max-w-xl gap-6 sm:mb-6">
+        <SiteLink href="/date-docs">
+          <Row className="items-center gap-2">
+            <ArrowLeftIcon className="h-5 w-5" aria-hidden="true" />
+            <div>Date docs</div>
+          </Row>
+        </SiteLink>
+        <DateDocPost dateDoc={post} creator={creator} />
+        <Col className="gap-4 rounded-lg bg-white px-6 py-4">
+          <div className="">Add your endorsement of {creator.name}!</div>
+          <PostCommentsActivity post={post} comments={comments} tips={tips} />
+        </Col>
+      </Col>
     </Page>
   )
 }

web/pages/post/[...slugs]/index.tsx

@@ -34,9 +34,9 @@ export async function getStaticProps(props: { params: { slugs: string[] } }) {
 
   return {
     props: {
-      post: post,
-      creator: creator,
-      comments: comments,
+      post,
+      creator,
+      comments,
     },
 
     revalidate: 60, // regenerate after a minute
@@ -117,12 +117,7 @@ export default function PostPage(props: {
 
         <Spacer h={4} />
         <div className="rounded-lg bg-white px-6 py-4 sm:py-0">
-          <PostCommentsActivity
-            post={post}
-            comments={comments}
-            tips={tips}
-            user={creator}
-          />
+          <PostCommentsActivity post={post} comments={comments} tips={tips} />
         </div>
       </div>
     </Page>
@@ -133,9 +128,8 @@ export function PostCommentsActivity(props: {
   post: Post
   comments: PostComment[]
   tips: CommentTipMap
-  user: User | null | undefined
 }) {
-  const { post, comments, user, tips } = props
+  const { post, comments, tips } = props
   const commentsByUserId = groupBy(comments, (c) => c.userId)
   const commentsByParentId = groupBy(comments, (c) => c.replyToCommentId ?? '_')
   const topLevelComments = sortBy(
@@ -149,7 +143,6 @@ export function PostCommentsActivity(props: {
       {topLevelComments.map((parent) => (
         <PostCommentThread
           key={parent.id}
-          user={user}
           post={post}
           parentComment={parent}
           threadComments={sortBy(

web/posts/post-comments.tsx

@@ -3,7 +3,6 @@ import { Editor } from '@tiptap/core'
 import clsx from 'clsx'
 import { PostComment } from 'common/comment'
 import { Post } from 'common/post'
-import { User } from 'common/user'
 import { Dictionary } from 'lodash'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
@@ -21,7 +20,6 @@ import { createCommentOnPost } from 'web/lib/firebase/comments'
 import { firebaseLogin } from 'web/lib/firebase/users'
 
 export function PostCommentThread(props: {
-  user: User | null | undefined
   post: Post
   threadComments: PostComment[]
   tips: CommentTipMap