diff --git a/libs/model/src/comment/GetComments.query.ts b/libs/model/src/comment/GetComments.query.ts index 83851a78a38..438aadc04dc 100644 --- a/libs/model/src/comment/GetComments.query.ts +++ b/libs/model/src/comment/GetComments.query.ts @@ -19,9 +19,17 @@ export function GetComments(): Query { include_reactions, limit, cursor, + order_by, + include_spam_comments, } = payload; const offset = (cursor - 1) * limit; + const orderByQueries = { + newest: '"created_at" DESC', + oldest: '"created_at" ASC', + mostLikes: '"reaction_count" DESC', + }; + const sql = ` SELECT C.id, @@ -89,6 +97,7 @@ export function GetComments(): Query { C."thread_id" = :thread_id AND C."parent_id" ${parent_id ? '= :parent_id' : 'IS NULL'} ${comment_id ? ' AND C."id" = :comment_id' : ''} + ${!include_spam_comments ? 'AND C."marked_as_spam_at" IS NULL' : ''} ${ include_reactions ? ` @@ -108,7 +117,7 @@ export function GetComments(): Query { : '' } ORDER BY - C."created_at" + C.${orderByQueries[order_by || 'newest']} LIMIT :limit OFFSET :offset; `; diff --git a/libs/schemas/src/queries/comment.schemas.ts b/libs/schemas/src/queries/comment.schemas.ts index aea771ae732..cde9073a00d 100644 --- a/libs/schemas/src/queries/comment.schemas.ts +++ b/libs/schemas/src/queries/comment.schemas.ts @@ -22,12 +22,18 @@ export const CommentsView = CommentView.extend({ reactions: z.array(ReactionView).nullish(), }); +export const GetCommentsOrderBy = z.enum(['newest', 'oldest', 'mostLikes']); + export const GetComments = { input: PaginationParamsSchema.extend({ thread_id: PG_INT, comment_id: PG_INT.optional(), parent_id: PG_INT.optional(), include_reactions: zBoolean.default(false), + include_spam_comments: zBoolean.optional().default(false), + order_by: GetCommentsOrderBy.optional().default('newest'), + }).omit({ + order_direction: true, }), output: PaginatedResultSchema.extend({ // TODO: fix return types, they break for diff --git a/packages/commonwealth/client/scripts/models/types.ts b/packages/commonwealth/client/scripts/models/types.ts index 8168583f92b..b3f6d9b83c7 100644 --- a/packages/commonwealth/client/scripts/models/types.ts +++ b/packages/commonwealth/client/scripts/models/types.ts @@ -47,6 +47,7 @@ export enum ThreadViewFilterTypes { export enum CommentsFeaturedFilterTypes { Newest = 'newest', Oldest = 'oldest', + MostLikes = 'mostLikes', } export enum ThreadTimelineFilterTypes { diff --git a/packages/commonwealth/client/scripts/state/api/comments/fetchComments.ts b/packages/commonwealth/client/scripts/state/api/comments/fetchComments.ts index d9e42e1e01d..f247d6de02d 100644 --- a/packages/commonwealth/client/scripts/state/api/comments/fetchComments.ts +++ b/packages/commonwealth/client/scripts/state/api/comments/fetchComments.ts @@ -13,6 +13,8 @@ const useFetchCommentsQuery = ({ comment_id, parent_id, include_reactions, + include_spam_comments, + order_by, apiEnabled = true, }: FetchCommentsProps) => { return trpc.comment.getComments.useInfiniteQuery( @@ -20,7 +22,9 @@ const useFetchCommentsQuery = ({ thread_id, comment_id, parent_id, + order_by, include_reactions, + include_spam_comments, }, { staleTime: COMMENTS_STALE_TIME, diff --git a/packages/commonwealth/client/scripts/views/pages/discussions/CommentTree/CommentTree.tsx b/packages/commonwealth/client/scripts/views/pages/discussions/CommentTree/CommentTree.tsx index fa5be30cc7d..310c2cfca13 100644 --- a/packages/commonwealth/client/scripts/views/pages/discussions/CommentTree/CommentTree.tsx +++ b/packages/commonwealth/client/scripts/views/pages/discussions/CommentTree/CommentTree.tsx @@ -66,7 +66,7 @@ export const CommentTree = ({ const urlParams = new URLSearchParams(location.search); const focusCommentsParam = urlParams.get('focusComments') === 'true'; // TODO: add these params to API - const [includeSpamThreads, setIncludeSpamThreads] = useState(false); + const [includeSpam, setIncludeSpam] = useState(false); const [commentSortType, setCommentSortType] = useState(CommentsFeaturedFilterTypes.Newest); @@ -105,6 +105,8 @@ export const CommentTree = ({ } = useFetchCommentsQuery({ thread_id: parseInt(`${thread.id}`) || 0, include_reactions: true, + include_spam_comments: includeSpam, + order_by: commentSortType, cursor: 1, limit: 10, apiEnabled: !!communityId && !!thread.id, @@ -502,12 +504,18 @@ export const CommentTree = ({ label: 'Oldest', iconLeft: 'clockCounterClockwise', }, + { + id: 3, + value: CommentsFeaturedFilterTypes.MostLikes, + label: 'Upvotes', + iconLeft: 'upvote', + }, ]} /> setIncludeSpamThreads(e?.target?.checked || false)} + onChange={(e) => setIncludeSpam(e?.target?.checked || false)} />