feat: sort columns in discover and report tabs (#338)

mateusz-kleszcz · web-flow · commit 41d65c7bacb5 · 2025-08-12T12:09:47.000+02:00
* feat: enabling sort in content and updatedAt columns

* chore: fix build and refresh yarn lock

* chore: changed lockfile
diff --git a/admin/src/components/CommentStatusFilters/index.tsx b/admin/src/components/CommentStatusFilters/index.tsx
@@ -1,7 +1,8 @@
-import { FC, useState } from "react"
+import { useState } from "react";
 import { getMessage } from "../../utils";
-import { COMMENT_STATUS } from '../../utils/constants';
-import { SingleSelect, SingleSelectOption } from '@strapi/design-system';
+import { COMMENT_STATUS } from "../../utils/constants";
+import { SingleSelect, SingleSelectOption } from "@strapi/design-system";
+import { useQueryParams } from "@strapi/strapi/admin";
 
 const COMMENT_OPTIONS = [
   COMMENT_STATUS.OPEN,
@@ -10,61 +11,51 @@ const COMMENT_OPTIONS = [
   COMMENT_STATUS.APPROVED,
   COMMENT_STATUS.REJECTED,
   COMMENT_STATUS.PENDING,
-]
+];
 
 const getFilter = (filterName: string | undefined) => {
-  switch(filterName) {
+  switch (filterName) {
     case COMMENT_STATUS.BLOCKED:
       return {
-        $or: [
-          { blocked: { $eq: true } },
-          { blockedThread: { $eq: true } },
-        ],
-      }
+        $or: [{ blocked: { $eq: true } }, { blockedThread: { $eq: true } }],
+      };
     case COMMENT_STATUS.REMOVED:
       return {
-        $or: [
-          { blocked: { $eq: true } },
-          { blockedThread: { $eq: true } },
-        ],
-      }
+        $or: [{ blocked: { $eq: true } }, { blockedThread: { $eq: true } }],
+      };
     case COMMENT_STATUS.OPEN:
       return {
         approvalStatus: { $null: true },
-      }
+      };
     case undefined:
-      return {}
+      return {};
     default:
       return {
         approvalStatus: { $eq: filterName },
-      }
+      };
   }
-}
-
-type CommentStatusFiltersProps = {
-  setQueryParams: (nextParams: object, method?: "push" | "remove", replace?: boolean) => void;
 };
 
