Check user auth in api request

frontend/src/app/[locale]/projects/ProjectsPage.tsx

@@ -20,8 +20,11 @@ export default function ProjectsPage({ messages, locale }: Props) {
 
   useEffect(() => {
     async function fetchDataEffect() {
+      if (!context.isSignedIn()) {
+        return;
+      }
       try {
-        const data = await fetchProjects();
+        const data = await fetchProjects(context.token.access_token);
         setProjects(data);
       } catch (error: any) {
         console.error('Error in effect:', error.message);
@@ -29,14 +32,14 @@ export default function ProjectsPage({ messages, locale }: Props) {
     }
 
     fetchDataEffect();
-  }, []);
+  }, [context]);
 
   // dialog
   const [isNeedSignedInDialogOpen, setIsNeedSignedInDialogOpen] = useState(false);
   const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
   const [editingProject, setEditingProject] = useState<ProjectType | null>(null);
   const openDialogForCreate = () => {
-    if (!context.token || !context.token.user) {
+    if (!context.isSignedIn()) {
       setIsNeedSignedInDialogOpen(true);
       return;
     }

frontend/src/app/[locale]/projects/ProjectsTable.tsx

@@ -7,6 +7,7 @@ import {
   TableRow,
   TableCell,
   Button,
+  Chip,
   DropdownTrigger,
   Dropdown,
   DropdownMenu,
@@ -29,8 +30,8 @@ type Props = {
 export default function ProjectsTable({ projects, onEditProject, onDeleteProject, messages, locale }: Props) {
   const headerColumns = [
     { name: messages.id, uid: 'id', sortable: true },
+    { name: messages.publicity, uid: 'isPublic', sortable: true },
     { name: messages.name, uid: 'name', sortable: true },
-    { name: messages.detail, uid: 'detail', sortable: true },
     { name: messages.lastUpdate, uid: 'updatedAt', sortable: true },
     { name: messages.actions, uid: 'actions' },
   ];
@@ -60,18 +61,19 @@ export default function ProjectsTable({ projects, onEditProject, onDeleteProject
     switch (columnKey) {
       case 'id':
         return <span>{cellValue}</span>;
+      case 'isPublic':
+        return cellValue ? <Chip size="sm">{messages.public}</Chip> : <></>;
       case 'name':
+        const maxLength = 30;
+        const truncatedDetail = truncateText(project.detail, maxLength);
         return (
-          <Link href={`/projects/${project.id}/home`} locale={locale} className={NextUiLinkClasses}>
-            {cellValue}
-          </Link>
-        );
-      case 'detail':
-        const maxLength = 20;
-        const truncatedValue = truncateText(cellValue, maxLength);
-        return (
-          <div className="flex items-center space-x-2">
-            <div>{truncatedValue}</div>
+          <div>
+            <Link href={`/projects/${project.id}/home`} locale={locale} className={NextUiLinkClasses}>
+              {cellValue}
+            </Link>
+            <div className="text-xs text-default-500">
+              <div>{truncatedDetail}</div>
+            </div>
           </div>
         );
       case 'updatedAt':

frontend/src/app/[locale]/projects/[projectId]/runs/RunsTable.tsx

@@ -30,7 +30,6 @@ export default function RunsTable({ projectId, runs, onDeleteRun, messages, loca
   const headerColumns = [
     { name: messages.id, uid: 'id', sortable: true },
     { name: messages.name, uid: 'name', sortable: true },
-    { name: messages.description, uid: 'description', sortable: true },
     { name: messages.lastUpdate, uid: 'updatedAt', sortable: true },
     { name: messages.actions, uid: 'actions' },
   ];
@@ -61,17 +60,16 @@ export default function RunsTable({ projectId, runs, onDeleteRun, messages, loca
       case 'id':
         return <span>{cellValue}</span>;
       case 'name':
+        const maxLength = 30;
+        const truncatedDescription = truncateText(run.description, maxLength);
         return (
-          <Link href={`/projects/${projectId}/runs/${run.id}`} locale={locale} className={NextUiLinkClasses}>
-            {cellValue}
-          </Link>
-        );
-      case 'detail':
-        const maxLength = 20;
-        const truncatedValue = truncateText(cellValue, maxLength);
-        return (
-          <div className="flex items-center space-x-2">
-            <div>{truncatedValue}</div>
+          <div>
+            <Link href={`/projects/${projectId}/runs/${run.id}`} locale={locale} className={NextUiLinkClasses}>
+              {cellValue}
+            </Link>
+            <div className="text-xs text-default-500">
+              <div>{truncatedDescription}</div>
+            </div>
           </div>
         );
       case 'updatedAt':

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

@@ -10,6 +10,7 @@ export default function Page(params: { locale: string }) {
     editProject: t('edit_project'),
     deleteProject: t('delete_project'),
     id: t('id'),
+    publicity: t('publicity'),
     name: t('name'),
     detail: t('detail'),
     lastUpdate: t('last_update'),

frontend/src/app/[locale]/projects/projectsControl.ts

@@ -4,7 +4,7 @@ const apiServer = Config.apiServer;
 /**
  * fetch project records
  */
-async function fetchProjects() {
+async function fetchProjects(jwt: string) {
   const url = `${apiServer}/projects`;
 
   try {
@@ -12,6 +12,7 @@ async function fetchProjects() {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
+        Authorization: jwt,
       },
     });