Updated comment filters

hicommonwealth · Dec 26, 2024 · 4aaa10f · 4aaa10f
1 parent cc41703
commit 4aaa10f
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 4 deletions.
diff --git a/libs/model/src/comment/GetComments.query.ts b/libs/model/src/comment/GetComments.query.ts
@@ -19,9 +19,17 @@ export function GetComments(): Query<typeof schemas.GetComments> {
         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<typeof schemas.GetComments> {
             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<typeof schemas.GetComments> {
             : ''
         }
         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
@@ -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
@@ -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
@@ -13,14 +13,18 @@ const useFetchCommentsQuery = ({
   comment_id,
   parent_id,
   include_reactions,
+  include_spam_comments,
+  order_by,
   apiEnabled = true,
 }: FetchCommentsProps) => {
   return trpc.comment.getComments.useInfiniteQuery(
     {
       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
@@ -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<boolean>(false);
+  const [includeSpam, setIncludeSpam] = useState<boolean>(false);
   const [commentSortType, setCommentSortType] =
     useState<CommentsFeaturedFilterTypes>(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',
+            },
           ]}
         />
         <CWCheckbox
-          checked={includeSpamThreads}
+          checked={includeSpam}
           label="Include comments flagged as spam"
-          onChange={(e) => setIncludeSpamThreads(e?.target?.checked || false)}
+          onChange={(e) => setIncludeSpam(e?.target?.checked || false)}
         />
       </div>
       <div className="CommentsTree">