fix: when no folders

frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx

@@ -33,15 +33,20 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
         return;
       }
       try {
-        const data = await fetchFolders(context.token.access_token, projectId);
-        setFolders(data);
+        const folders: FolderType[] = await fetchFolders(context.token.access_token, projectId);
+        setFolders(folders);
 
-        const selectedFolderFromUrl = data.find((folder) => folder.id === folderId);
-        setSelectedFolder(selectedFolderFromUrl);
+        // no folder on project
+        if (folders.length === 0) {
+          return;
+        }
+
+        const selectedFolderFromUrl = folders.find((folder) => folder.id === folderId);
+        setSelectedFolder(selectedFolderFromUrl ? selectedFolderFromUrl : null);
 
         // Redirect to the smallest folder ID page if the path is "projects/[projectId]/folders
         if (pathname === `/projects/${projectId}/folders`) {
-          const smallestFolderId = Math.min(...data.map((folder) => folder.id));
+          const smallestFolderId = Math.min(...folders.map((folder) => folder.id));
           router.push(`/projects/${projectId}/folders/${smallestFolderId}/cases`, { locale: locale });
         }
       } catch (error: any) {

frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx

@@ -54,9 +54,12 @@ export default function TestCaseTable({
   });
 
   const sortedItems = useMemo(() => {
-    return [...cases].sort((a: Case, b: Case) => {
-      const first = a[sortDescriptor.column as keyof Case] as number;
-      const second = b[sortDescriptor.column as keyof Case] as number;
+    if (cases.length === 0) {
+      return [];
+    }
+    return [...cases].sort((a: CaseType, b: CaseType) => {
+      const first = a[sortDescriptor.column as keyof CaseType] as number;
+      const second = b[sortDescriptor.column as keyof CaseType] as number;
       const cmp = first < second ? -1 : first > second ? 1 : 0;
 
       return sortDescriptor.direction === 'descending' ? -cmp : cmp;
@@ -67,8 +70,8 @@ export default function TestCaseTable({
     onDeleteCase(deleteCaseId);
   };
 
-  const renderCell = useCallback((testCase: Case, columnKey: Key) => {
-    const cellValue = testCase[columnKey as keyof Case];
+  const renderCell = useCallback((testCase: CaseType, columnKey: Key) => {
+    const cellValue = testCase[columnKey as keyof CaseType];
 
     switch (columnKey) {
       case 'id':

frontend/src/app/[locale]/projects/[projectId]/folders/page.tsx

@@ -1,3 +1,13 @@
+import { useTranslations } from 'next-intl';
+
 export default function Page() {
-  return <>This is folders page.</>;
+  const t = useTranslations('Folders');
+
+  return (
+    <div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
+      <div className="w-full p-3 flex items-center justify-between">
+        <h3 className="font-bold">{t('no_folders_found')}</h3>
+      </div>
+    </div>
+  );
 }