-export const CommentsStatusFilters: FC<CommentStatusFiltersProps> = ({ setQueryParams }) => {
+export const CommentsStatusFilters = () => {
+  const [_, setQueryParams] = useQueryParams();
   const [currentFilter, setCurrentFilter] = useState<string>();
 
   const handleChange = (filter: string | undefined) => {
-    setCurrentFilter(filter)
+    setCurrentFilter(filter);
     setQueryParams({
       page: {},
-      pageSize: {},
-      filters: getFilter(filter)
+      filters: getFilter(filter),
     });
-  }
+  };
 
   return (
     <SingleSelect
-      placeholder={getMessage('page.common.item.status.setFilter')}
+      placeholder={getMessage("page.common.item.status.setFilter")}
       value={currentFilter}
       onClear={() => handleChange(undefined)}
       onChange={handleChange}
     >
-      {COMMENT_OPTIONS.map(option => (
+      {COMMENT_OPTIONS.map((option) => (
         <SingleSelectOption value={option}>
           {getMessage(`page.common.item.status.${option}`)}
         </SingleSelectOption>
diff --git a/admin/src/components/ReportReasonBadge/index.tsx b/admin/src/components/ReportReasonBadge/index.tsx
@@ -25,7 +25,7 @@ export const ReportReasonBadge: FC<Pick<CommentReport, 'reason'>> = ({ reason })
     >
       {getMessage(
         `page.details.panel.discussion.warnings.reports.dialog.reason.${reason}`,
-        reason,
+        reason || '',
       )}
     </StatusBadge>
   );
diff --git a/admin/src/components/SortableTh/index.tsx b/admin/src/components/SortableTh/index.tsx
@@ -0,0 +1,57 @@
+import { FC } from "react";
+import { Th, Typography } from "@strapi/design-system";
+import { ChevronDown, ChevronUp } from "@strapi/icons";
+import { useQueryParams } from "@strapi/strapi/admin";
+
+type SortQueryParams = {
+  orderBy?: string;
+  page?: object;
+  pageSize?: object;
+};
+
+const getChangedOrder = (orderByKey: string, order: string | undefined) => {
+  switch (order) {
+    case "asc":
+    case "ASC":
+      return `${orderByKey}:desc`;
+    case "desc":
+    case "DESC":
+    default:
+      return `${orderByKey}:asc`;
+  }
+};
+
+type SortableThProps = {
+  label: string;
+  orderByKey: string;
+};
+
+export const SortableTh: FC<SortableThProps> = ({ label, orderByKey }) => {
+  const [{ query: queryParams }, setQueryParams] =
+    useQueryParams<SortQueryParams>();
+
+  const { orderBy = ":" } = queryParams;
+  const key = orderBy.split(":")[0];
+  const order = orderBy.split(":").pop()?.toLowerCase();
+
+  const handleSort = () => {
+    setQueryParams({
+      page: {},
+      orderBy: getChangedOrder(orderByKey, order),
+    });
+  };
+
+  return (
+    <Th onClick={handleSort} style={{ cursor: "pointer" }}>
+      <Typography variant="sigma" style={{ marginRight: "8px" }}>
+        {label}
+      </Typography>
+      {`${key}:${order}` === `${orderByKey}:asc` && (
+        <ChevronDown />
+      )}
+      {`${key}:${order}` === `${orderByKey}:desc` && (
+        <ChevronUp />
+      )}
+    </Th>
+  );
+};
diff --git a/admin/src/pages/Discover/index.tsx b/admin/src/pages/Discover/index.tsx
@@ -4,9 +4,19 @@ import { FC } from 'react';
 import { Config } from '../../api/schemas';
 import { CommentRow } from '../../components/CommentRow';
 import { CommentsStatusFilters } from '../../components/CommentStatusFilters';
+import { SortableTh } from '../../components/SortableTh';
 import { useCommentsAll } from '../../hooks/useCommentsAll';
 import { getMessage } from '../../utils';
 
+const tableHeaders = [
+  { label: "page.discover.table.header.id" },
+  { label: "page.discover.table.header.author" },
+  { label: "page.discover.table.header.message", orderBy: "content" },
+  { label: "page.discover.table.header.thread" },
+  { label: "page.discover.table.header.entry" },
+  { label: "page.discover.table.header.lastUpdate", orderBy: "updatedAt" },
+  { label: "page.discover.table.header.status" },
+];
 
 export const Discover: FC<{ config: Config }> = ({ config }) => {
   const [{ query: queryParams }, setQueryParams] = useQueryParams();
@@ -33,48 +43,29 @@ export const Discover: FC<{ config: Config }> = ({ config }) => {
         <Layouts.Action startActions={
           <>
             <SearchInput label={getMessage('common.search', "Search")} />
-            <CommentsStatusFilters setQueryParams={setQueryParams}/>
+            <CommentsStatusFilters />
           </>
         }/>
         <Layouts.Content>
           <Table>
             <Thead>
               <Tr>
-                <Th>
-                  <Typography variant="sigma">
-                    {getMessage('page.discover.table.header.id')}
-                  </Typography>
-                </Th>
-                <Th>
-                  <Typography variant="sigma">
-                    {getMessage('page.discover.table.header.author')}
-                  </Typography>
-                </Th>
-                <Th>
-                  <Typography variant="sigma">
-                    {getMessage('page.discover.table.header.message')}
-                  </Typography>
-                </Th>
-                <Th>
-                  <Typography variant="sigma">
-                    {getMessage('page.discover.table.header.thread')}
-                  </Typography>
-                </Th>
-                <Th>
-                  <Typography variant="sigma">
-                    {getMessage('page.discover.table.header.entry')}
-                  </Typography>
-                </Th>
-                <Th>
-                  <Typography variant="sigma">
-                    {getMessage('page.discover.table.header.lastUpdate')}
-                  </Typography>
-                </Th>
-                <Th>
-                  <Typography variant="sigma">
-                    {getMessage('page.discover.table.header.status')}
-                  </Typography>
-                </Th>
+                {tableHeaders.map(({ label, orderBy }) => (
+                  <>
+                    {!orderBy ? (
+                      <Th>
+                        <Typography variant="sigma">
+                          {getMessage(label)}
+                        </Typography>
+                      </Th>
+                    ) : (
+                      <SortableTh
+                        label={getMessage(label)}
+                        orderByKey={orderBy}
+                      />
+                    )}
+                  </>
+                ))}
                 <Th />
               </Tr>
             </Thead>
diff --git a/admin/src/pages/Reports/index.tsx b/admin/src/pages/Reports/index.tsx
@@ -5,22 +5,22 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { FC, useCallback, useState } from 'react';
 import { Config } from '../../api/schemas';
 import { ReportsTableRow } from '../../components/ReportsTableRow';
+import { SortableTh } from '../../components/SortableTh';
 import { useAPI } from '../../hooks/useAPI';
 import { useCommentMutations } from '../../hooks/useCommentMutations';
 import { useReports } from '../../hooks/useReports';
 import { getMessage } from '../../utils';
 
 const tableHeaders = [
-  'page.reports.table.header.id',
-  'page.reports.table.header.reason',
-  'page.reports.table.header.content',
-  'page.reports.table.header.status',
-  'page.reports.table.header.issueDate',
-  'page.reports.table.header.relatedComment',
-  'page.reports.table.header.actions',
+  { label: "page.reports.table.header.id" },
+  { label: "page.reports.table.header.reason" },
+  { label: "page.reports.table.header.content", orderBy: "content" },
+  { label: "page.reports.table.header.status" },
+  { label: "page.reports.table.header.issueDate", orderBy: "updatedAt" },
+  { label: "page.reports.table.header.relatedComment" },
+  { label: "page.reports.table.header.actions" },
 ];
 
-
 export const Reports: FC<{ config: Config }> = ({ config }) => {
   const { toggleNotification } = useNotification();
   const api = useAPI();
@@ -106,12 +106,21 @@ export const Reports: FC<{ config: Config }> = ({ config }) => {
                     disabled={result.filter((report) => !report.resolved).length === 0}
                   />
                 </Th>
-                {tableHeaders.map((title) => (
-                  <Th>
-                    <Typography variant="sigma">
-                      {getMessage(title)}
-                    </Typography>
-                  </Th>
+                {tableHeaders.map(({ label, orderBy }) => (
+                  <>
+                    {!orderBy ? (
+                      <Th>
+                        <Typography variant="sigma">
+                          {getMessage(label)}
+                        </Typography>
+                      </Th>
+                    ) : (
+                      <SortableTh
+                        label={getMessage(label)}
+                        orderByKey={orderBy}
+                      />
+                    )}
+                  </>
                 ))}
               </Tr>
             </Thead>
diff --git a/server/src/validators/utils.ts b/server/src/validators/utils.ts
@@ -52,7 +52,7 @@ export const qOperatorValidator = z.object({
 });
 export const orderByValidator = z.string().regex(
   // TODO: check sort options
-  /^(createdAt|updatedAt|id):(desc|asc|ASC|DESC)$/,
+  /^(content|createdAt|updatedAt|id):(desc|asc|ASC|DESC)$/,
   'Invalid orderBy options',
 );
 

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,7 @@ export const ReportReasonBadge: FC<Pick<CommentReport, 'reason'>> = ({ reason })`
`25`	`25`	`>`
`26`	`26`	`{getMessage(`
`27`	`27`	`page.details.panel.discussion.warnings.reports.dialog.reason.${reason}`,
`28`		`- reason,`
	`28`	`+ reason \|\| '',`
`29`	`29`	`)}`
`30`	`30`	`</StatusBadge>`
`31`	`31`	`);`