feat(<ProjectList>): render new "empty?: React.ReactNode" prop when e…

…mpty
flsilva · Nov 17, 2023 · 386c4a9 · 386c4a9
1 parent 4a9333e
commit 386c4a9
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 13 deletions.
diff --git a/src/app/app/projects/[projectId]/page.tsx b/src/app/app/projects/[projectId]/page.tsx
@@ -17,7 +17,7 @@ export default function ProjectPage({ params: { projectId } }: ProjectPageProps)
   return (
     <>
       <ProjectPageHeader id={projectId} />
-      <Suspense fallback={<TaskListSkeleton className="max-w-[80%]" />}>
+      <Suspense fallback={<TaskListSkeleton className="mt-4 max-w-[80%]" />}>
         <NoTasksInProject id={projectId} />
         <TaskList byProject={projectId} only={TaskStatus.Incomplete} />
         <AddTask containerClassName="my-8" projectId={projectId}>

diff --git a/src/app/app/projects/active/page.tsx b/src/app/app/projects/active/page.tsx
@@ -6,11 +6,13 @@ import { ProjectsPageHeader } from '@/modules/app/projects/ProjectsPageHeader';
 import { ProjectStatus } from '@/modules/app/projects/ProjectStatus';
 
 export default function ActiveProjectsPage() {
+  const empty = <p className="text-sm font-medium text-gray-600">No active projects.</p>;
+
   return (
     <>
       <ProjectsPageHeader archived={false} />
       <Suspense fallback={<ProjectListSkeleton className="max-w-[20rem]" />}>
-        <ProjectList itemClassName="pl-2" only={ProjectStatus.Active} />
+        <ProjectList empty={empty} itemClassName="pl-2" only={ProjectStatus.Active} />
       </Suspense>
     </>
   );

diff --git a/src/app/app/projects/archived/page.tsx b/src/app/app/projects/archived/page.tsx
@@ -6,11 +6,13 @@ import { ProjectsPageHeader } from '@/modules/app/projects/ProjectsPageHeader';
 import { ProjectStatus } from '@/modules/app/projects/ProjectStatus';
 
 export default function ArchivedProjectsPage() {
+  const empty = <p className="text-sm font-medium text-gray-600">No archived projects.</p>;
+
   return (
     <>
       <ProjectsPageHeader archived={true} />
       <Suspense fallback={<ProjectListSkeleton className="max-w-[20rem]" />}>
-        <ProjectList itemClassName="pl-2" only={ProjectStatus.Archived} />
+        <ProjectList empty={empty} itemClassName="pl-2" only={ProjectStatus.Archived} />
       </Suspense>
     </>
   );

diff --git a/src/app/app/today/page.tsx b/src/app/app/today/page.tsx
@@ -13,7 +13,7 @@ export default function TodayPage() {
   return (
     <>
       <TodayPageHeader />
-      <Suspense fallback={<TaskListSkeleton className="max-w-[80%]" />}>
+      <Suspense fallback={<TaskListSkeleton className="mt-3 max-w-[80%]" />}>
         <TaskList dueBy={subDays(endOfDay(new Date()), 1)} only={TaskStatus.Incomplete}>
           {({ list: listOverdue, tasks: tasksOverdue }) => (
             <>

diff --git a/src/modules/app/projects/ProjectList.tsx b/src/modules/app/projects/ProjectList.tsx
@@ -1,3 +1,6 @@
+'use server-;';
+
+import 'server-only';
 import { twMerge } from 'tailwind-merge';
 import { ClassNamePropsOptional } from '@/modules/shared/ClassNameProps';
 import { ErrorList } from '@/modules/shared/errors/ErrorList';
@@ -8,25 +11,33 @@ import { getProjects } from './ProjectsRepository';
 interface ProjectListProps extends ClassNamePropsOptional {
   readonly activateItem?: boolean;
   readonly activeItemClassName?: string;
+  readonly empty?: React.ReactNode;
   readonly itemClassName?: string;
   readonly itemHref?: string;
-  readonly noProjectsClassName?: string;
   readonly only?: ProjectStatus;
 }
 
+/*
+ * I'm suppressing the following TypeScript error that seems to be an issue
+ * with async functions:
+ *
+ * "Type is referenced directly or indirectly in the fulfillment callback of its own 'then' method.ts(1062)""
+ */
+// @ts-ignore
 export const ProjectList = async ({
   activeItemClassName,
   className,
+  empty,
   itemClassName,
   itemHref,
-  noProjectsClassName,
   only,
 }: ProjectListProps) => {
   const { data: projects, errors } = await getProjects({
     ...(only && { isArchived: only === ProjectStatus.Archived }),
   });
 
   if (errors) return <ErrorList errors={errors} />;
+  if (!projects || projects.length === 0) return empty;
 
   return (
     <nav className={twMerge('flex flex-col w-full', className)}>
@@ -42,12 +53,6 @@ export const ProjectList = async ({
             name={name}
           />
         ))}
-      {!projects ||
-        (projects.length < 1 && (
-          <p className={twMerge('text-sm font-medium text-gray-600', noProjectsClassName)}>
-            No projects.
-          </p>
-        ))}
     </nav>
   );
 };
diff --git a/src/modules/app/shared/main-menu/MainMenu.tsx b/src/modules/app/shared/main-menu/MainMenu.tsx
@@ -8,6 +8,7 @@ import { MainMenuItem } from './MainMenuItem';
 
 export const MainMenu = () => {
   const activeClassName = 'bg-gray-200';
+  const noProjects = <p className="pl-9 pt-4 text-sm font-medium text-gray-600">No projects</p>;
 
   return (
     <nav className="flex flex-col h-full w-full lg:w-80 overflow-y-auto overflow-x-hidden bg-gray-50 px-4 py-4">
@@ -33,8 +34,8 @@ export const MainMenu = () => {
       <Suspense fallback={<ProjectListSkeleton className="mt-3 pl-9 max-w-[95%]" />}>
         <ProjectList
           activeItemClassName={activeClassName}
+          empty={noProjects}
           itemClassName="pl-9"
-          noProjectsClassName="pl-9 pt-4"
           only={ProjectStatus.Active}
         />
       </Suspense>

diff --git a/src/modules/app/tasks/TaskList.tsx b/src/modules/app/tasks/TaskList.tsx
@@ -1,3 +1,6 @@
+'use server-;';
+
+import 'server-only';
 import { twMerge } from 'tailwind-merge';
 import { ClassNamePropsOptional } from '@/modules/shared/ClassNameProps';
 import { getServerSideUser } from '@/modules/app/users/UsersRepository';