From cef8a3326766f629767434746839e3945b4849cc Mon Sep 17 00:00:00 2001 From: keyan Date: Tue, 17 May 2022 17:09:15 -0500 Subject: [PATCH] limit displayed comment depth --- components/comment.js | 71 ++++++++++++++++++++++++++----------- components/comments.js | 15 ++------ components/notifications.js | 16 ++++++--- components/reply.js | 9 +++++ fragments/comments.js | 1 + fragments/items.js | 1 + lib/constants.js | 1 + 7 files changed, 76 insertions(+), 38 deletions(-) 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