refactor: project archive sort

frontend/src/component/project/ProjectList/ArchiveProjectList.tsx

@@ -1,4 +1,4 @@
-import { type FC, useEffect, useMemo, useState } from 'react';
+import { type FC, useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PageContent } from 'component/common/PageContent/PageContent';
@@ -16,7 +16,7 @@ import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { ReviveProjectDialog } from './ReviveProjectDialog/ReviveProjectDialog';
 import { DeleteProjectDialogue } from '../Project/DeleteProject/DeleteProjectDialogue';
 import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext';
-import { safeRegExp } from '@server/util/escape-regex';
+import { useProjectsSearchAndSort } from './hooks/useProjectsSearchAndSort';
 
 const StyledApiError = styled(ApiError)(({ theme }) => ({
     maxWidth: '500px',
@@ -86,14 +86,10 @@ export const ArchiveProjectList: FC = () => {
         />
     );
 
-    const filteredProjects = useMemo(
+    const filteredProjects = useProjectsSearchAndSort(
-        () =>
+        projects,
-            searchValue
+        searchValue,
-                ? projects.filter((project) =>
+        'archived',
-                      safeRegExp(searchValue, 'i').test(project.name),
-                  )
-                : projects,
-        [projects, searchValue],
     );
 
     return (

frontend/src/component/project/ProjectList/ProjectsListSort/ProjectsListSort.tsx

@@ -13,7 +13,13 @@ const StyledContainer = styled('div')(() => ({
     width: '100%',
 }));
 
-export const sortKeys = ['name', 'created', 'updated', 'seen'] as const;
+export const sortKeys = [
+    'name',
+    'created',
+    'updated',
+    'seen',
+    'archived',
+] as const;
 
 const options: Array<{
     key: (typeof sortKeys)[number];

frontend/src/component/project/ProjectList/hooks/useProjectsSearchAndSort.test.ts

@@ -250,4 +250,46 @@ describe('useProjectsSearchAndSort', () => {
             'Project A',
         ]);
     });
+
+    it('should not put favorites first if sorting by `archived`', () => {
+        const { result } = renderHook(() =>
+            useProjectsSearchAndSort(
+                [
+                    {
+                        name: 'A',
+                        id: '1',
+                        createdAt: '2024-01-01',
+                        favorite: false,
+                        archivedAt: '2024-02-03',
+                    },
+                    {
+                        name: 'B',
+                        id: '2',
+                        createdAt: '2024-01-02',
+                        archivedAt: '2024-02-01',
+                    },
+                    {
+                        name: 'C',
+                        id: '3',
+                        createdAt: '2024-01-04',
+                        archivedAt: '2024-02-02',
+                        favorite: true,
+                    },
+                ],
+                undefined,
+                'archived',
+            ),
+        );
+
+        expect(
+            result.current.map(
+                (project) =>
+                    `${project.name} - ${project.archivedAt}${project.favorite ? ' - favorite' : ''}`,
+            ),
+        ).toEqual([
+            'A - 2024-02-03',
+            'C - 2024-02-02 - favorite',
+            'B - 2024-02-01',
+        ]);
+    });
 });

frontend/src/component/project/ProjectList/hooks/useProjectsSearchAndSort.ts

@@ -39,9 +39,17 @@ export const useProjectsSearchAndSort = (
                     return bVal?.getTime() - aVal?.getTime();
                 }
 
+                if (sortBy === 'archived') {
+                    const aVal = new Date(a.archivedAt || 0);
+                    const bVal = new Date(b.archivedAt || 0);
+                    return bVal?.getTime() - aVal?.getTime();
+                }
+
                 return 0;
             })
             .sort((a, b) => {
+                if (sortBy === 'archived') return 0;
+
                 if (a?.favorite && !b?.favorite) {
                     return -1;
                 }

frontend/src/interfaces/project.ts

@@ -7,6 +7,7 @@ export interface IProjectCard {
     name: string;
     id: string;
     createdAt: string | Date;
+    archivedAt?: string | Date;
     health?: number;
     description?: string;
     featureCount?: number;