Profile page with SSG helper

MantasImb · Apr 9, 2023 · 1bad4b9 · 1bad4b9
1 parent 9e5d321
commit 1bad4b9
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 32 deletions.
diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx
@@ -1,17 +1,72 @@
-import { type NextPage } from "next";
+import type { GetStaticProps, NextPage } from "next";
 import Head from "next/head";
+import { api } from "~/utils/api";
+import Image from "next/image";
+import { PageLayout } from "~/components/Layout";
+
+const ProfilePage: NextPage<{ username: string }> = ({ username }) => {
+  const { data } = api.profile.getUserByUsername.useQuery({
+    username,
+  });
+
+  if (!data) return <div>404</div>;
 
-const ProfilePage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>Create T3 App</title>
-        <meta name="description" content="Generated by create-t3-app" />
-        <link rel="icon" href="/favicon.ico" />
+        <title>{data.username}</title>
       </Head>
-      <main className="flex h-screen justify-center">Profile View</main>
+      <PageLayout>
+        <div className="relative h-36 bg-slate-600">
+          <Image
+            src={data.profileImageUrl}
+            width={128}
+            height={128}
+            alt={`${data.username ?? ""}'s profile image`}
+            className="absolute bottom-0 left-0 -mb-16 ml-4 rounded-full border-4 border-black bg-black"
+          />
+        </div>
+        <div className="h-16" />
+        <div className="p-4 text-2xl font-bold">{`@${
+          data.username ?? ""
+        }`}</div>
+        <div className="w-full border-b border-slate-400"></div>
+      </PageLayout>
     </>
   );
 };
 
+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 slug = context.params?.slug;
+
+  // Should actually return you to a different page, but for now this is ok
+  if (typeof slug !== "string") throw new Error("No slug");
+
+  const username = slug.replace("@", "");
+
+  await ssg.profile.getUserByUsername.prefetch({ username });
+
+  return {
+    props: {
+      trpcState: ssg.dehydrate(),
+      username,
+    },
+  };
+};
+
+export const getStaticPaths = () => {
+  return { paths: [], fallback: "blocking" };
+};
+
 export default ProfilePage;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -5,10 +5,16 @@ import { api } from "~/utils/api";
 import "~/styles/globals.css";
 import { ClerkProvider } from "@clerk/nextjs";
 import { Toaster } from "react-hot-toast";
+import Head from "next/head";
 
 const MyApp: AppType = ({ Component, pageProps }) => {
   return (
     <ClerkProvider {...pageProps}>
+      <Head>
+        <title>Chirp</title>
+        <meta name="description" content="Generated by create-t3-app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
       <Toaster position="bottom-center" />
       <Component {...pageProps} />
     </ClerkProvider>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,6 +1,5 @@
 import { SignInButton, useUser } from "@clerk/nextjs";
 import { type NextPage } from "next";
-import Head from "next/head";
 import Image from "next/image";
 
 import { api } from "~/utils/api";
@@ -12,6 +11,7 @@ import { LoadingPage, LoadingSpinner } from "~/components/Loading";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import Link from "next/link";
+import { PageLayout } from "~/components/Layout";
 dayjs.extend(relativeTime);
 
 function CreatePostWizard() {
@@ -138,22 +138,17 @@ const Home: NextPage = () => {
 
   return (
     <>
-      <Head>
-        <title>Create T3 App</title>
-        <meta name="description" content="Generated by create-t3-app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className="flex h-screen justify-center">
-        <div className="w-full border-x border-slate-400 md:max-w-2xl">
-          <div className="flex border-b border-slate-400 p-4">
+      <PageLayout>
+        <div className="flex border-b border-slate-400 p-4">
+          {!isSignedIn && (
             <div className="flex justify-center">
-              {!isSignedIn && <SignInButton />}
-              {!!isSignedIn && <CreatePostWizard />}
+              <SignInButton />
             </div>
-          </div>
-          <Feed />
+          )}
+          {!!isSignedIn && <CreatePostWizard />}
         </div>
-      </main>
+        <Feed />
+      </PageLayout>
     </>
   );
 };

diff --git a/src/pages/post/[id].tsx b/src/pages/post/[id].tsx
@@ -5,9 +5,7 @@ const SinglePostPage: NextPage = () => {
   return (
     <>
       <Head>
-        <title>Create T3 App</title>
-        <meta name="description" content="Generated by create-t3-app" />
-        <link rel="icon" href="/favicon.ico" />
+        <title>Post</title>
       </Head>
       <main className="flex h-screen justify-center">Post View</main>
     </>

diff --git a/src/server/api/root.ts b/src/server/api/root.ts
@@ -1,5 +1,6 @@
 import { createTRPCRouter } from "~/server/api/trpc";
 import { postsRouter } from "./routers/posts";
+import { profileRouter } from "./routers/profile";
 
 /**
  * This is the primary router for your server.
@@ -8,6 +9,7 @@ import { postsRouter } from "./routers/posts";
  */
 export const appRouter = createTRPCRouter({
   posts: postsRouter,
+  profile: profileRouter,
 });
 
 // export type definition of API

diff --git a/src/server/api/routers/posts.ts b/src/server/api/routers/posts.ts
@@ -1,4 +1,3 @@
-import type { User } from "@clerk/nextjs/dist/api";
 import { clerkClient } from "@clerk/nextjs/server";
 import { TRPCError } from "@trpc/server";
 import * as z from "zod";
@@ -9,16 +8,9 @@ import {
   publicProcedure,
 } from "~/server/api/trpc";
 
-function filterUserForClient(user: User) {
-  return {
-    id: user.id,
-    username: user.username,
-    profileImageUrl: user.profileImageUrl,
-  };
-}
-
 import { Ratelimit } from "@upstash/ratelimit";
 import { Redis } from "@upstash/redis";
+import { filterUserForClient } from "~/server/helpers/filterUserForClient";
 
 // ratelimiter, that allows 3 requests per minute
 const ratelimit = new Ratelimit({

diff --git a/src/server/api/routers/profile.ts b/src/server/api/routers/profile.ts
@@ -0,0 +1,24 @@
+import { clerkClient } from "@clerk/nextjs/server";
+import { TRPCError } from "@trpc/server";
+import * as z from "zod";
+
+import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
+import { filterUserForClient } from "~/server/helpers/filterUserForClient";
+
+export const profileRouter = createTRPCRouter({
+  getUserByUsername: publicProcedure
+    .input(z.object({ username: z.string() }))
+    .query(async ({ input }) => {
+      const [user] = await clerkClient.users.getUserList({
+        username: [input.username],
+      });
+
+      if (!user) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+          message: "User not found",
+        });
+      }
+      return filterUserForClient(user);
+    }),
+});
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -4,4 +4,5 @@
 
 body {
   @apply bg-black text-slate-100;
+  overscroll-behavior: none;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,5 @@ @@
     body {
       @apply bg-black text-slate-100;
+      overscroll-behavior: none;
     }