diff --git a/components/comment.js b/components/comment.js
index 7619c4ae..f05f7d49 100644
--- a/components/comment.js
+++ b/components/comment.js
@@ -2,7 +2,7 @@ import itemStyles from './item.module.css'
import styles from './comment.module.css'
import Text from './text'
import Link from 'next/link'
-import Reply from './reply'
+import Reply, { ReplyOnAnotherPage } from './reply'
import { useEffect, useRef, useState } from 'react'
import { timeSince } from '../lib/time'
import UpVote from './upvote'
@@ -11,7 +11,7 @@ import EyeClose from '../svgs/eye-close-line.svg'
import { useRouter } from 'next/router'
import CommentEdit from './comment-edit'
import Countdown from './countdown'
-import { NOFOLLOW_LIMIT } from '../lib/constants'
+import { COMMENT_DEPTH_LIMIT, NOFOLLOW_LIMIT } from '../lib/constants'
import { ignoreClick } from '../lib/clicks'
function Parent ({ item, rootText }) {
@@ -53,10 +53,17 @@ export function CommentFlat ({ item, ...props }) {
if (ignoreClick(e)) {
return
}
- router.push({
- pathname: '/items/[id]',
- query: { id: item.root.id, commentId: item.id }
- }, `/items/${item.root.id}`)
+ if (item.path.split('.').length > COMMENT_DEPTH_LIMIT + 1) {
+ router.push({
+ pathname: '/items/[id]',
+ query: { id: item.parentId, commentId: item.id }
+ }, `/items/${item.parentId}`)
+ } else {
+ router.push({
+ pathname: '/items/[id]',
+ query: { id: item.root.id, commentId: item.id }
+ }, `/items/${item.root.id}`)
+ }
}}
>
@@ -66,7 +73,7 @@ export function CommentFlat ({ item, ...props }) {
export default function Comment ({
item, children, replyOpen, includeParent,
- rootText, noComments, noReply, truncate
+ rootText, noComments, noReply, truncate, depth
}) {
const [edit, setEdit] = useState()
const [collapse, setCollapse] = useState(false)
@@ -89,6 +96,8 @@ export default function Comment ({
setCollapse(localStorage.getItem(`commentCollapse:${item.id}`))
}, [item])
+ const bottomedOut = depth === COMMENT_DEPTH_LIMIT
+
const op = item.root.user.name === item.user.name
return (
@@ -171,20 +180,40 @@ export default function Comment ({
)}
-
- {!noReply &&
-
}
- {children}
-
- {item.comments && !noComments
- ? item.comments.map((item) => (
-
- ))
- : null}
-
-
+ {bottomedOut
+ ?
+ : (
+
+ {!noReply &&
+
}
+ {children}
+
+ {item.comments && !noComments
+ ? item.comments.map((item) => (
+
+ ))
+ : null}
+
+
+ )}
+
+ )
+}
+
+function DepthLimit ({ item }) {
+ if (item.ncomments > 0) {
+ return (
+
+ view replies
+
+ )
+ }
+
+ return (
+
+
)
}
diff --git a/components/comments.js b/components/comments.js
index 511b2641..283d3414 100644
--- a/components/comments.js
+++ b/components/comments.js
@@ -1,4 +1,4 @@
-import { gql, useApolloClient, useLazyQuery, useQuery } from '@apollo/client'
+import { gql, useApolloClient, useLazyQuery } from '@apollo/client'
import { useEffect, useState } from 'react'
import Comment, { CommentSkeleton } from './comment'
import styles from './header.module.css'
@@ -89,7 +89,7 @@ export default function Comments ({ parentId, comments, ...props }) {
{loading
?
: comments.map(item => (
-
+
))}
>
)
@@ -98,14 +98,3 @@ export default function Comments ({ parentId, comments, ...props }) {
export function CommentsSkeleton () {
return
}
-
-export function CommentsQuery ({ query, ...props }) {
- const { error, data } = useQuery(query)
-
- if (error) return Failed to load!
- if (!data) {
- return
- }
-
- return
-}
diff --git a/components/notifications.js b/components/notifications.js
index b4804721..314218e6 100644
--- a/components/notifications.js
+++ b/components/notifications.js
@@ -10,6 +10,7 @@ import { 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 } from '../lib/constants'
// TODO: oh man, this is a mess ... each notification type should just be a component ...
function Notification ({ n }) {
@@ -31,10 +32,17 @@ function Notification ({ n }) {
} else if (n.__typename === 'Invitification') {
router.push('/invites')
} else if (!n.item.title) {
- router.push({
- pathname: '/items/[id]',
- query: { id: n.item.root.id, commentId: n.item.id }
- }, `/items/${n.item.root.id}`)
+ if (n.item.path.split('.').length > COMMENT_DEPTH_LIMIT + 1) {
+ router.push({
+ pathname: '/items/[id]',
+ query: { id: n.item.parentId, commentId: n.item.id }
+ }, `/items/${n.item.parentId}`)
+ } else {
+ router.push({
+ pathname: '/items/[id]',
+ query: { id: n.item.root.id, commentId: n.item.id }
+ }, `/items/${n.item.root.id}`)
+ }
} else {
router.push({
pathname: '/items/[id]',
diff --git a/components/reply.js b/components/reply.js
index 70ee3a5b..b787f91e 100644
--- a/components/reply.js
+++ b/components/reply.js
@@ -8,11 +8,20 @@ import ActionTooltip from './action-tooltip'
import TextareaAutosize from 'react-textarea-autosize'
import { useEffect, useState } from 'react'
import Info from './info'
+import Link from 'next/link'
export const CommentSchema = Yup.object({
text: Yup.string().required('required').trim()
})
+export function ReplyOnAnotherPage ({ parentId }) {
+ return (
+
+ reply on another page
+
+ )
+}
+
export default function Reply ({ parentId, meComments, onSuccess, replyOpen }) {
const [reply, setReply] = useState(replyOpen)
const me = useMe()
diff --git a/fragments/comments.js b/fragments/comments.js
index 9b162e5a..a116ca25 100644
--- a/fragments/comments.js
+++ b/fragments/comments.js
@@ -15,6 +15,7 @@ export const COMMENT_FIELDS = gql`
boost
meSats
meComments
+ path
mine
ncomments
root {
diff --git a/fragments/items.js b/fragments/items.js
index 75249373..da31a7d8 100644
--- a/fragments/items.js
+++ b/fragments/items.js
@@ -19,6 +19,7 @@ export const ITEM_FIELDS = gql`
sats
upvotes
boost
+ path
meSats
ncomments
maxBid
diff --git a/lib/constants.js b/lib/constants.js
index ed92d091..7b375a61 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -9,3 +9,4 @@ export const UPLOAD_TYPES_ALLOW = [
'image/jpeg',
'image/webp'
]
+export const COMMENT_DEPTH_LIMIT = 10