improved comment linking

components/comment.js

@@ -23,6 +23,7 @@ import { useMe } from './me'
 import { useQuoteReply } from './use-quote-reply'
 import { DownZap } from './dont-link-this'
 import Skull from '../svgs/death-skull.svg'
+import { commentSubTreeRootId } from '../lib/item'
 
 function Parent ({ item, rootText }) {
   const root = useRoot()
@@ -59,17 +60,11 @@ const truncateString = (string = '', maxLength = 140) =>
 export function CommentFlat ({ item, rank, siblingComments, ...props }) {
   const router = useRouter()
   const [href, as] = useMemo(() => {
-    if (item.path.split('.').length > COMMENT_DEPTH_LIMIT + 1) {
-      return [{
-        pathname: '/items/[id]',
-        query: { id: item.parentId, commentId: item.id }
-      }, `/items/${item.parentId}`]
-    } else {
-      return [{
-        pathname: '/items/[id]',
-        query: { id: item.root.id, commentId: item.id }
-      }, `/items/${item.root.id}`]
-    }
+    const rootId = commentSubTreeRootId(item)
+    return [{
+      pathname: '/items/[id]',
+      query: { id: rootId, commentId: item.id }
+    }, `/items/${rootId}`]
   }, [item?.id])
 
   return (

components/notifications.js

@@ -11,7 +11,7 @@ import { dayMonthYear, timeSince } from '../lib/time'
 import Link from 'next/link'
 import Check from '../svgs/check-double-line.svg'
 import HandCoin from '../svgs/hand-coin-fill.svg'
-import { COMMENT_DEPTH_LIMIT, LOST_BLURBS, FOUND_BLURBS } from '../lib/constants'
+import { LOST_BLURBS, FOUND_BLURBS } from '../lib/constants'
 import CowboyHatIcon from '../svgs/cowboy.svg'
 import BaldIcon from '../svgs/bald.svg'
 import { RootProvider } from './root'
@@ -28,6 +28,7 @@ import { numWithUnits } from '../lib/format'
 import BountyIcon from '../svgs/bounty-bag.svg'
 import { LongCountdown } from './countdown'
 import { nextBillingWithGrace } from '../lib/territory'
+import { commentSubTreeRootId } from '../lib/item'
 
 function Notification ({ n, fresh }) {
   const type = n.__typename
@@ -98,24 +99,13 @@ const defaultOnClick = n => {
 
   // Votification, Mention, JobChanged, Reply all have item
   if (!n.item.title) {
-    const path = n.item.path.split('.')
-    if (path.length > COMMENT_DEPTH_LIMIT + 1) {
-      const rootId = path.slice(-(COMMENT_DEPTH_LIMIT + 1))[0]
-      return {
-        href: {
-          pathname: '/items/[id]',
-          query: { id: rootId, commentId: n.item.id }
-        },
-        as: `/items/${rootId}`
-      }
-    } else {
-      return {
-        href: {
-          pathname: '/items/[id]',
-          query: { id: n.item.root.id, commentId: n.item.id }
-        },
-        as: `/items/${n.item.root.id}`
-      }
+    const rootId = commentSubTreeRootId(n.item)
+    return {
+      href: {
+        pathname: '/items/[id]',
+        query: { id: rootId, commentId: n.item.id }
+      },
+      as: `/items/${rootId}`
     }
   } else {
     return {

components/reply.js

@@ -8,17 +8,16 @@ import Link from 'next/link'
 import { FeeButtonProvider, postCommentBaseLineItems, postCommentUseRemoteLineItems } from './fee-button'
 import { commentsViewedAfterComment } from '../lib/new-comments'
 import { commentSchema } from '../lib/validate'
-import { COMMENT_DEPTH_LIMIT } from '../lib/constants'
 import { useToast } from './toast'
 import { toastDeleteScheduled } from '../lib/form'
 import { ItemButtonBar } from './post'
 import { useShowModal } from './modal'
 import { Button } from 'react-bootstrap'
 import { useRoot } from './root'
+import { commentSubTreeRootId } from '../lib/item'
 
 export function ReplyOnAnotherPage ({ item }) {
-  const path = item.path.split('.')
-  const rootId = path.slice(-(COMMENT_DEPTH_LIMIT - 1))[0]
+  const rootId = commentSubTreeRootId(item)
 
   let text = 'reply on another page'
   if (item.ncomments > 0) {

components/share.js

@@ -7,6 +7,8 @@ import { useMe } from './me'
 import { useToast } from './toast'
 import { SSR } from '../lib/constants'
 import { callWithTimeout } from '../lib/nostr'
+import { commentSubTreeRootId } from '../lib/item'
+import { useRouter } from 'next/router'
 
 const referrurl = (ipath, me) => {
   const path = `${ipath}${me ? `/r/${me.name}` : ''}`
@@ -67,7 +69,16 @@ export default function Share ({ path, title, className = '' }) {
 export function CopyLinkDropdownItem ({ item }) {
   const me = useMe()
   const toaster = useToast()
-  const url = referrurl(`/items/${item.id}`, me)
+  const router = useRouter()
+  let url = referrurl(`/items/${item.id}`, me)
+
+  // if this is a comment and we're not directly on the comment page
+  // link to the comment in context
+  if (item.parentId && !router.asPath.includes(`/items/${item.id}`)) {
+    const rootId = commentSubTreeRootId(item)
+    url = referrurl(`/items/${rootId}`, me) + `?commentId=${item.id}`
+  }
+
   return (
     <Dropdown.Item
       onClick={async () => {

lib/item.js

@@ -1,4 +1,4 @@
-import { OLD_ITEM_DAYS } from './constants'
+import { COMMENT_DEPTH_LIMIT, OLD_ITEM_DAYS } from './constants'
 import { datePivot } from './time'
 
 export const defaultCommentSort = (pinned, bio, createdAt) => {
@@ -52,3 +52,8 @@ export const deleteItemByAuthor = async ({ models, id, item }) => {
 
   return await models.item.update({ where: { id: Number(id) }, data: updateData })
 }
+
+export const commentSubTreeRootId = (item) => {
+  const path = item.path.split('.')
+  return path.slice(-(COMMENT_DEPTH_LIMIT - 1))[0]
+}