Skip to content

Commit

Permalink
refactor: container and router clean up (#115)
Browse files Browse the repository at this point in the history
- Reorganizes trpc router. 
- Creates trpc routes specific for each container. 
- Collocates mocks with containers
- moves some href generation to trpc. Generally we want to keep all this
kind of logic outside of containers
- Some stories are broken. WIP ;)
  • Loading branch information
PupoSDC authored Jan 29, 2024
1 parent 36fd908 commit 73db598
Show file tree
Hide file tree
Showing 137 changed files with 7,549 additions and 8,493 deletions.
4 changes: 2 additions & 2 deletions apps/next-app/pages/analytics/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { trpc } from "@chair-flight/trpc/client";
import { staticHandler } from "@chair-flight/trpc/server";
import type { NextPage } from "next";

const useVisitsPerDay = trpc.analytics.visitsPerDay.useSuspenseQuery;
const useVisitsPerDay = trpc.common.analytics.visitsPerDay.useSuspenseQuery;

const AnalyticsPage: NextPage = () => {
const [{ views, paths }] = useVisitsPerDay();
Expand All @@ -31,7 +31,7 @@ const AnalyticsPage: NextPage = () => {
};

export const getStaticProps = staticHandler(async ({ helper }) => {
await helper.analytics.visitsPerDay.prefetch();
await helper.common.analytics.visitsPerDay.prefetch();
return { props: {}, revalidate: 60 * 15 };
}, fs);

Expand Down
20 changes: 15 additions & 5 deletions apps/next-app/pages/blog/[postId].page.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,32 @@
import * as fs from "node:fs/promises";
import { BackgroundFadedImage } from "@chair-flight/react/components";
import { AppHead, BackgroundFadedImage } from "@chair-flight/react/components";
import { BlogPost, LayoutPublic } from "@chair-flight/react/containers";
import { trpc } from "@chair-flight/trpc/client";
import { staticHandler, staticPathsHandler } from "@chair-flight/trpc/server";
import type { NextPage } from "next";

type PageParams = { postId: string };
type PageProps = PageParams;

export const Page: NextPage<PageProps> = (props) => {
export const Page: NextPage<PageProps> = ({ postId }) => {
const postMeta = trpc.pageGeneration.blog.getBlogPostMeta;
const [{ meta }] = postMeta.useSuspenseQuery({ postId });
return (
<LayoutPublic background={<BackgroundFadedImage img="article" />}>
<BlogPost {...props} />
<AppHead
title={meta.title}
linkTitle={meta.title}
linkDescription={meta.description}
/>
<BlogPost postId={postId} />
</LayoutPublic>
);
};

export const getStaticProps = staticHandler<PageProps, PageParams>(
async ({ params, helper }) => {
const postId = params.postId;
await helper.pageGeneration.blog.getBlogPostMeta.fetch({ postId });
await BlogPost.getData({ helper, params });
await LayoutPublic.getData({ helper, params });
return { props: params };
Expand All @@ -26,8 +36,8 @@ export const getStaticProps = staticHandler<PageProps, PageParams>(

export const getStaticPaths = staticPathsHandler<PageParams>(
async ({ helper }) => {
const { meta } = await helper.blog.getBlogPostsMeta.fetch();
const paths = meta.map((meta) => ({ params: { postId: meta.filename } }));
const getPaths = helper.pageGeneration.blog.getBlogPostGenerationPaths;
const paths = await getPaths.fetch();
return { fallback: false, paths };
},
fs,
Expand Down
70 changes: 9 additions & 61 deletions apps/next-app/pages/blog/index.page.tsx
Original file line number Diff line number Diff line change
@@ -1,73 +1,21 @@
import * as fs from "node:fs/promises";
import { type FunctionComponent } from "react";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import {
Card,
CardContent,
Link,
Typography,
CardActions,
Button,
Box,
} from "@mui/joy";
import { DateTime } from "luxon";
import { default as dedent } from "ts-dedent";
import {
AppHead,
BackgroundFadedImage,
BlogPostChip,
} from "@chair-flight/react/components";
import { LayoutPublic } from "@chair-flight/react/containers";
import { AppHead, BackgroundFadedImage } from "@chair-flight/react/components";
import { BlogIndex, LayoutPublic } from "@chair-flight/react/containers";
import { staticHandler } from "@chair-flight/trpc/server";
import type { AppRouterOutput } from "@chair-flight/trpc/server";
import type { NextPage } from "next";

export type PageProps = AppRouterOutput["blog"]["getBlogPostsMeta"];

const Page: FunctionComponent<PageProps> = ({ meta }) => {
const Page: NextPage = () => {
return (
<LayoutPublic background={<BackgroundFadedImage img="article" />}>
<AppHead linkDescription={dedent``} />
<Typography level="h2" sx={{ pt: 4 }}>
Posts
</Typography>
{meta.map((post) => (
<Card sx={{ mt: 2 }} key={post.filename}>
<CardContent>
<Box sx={{ mb: 2 }}>
<BlogPostChip key={post.tag} tag={post.tag} size="sm" />
</Box>
<Typography level="h3" color="primary">
{post.title}
</Typography>
<Typography level="body-sm">{post.description}</Typography>
</CardContent>
<CardActions>
<Box>
<Typography level="body-sm">{post.author}</Typography>
<Typography level="body-xs">
{DateTime.fromISO(post.date).toFormat("dd LLL yyyy")}
</Typography>
</Box>
<Button
color="primary"
variant="plain"
component={Link}
href={`/articles/blog/${post.filename}`}
children="Read&nbsp;More"
endDecorator={<KeyboardArrowRightIcon />}
sx={{ flex: 0, ml: "auto" }}
/>
</CardActions>
</Card>
))}
<Box component="footer" sx={{ py: 2 }} />
<AppHead />
<BlogIndex />
</LayoutPublic>
);
};

export const getStaticProps = staticHandler<PageProps>(async ({ helper }) => {
const props = await helper.blog.getBlogPostsMeta.fetch();
return { props };
export const getStaticProps = staticHandler(async ({ helper }) => {
await BlogIndex.getData({ params: {}, helper });
return { props: {} };
}, fs);

export default Page;
17 changes: 10 additions & 7 deletions apps/next-app/pages/modules/[questionBank]/annexes/index.page.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as fs from "node:fs/promises";
import { AppHead } from "@chair-flight/react/components";
import { LayoutModule, AnnexSearch } from "@chair-flight/react/containers";
import { staticHandler } from "@chair-flight/trpc/server";
import { staticHandler, staticPathsHandler } from "@chair-flight/trpc/server";
import type { QuestionBankName } from "@chair-flight/base/types";
import type { Breadcrumbs } from "@chair-flight/react/containers";
import type { GetStaticPaths, NextPage } from "next";
import type { NextPage } from "next";

type PageProps = {
questionBank: QuestionBankName;
Expand Down Expand Up @@ -37,10 +37,13 @@ export const getStaticProps = staticHandler<PageProps, PageParams>(
fs,
);

export const getStaticPaths: GetStaticPaths<PageParams> = async () => {
const banks: QuestionBankName[] = ["type", "atpl"];
const paths = banks.map((questionBank) => ({ params: { questionBank } }));
return { fallback: false, paths };
};
export const getStaticPaths = staticPathsHandler<PageParams>(
async ({ helper }) => {
const getPaths = helper.pageGeneration.modules.getIndexGenerationPaths;
const paths = await getPaths.fetch({ resource: "annexes" });
return { fallback: false, paths };
},
fs,
);

export default Page;
63 changes: 25 additions & 38 deletions apps/next-app/pages/modules/[questionBank]/docs/[docId].page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,39 +20,26 @@ import {
LearningObjectiveQuestions,
LearningObjectiveTree,
} from "@chair-flight/react/containers";
import { trpc } from "@chair-flight/trpc/client";
import { staticHandler, staticPathsHandler } from "@chair-flight/trpc/server";
import type {
LearningObjectiveId,
QuestionBankName,
} from "@chair-flight/base/types";
import type { QuestionBankName } from "@chair-flight/base/types";
import type { Breadcrumbs } from "@chair-flight/react/containers";
import type { NextPage } from "next";

type PageProps = {
docId: string;
questionBank: QuestionBankName;
learningObjectiveId: LearningObjectiveId;
title: string;
description: string;
parent: null | {
title: string;
href: string;
};
};

type PageParams = {
docId: string;
questionBank: QuestionBankName;
};

export const Page: NextPage<PageProps> = ({
docId,
questionBank,
learningObjectiveId,
title,
description,
parent,
}) => {
const useDoc = trpc.containers.docs.getDoc.useSuspenseQuery;

export const Page: NextPage<PageProps> = ({ docId, questionBank }) => {
const [{ doc }] = useDoc({ docId, questionBank });
const theme = useTheme();
const loDrawer = useDisclose(false);
const questionDrawer = useDisclose(false);
Expand All @@ -65,20 +52,26 @@ export const Page: NextPage<PageProps> = ({

return (
<LayoutModule questionBank={questionBank} breadcrumbs={crumbs}>
<AppHead title={title} linkTitle={title} linkDescription={description} />
<AppHead
title={doc.title}
linkTitle={doc.title}
linkDescription={doc.description}
/>
<Stack
sx={{
width: "100%",
maxWidth: "md",
margin: "auto",
}}
>
{parent && <Link href={parent.href} children={parent.title} />}
{doc.parent && (
<Link href={doc.parent.href} children={doc.parent.title} />
)}
<Typography
level="h3"
component="h1"
sx={{ fontWeight: "bold" }}
children={title}
children={doc.title}
/>

<Divider sx={{ width: "100%", mb: 1 }} />
Expand Down Expand Up @@ -112,7 +105,7 @@ export const Page: NextPage<PageProps> = ({
</Typography>
<LearningObjectiveTree
questionBank={questionBank}
learningObjectiveId={learningObjectiveId}
learningObjectiveId={doc.learningObjective}
forceMode="mobile"
sx={{
flex: 1,
Expand All @@ -134,7 +127,7 @@ export const Page: NextPage<PageProps> = ({
</Typography>
<LearningObjectiveQuestions
questionBank={questionBank}
learningObjectiveId={learningObjectiveId}
learningObjectiveId={doc.learningObjective}
forceMode="mobile"
sx={{
flex: 1,
Expand All @@ -149,28 +142,22 @@ export const Page: NextPage<PageProps> = ({
};

export const getStaticProps = staticHandler<PageProps, PageParams>(
async ({ params, helper }) => {
const { doc } = await helper.questionBankDocs.getDoc.fetch(params);
const props = {
...params,
learningObjectiveId: doc.learningObjective,
title: doc.title,
description: doc.description,
parent: doc.parent,
};

async ({ params: rawParams, helper }) => {
const data = await helper.containers.docs.getDoc.fetch(rawParams);
const learningObjectiveId = data.doc.learningObjective;
const params = { ...rawParams, learningObjectiveId };
await LayoutModule.getData({ helper, params });
await DocContent.getData({ helper, params });
await LearningObjectiveTree.getData({ helper, params: props });
return { props };
await LearningObjectiveTree.getData({ helper, params });
return { props: params };
},
fs,
);

export const getStaticPaths = staticPathsHandler<PageParams>(
async ({ helper }) => {
const qbDocs = helper.questionBankDocs;
const { paths } = await qbDocs.getAllDocPaths.fetch();
const pageGeneration = helper.pageGeneration.modules;
const { paths } = await pageGeneration.getDocGenerationPaths.fetch();
return { fallback: false, paths };
},
fs,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,13 @@ const Page: NextPage<PageProps> = ({ questionBank, collectionId }) => {
] as Breadcrumbs;

return (
<LayoutModule noPadding questionBank={questionBank} breadcrumbs={crumbs}>
<LayoutModule questionBank={questionBank} breadcrumbs={crumbs}>
<AppHead />
<FlashcardList questionBank={questionBank} collectionId={collectionId} />
<FlashcardList
sx={{ maxWidth: "lg", width: "100%", margin: "auto" }}
questionBank={questionBank}
collectionId={collectionId}
/>
</LayoutModule>
);
};
Expand All @@ -42,21 +46,9 @@ export const getStaticProps = staticHandler<PageProps, PageParams>(

export const getStaticPaths = staticPathsHandler<PageParams>(
async ({ helper }) => {
const qb = helper.questionBank;
const banks: QuestionBankName[] = ["prep"];
const paths = await Promise.all(
banks.map(async (questionBank) => {
const params = { questionBank };
const data = await qb.getFlashcardsCollections.fetch(params);
return data.collections.map(({ id: collectionId }) => ({
params: {
questionBank,
collectionId,
},
}));
}),
).then((c) => c.flat());

const modules = helper.pageGeneration.modules;
const getPaths = modules.getFlashcardsGenerationPaths;
const { paths } = await getPaths.fetch();
return { fallback: false, paths };
},
fs,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const Page: NextPage<PageProps> = ({ questionBank }) => {
] as Breadcrumbs;

return (
<LayoutModule noPadding questionBank={questionBank} breadcrumbs={crumbs}>
<LayoutModule questionBank={questionBank} breadcrumbs={crumbs}>
<AppHead
title="Chair Flight - Flash Cards"
linkTitle="Chair Flight - Flash Cards"
Expand All @@ -39,7 +39,7 @@ const Page: NextPage<PageProps> = ({ questionBank }) => {
"are close enough.",
].join(" ")}
/>
<Box component="section" maxWidth="lg" margin="auto" p={2}>
<Box component="section" maxWidth="lg" margin="auto">
<Typography level="h1">Flash Cards</Typography>
<Typography>
Practice for open-ended interview questions.
Expand All @@ -55,8 +55,8 @@ const Page: NextPage<PageProps> = ({ questionBank }) => {
<Typography level="h3" sx={{ mt: 3, color: "primary.500" }}>
Have fun!
</Typography>
<FlashcardCollectionList sx={{ mt: 2 }} questionBank={questionBank} />
</Box>
<FlashcardCollectionList questionBank={questionBank} />
</LayoutModule>
);
};
Expand Down
Loading

1 comment on commit 73db598

@vercel
Copy link

@vercel vercel bot commented on 73db598 Jan 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.