refactor: setup grant routes stories

src/app/grants/[grantId]/grantees/[granteeId]/layout.tsx

@@ -1,4 +1,3 @@
-import { getGrantDetails } from '@/grants/data/get-grant-details';
 import { getGranteeDetails } from '@/grants/data/get-grantee-details';
 
 import { GranteePageLayout } from '@/grants/pages/grantee-page-layout';
@@ -8,14 +7,10 @@ interface Props {
   params: { grantId: string; granteeId: string };
 }
 
-const GranteePage = async ({
-  children,
-  params: { grantId, granteeId },
-}: Props) => {
+const Layout = async ({ children, params: { grantId, granteeId } }: Props) => {
   const baseHref = `/grants/${grantId}/grantees/${granteeId}/projects`;
 
-  const grant = await getGrantDetails(grantId);
-  const grantee = await getGranteeDetails(grant.data.id);
+  const grantee = await getGranteeDetails(granteeId);
 
   return (
     <GranteePageLayout baseHref={baseHref} grantee={grantee.data}>
@@ -24,4 +19,4 @@ const GranteePage = async ({
   );
 };
 
-export default GranteePage;
+export default Layout;

src/app/grants/[grantId]/grantees/[granteeId]/page.tsx

@@ -1,10 +1,22 @@
-import { GranteeProjectDefaultPage } from '@/grants/pages/grantee-project-default-page';
+import { getGranteeDetails } from '@/grants/data/get-grantee-details';
+import { getGranteeProject } from '@/grants/data/get-grantee-project';
+
+import { GranteeDefaultSection } from '@/grants/pages/grantee-default-section';
 
 interface Props {
-  params: { granteeId: string };
+  params: { grantId: string; granteeId: string };
 }
 
-const Page = ({ params: { granteeId } }: Props) => (
-  <GranteeProjectDefaultPage granteeId={granteeId} />
-);
+const Page = async ({ params: { grantId, granteeId } }: Props) => {
+  const { data: grantee } = await getGranteeDetails(granteeId);
+
+  // Default to the first project
+  const project = await getGranteeProject(grantee.id);
+  const stats = project.data.tabs[0].stats;
+
+  return (
+    <GranteeDefaultSection grantId={grantId} grantee={grantee} stats={stats} />
+  );
+};
+
 export default Page;

src/app/grants/[grantId]/grantees/[granteeId]/projects/page.tsx

@@ -1,10 +1,22 @@
-import { GranteeProjectDefaultPage } from '@/grants/pages/grantee-project-default-page';
+import { getGranteeDetails } from '@/grants/data/get-grantee-details';
+import { getGranteeProject } from '@/grants/data/get-grantee-project';
+
+import { GranteeDefaultSection } from '@/grants/pages/grantee-default-section';
 
 interface Props {
-  params: { granteeId: string };
+  params: { grantId: string; granteeId: string };
 }
 
-const Page = ({ params: { granteeId } }: Props) => (
-  <GranteeProjectDefaultPage granteeId={granteeId} />
-);
+const Page = async ({ params: { grantId, granteeId } }: Props) => {
+  const { data: grantee } = await getGranteeDetails(granteeId);
+
+  // Default to the first project
+  const project = await getGranteeProject(grantee.id);
+  const stats = project.data.tabs[0].stats;
+
+  return (
+    <GranteeDefaultSection grantId={grantId} grantee={grantee} stats={stats} />
+  );
+};
+
 export default Page;

src/app/grants/[grantId]/grantees/page.tsx

@@ -1,10 +1,23 @@
-import { GranteeDefaultPage } from '@/grants/pages/grantee-default-page';
+import { getDefaultGrantee } from '@/grants/data/get-default-grantee';
+import { getGranteeProject } from '@/grants/data/get-grantee-project';
+
+import { GranteeDefaultSection } from '@/grants/pages/grantee-default-section';
 
 interface Props {
   params: { grantId: string };
 }
 
-const Page = ({ params: { grantId } }: Props) => (
-  <GranteeDefaultPage grantId={grantId} />
-);
+const Page = async ({ params: { grantId } }: Props) => {
+  const grantee = await getDefaultGrantee(grantId);
+
+  if (!grantee) return <p>TODO: Empty Default Grantee UI</p>;
+
+  // Default to the first project
+  const project = await getGranteeProject(grantee.id);
+  const stats = project.data.tabs[0].stats;
+
+  return (
+    <GranteeDefaultSection grantId={grantId} grantee={grantee} stats={stats} />
+  );
+};
 export default Page;

src/app/grants/[grantId]/page.tsx

@@ -1,10 +1,23 @@
-import { GranteeDefaultPage } from '@/grants/pages/grantee-default-page';
+import { getDefaultGrantee } from '@/grants/data/get-default-grantee';
+import { getGranteeProject } from '@/grants/data/get-grantee-project';
+
+import { GranteeDefaultSection } from '@/grants/pages/grantee-default-section';
 
 interface Props {
   params: { grantId: string };
 }
 
-const Page = ({ params: { grantId } }: Props) => (
-  <GranteeDefaultPage grantId={grantId} />
-);
+const Page = async ({ params: { grantId } }: Props) => {
+  const grantee = await getDefaultGrantee(grantId);
+
+  if (!grantee) return <p>TODO: Empty Default Grantee UI</p>;
+
+  // Default to the first project
+  const project = await getGranteeProject(grantee.id);
+  const stats = project.data.tabs[0].stats;
+
+  return (
+    <GranteeDefaultSection grantId={grantId} grantee={grantee} stats={stats} />
+  );
+};
 export default Page;

src/grants/components/grantee-project/project-tab-selection.tsx

@@ -21,7 +21,7 @@ export const ProjectTabSelection = ({ defaultId, baseHref }: Props) => {
   const { data } = useGranteeProject(projectId);
   if (!data) return <Skeleton className={cn(SHARED_CLASSNAME, 'h-14')} />;
 
-  const activeTab = params.tab;
+  const activeTab = params.tab || data.data.tabs[0].tab;
   if (!activeTab) return null;
 
   const tabs = data.data.tabs.map((t) => ({

src/grants/data/get-default-grantee.ts

@@ -0,0 +1,16 @@
+import { getGrantDetails } from '@/grants/data/get-grant-details';
+import { getGranteeDetails } from '@/grants/data/get-grantee-details';
+import { getGranteesList } from '@/grants/data/get-grantees-list';
+
+export const getDefaultGrantee = async (grantId: string) => {
+  const { data: grant } = await getGrantDetails(grantId);
+  const { data: grantees } = await getGranteesList({
+    page: 1,
+    grantId: grant.id,
+  });
+
+  if (grantees.length === 0) return null;
+  const { data: firstGrantee } = await getGranteeDetails(grantees[0].id);
+
+  return firstGrantee;
+};

src/grants/pages/grantee-default-section.tsx

@@ -0,0 +1,30 @@
+import { Grantee, GranteeProjectStat } from '@/grants/core/schemas';
+import { GranteeProjectStats } from '@/grants/components/grantee-project/project-stats';
+
+import { GranteePageLayout } from '@/grants/pages/grantee-page-layout';
+
+interface Props {
+  grantId: string;
+  grantee: Grantee;
+  stats: GranteeProjectStat[];
+}
+
+/**
+ * Display first grantee details by default for the following routes:
+ * - /grants/:grantId
+ * - /grants/:grantId/grantees
+ * - /grants/:grantId/grantees/:granteeId
+ * - /grants/:grantId/grantees/:granteeId/projects
+ * */
+export const GranteeDefaultSection = ({ grantId, grantee, stats }: Props) => {
+  // TODO: JOB-683
+  // TODO: JOB-684
+
+  const baseHref = `/grants/${grantId}/grantees/${grantee.id}/projects`;
+
+  return (
+    <GranteePageLayout baseHref={baseHref} grantee={grantee}>
+      <GranteeProjectStats stats={stats} />
+    </GranteePageLayout>
+  );
+};

src/grants/pages/grantee-page-layout.tsx

@@ -6,22 +6,20 @@ import { ProjectTabSelection } from '@/grants/components/grantee-project/project
 interface Props {
   baseHref: string;
   grantee: Grantee;
+  // TODO: Project
   children: React.ReactNode;
 }
 
 export const GranteePageLayout = ({ baseHref, grantee, children }: Props) => {
   const projects = grantee.projects;
-  const hasProject = projects.length > 0;
 
   return (
     <div className="flex w-max flex-col gap-4 lg:grow">
       <GranteeCard grantee={grantee} />
 
       <ProjectSelections baseHref={baseHref} projects={projects} />
 
-      {hasProject && (
-        <ProjectTabSelection defaultId={projects[0]} baseHref={baseHref} />
-      )}
+      <ProjectTabSelection defaultId={projects[0]} baseHref={baseHref} />
 
       {children}
     </div>

src/grants/pages/route-stories/[grantId].stories.tsx

@@ -1,35 +1,50 @@
 import { Meta, StoryObj } from '@storybook/react';
 
+import { faker } from '@faker-js/faker';
+
 import { NavLayout } from '@/shared/components/nav-space-layout';
 
-import { MockInfiniteQueryResult } from '@/shared/testutils/misc';
+import {
+  MockInfiniteQueryResult,
+  MockQueryResult,
+} from '@/shared/testutils/misc';
 
 import { GranteeList } from '@/grants/components/grantee-list';
 
 import { fakeGrant } from '@/grants/testutils/fake-grant';
 import { fakeGrantee, fakeGrantees } from '@/grants/testutils/fake-grantee';
+import { fakeGranteeProject } from '@/grants/testutils/fake-grantee-project';
 import { mockGranteeListQuery } from '@/grants/testutils/mock-grantee-list-query';
+import { mockGranteeProjectQuery } from '@/grants/testutils/mock-grantee-project-query';
 
 import { GrantPageLayout } from '@/grants/pages/grant-page-layout';
-import { GranteeDefaultPage } from '@/grants/pages/grantee-default-page';
+import { GranteeDefaultSection } from '@/grants/pages/grantee-default-section';
+
+faker.seed(69);
 
 const grantProgram = fakeGrant();
 const grantee = fakeGrantee();
 const grantees = [grantee, ...fakeGrantees().slice(1)];
+const granteeProject = fakeGranteeProject({ id: grantee.projects[0] });
 
-const Component = () => {
-  return (
-    <NavLayout>
-      <GrantPageLayout grant={grantProgram} list={<GranteeList />}>
-        <GranteeDefaultPage grantId={grantProgram.id} />
-      </GrantPageLayout>
-    </NavLayout>
-  );
+const Component = ({ content }: { content: React.ReactNode }) => {
+  return <NavLayout>{content}</NavLayout>;
 };
 
 const meta: Meta<typeof Component> = {
   title: 'grants/routes/[grantId]',
   component: Component,
+  args: {
+    content: (
+      <GrantPageLayout grant={grantProgram} list={<GranteeList />}>
+        <GranteeDefaultSection
+          grantId={grantProgram.id}
+          grantee={grantee}
+          stats={granteeProject.tabs[0].stats}
+        />
+      </GrantPageLayout>
+    ),
+  },
   parameters: {
     nextjs: {
       navigation: {
@@ -42,6 +57,9 @@ const meta: Meta<typeof Component> = {
         mockGranteeListQuery(MockInfiniteQueryResult.SUCCESS, {
           data: grantees,
         }),
+        mockGranteeProjectQuery(MockQueryResult.SUCCESS, {
+          data: granteeProject,
+        }),
       ],
     },
   },
@@ -50,4 +68,4 @@ const meta: Meta<typeof Component> = {
 export default meta;
 type Story = StoryObj<typeof Component>;
 
-export const Default: Story = {};
+export const Success: Story = {};

src/grants/testutils/fake-grant.ts

@@ -6,7 +6,7 @@ import { fakeNullable } from '@/shared/testutils/fake-nullable';
 
 import { Grant } from '@/grants/core/schemas';
 
-export const fakeGrant = (): Grant => ({
+export const fakeGrant = (partial: Partial<Grant> = {}): Grant => ({
   id: faker.string.uuid(),
   name: faker.company.name(),
   networks: Array.from({ length: faker.number.int({ min: 0, max: 4 }) }).map(
@@ -38,4 +38,5 @@ export const fakeGrant = (): Grant => ({
     `https://discord.com/${faker.internet.userName().toLocaleLowerCase()}`,
   ),
   granteesCount: faker.number.int({ min: 1, max: 100 }),
+  ...partial,
 });

src/grants/testutils/fake-grantee.ts

@@ -4,7 +4,7 @@ import { fakeNullable } from '@/shared/testutils/fake-nullable';
 
 import { Grantee } from '@/grants/core/schemas';
 
-export const fakeGrantee = (): Grantee => ({
+export const fakeGrantee = (partial: Partial<Grantee> = {}): Grantee => ({
   id: faker.string.uuid(),
   name: faker.company.name(),
   logo: fakeNullable(faker.image.url()),
@@ -18,6 +18,7 @@ export const fakeGrantee = (): Grantee => ({
   projects: Array.from({ length: faker.number.int({ min: 1, max: 3 }) }).map(
     () => faker.internet.domainWord(),
   ),
+  ...partial,
 });
 
 export const fakeGrantees = ({

src/grants/testutils/mock-grant-list-query.ts

@@ -1,5 +1,5 @@
 import { MockInfiniteQueryResult, MswOptions } from '@/shared/testutils/misc';
-import { mockInfiniteListQuery } from '@/shared/testutils/mockIfniniteListQuery';
+import { mockInfiniteListQuery } from '@/shared/testutils/mock-infinite-list-query';
 
 import { GRANT_QUERY_URLS } from '@/grants/core/constants';