SinglePostPage complete

MantasImb · Apr 9, 2023 · 5a4cc34 · 5a4cc34 · vercel · Apr 9, 2023
1 parent 5652daa
commit 5a4cc34
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 14 deletions.
diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx
@@ -5,6 +5,7 @@ import Image from "next/image";
 import { PageLayout } from "~/components/Layout";
 import { LoadingPage } from "~/components/Loading";
 import { PostView } from "~/components/PostView";
+import { generateSSGHelper } from "~/server/helpers/ssgHelper";
 
 const ProfileFeed = (props: { userId: string }) => {
   const { data, isLoading } = api.posts.getPostsByUserId.useQuery({
@@ -57,17 +58,8 @@ const ProfilePage: NextPage<{ username: string }> = ({ username }) => {
   );
 };
 
-import { createProxySSGHelpers } from "@trpc/react-query/ssg";
-import { appRouter } from "~/server/api/root";
-import { prisma } from "~/server/db";
-import superjson from "superjson";
-
 export const getStaticProps: GetStaticProps = async (context) => {
-  const ssg = createProxySSGHelpers({
-    router: appRouter,
-    ctx: { prisma, userId: null },
-    transformer: superjson,
-  });
+  const ssg = generateSSGHelper();
 
   const slug = context.params?.slug;
 

diff --git a/src/pages/post/[id].tsx b/src/pages/post/[id].tsx
@@ -1,15 +1,47 @@
-import { type NextPage } from "next";
+import type { GetStaticProps, NextPage } from "next";
 import Head from "next/head";
+import { api } from "~/utils/api";
+import { PageLayout } from "~/components/Layout";
+import { PostView } from "~/components/PostView";
+import { generateSSGHelper } from "~/server/helpers/ssgHelper";
+
+const SinglePostPage: NextPage<{ id: string }> = ({ id }) => {
+  const { data } = api.posts.getById.useQuery(id);
+
+  if (!data) return <div>404</div>;
 
-const SinglePostPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>Post</title>
+        <title>{`${data.post.content} - ${data.author.username}`}</title>
       </Head>
-      <main className="flex h-screen justify-center">Post View</main>
+      <PageLayout>
+        <PostView {...data} />
+      </PageLayout>
     </>
   );
 };
 
+export const getStaticProps: GetStaticProps = async (context) => {
+  const ssg = generateSSGHelper();
+
+  const id = context.params?.id;
+
+  // Should actually return you to a different page, but for now this is ok
+  if (typeof id !== "string") throw new Error("No id");
+
+  await ssg.posts.getById.prefetch(id);
+
+  return {
+    props: {
+      trpcState: ssg.dehydrate(),
+      id,
+    },
+  };
+};
+
+export const getStaticPaths = () => {
+  return { paths: [], fallback: "blocking" };
+};
+
 export default SinglePostPage;
diff --git a/src/server/api/routers/posts.ts b/src/server/api/routers/posts.ts
@@ -48,6 +48,21 @@ const ratelimit = new Ratelimit({
 });
 
 export const postsRouter = createTRPCRouter({
+  getById: publicProcedure.input(z.string()).query(async ({ ctx, input }) => {
+    const post = await ctx.prisma.post.findUnique({
+      where: {
+        id: input,
+      },
+    });
+    if (!post) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "Post not found",
+      });
+    }
+    return (await addUserDataToPosts([post]))[0];
+  }),
+
   getAll: publicProcedure.query(({ ctx }) =>
     ctx.prisma.post
       .findMany({

diff --git a/src/server/helpers/ssgHelper.ts b/src/server/helpers/ssgHelper.ts
@@ -0,0 +1,12 @@
+import { createProxySSGHelpers } from "@trpc/react-query/ssg";
+import { appRouter } from "~/server/api/root";
+import { prisma } from "~/server/db";
+import superjson from "superjson";
+
+export function generateSSGHelper() {
+  return createProxySSGHelpers({
+    router: appRouter,
+    ctx: { prisma, userId: null },
+    transformer: superjson,
+  });
+}