From 10c82652bc1d68b0aca45a4eafd2cd9aef26723c Mon Sep 17 00:00:00 2001
From: horsefacts <webmaster@terminally.online>
Date: Thu, 25 Jan 2024 17:42:39 -0500
Subject: [PATCH] feat: simple profile component

---
 web/src/app/api/auth/[...nextauth]/route.ts | 26 ++++++++++-----------
 web/src/app/page.tsx                        | 22 +++++++++++------
 web/src/components/avatar/Avatar.tsx        |  4 ++--
 web/src/components/feed/FeedPage.tsx        |  5 ++++
 web/src/components/profile/Profile.tsx      | 22 +++++++++++++++++
 5 files changed, 57 insertions(+), 22 deletions(-)
 create mode 100644 web/src/components/profile/Profile.tsx

diff --git a/web/src/app/api/auth/[...nextauth]/route.ts b/web/src/app/api/auth/[...nextauth]/route.ts
index b376518..7eb9725 100644
--- a/web/src/app/api/auth/[...nextauth]/route.ts
+++ b/web/src/app/api/auth/[...nextauth]/route.ts
@@ -2,7 +2,9 @@ import { createAppClient, viemConnector } from "@farcaster/auth-client";
 import NextAuth from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
 
-const auth = NextAuth({
+import { getProfile } from '../../../../lib/services/user';
+
+export const authOptions = {
   providers: [
     CredentialsProvider({
       name: "Sign in with Farcaster",
@@ -20,15 +22,6 @@ const auth = NextAuth({
         csrfToken: {
           type: "text",
         },
-        // In a production app with a server, these should be fetched from
-        // your Farcaster data indexer rather than have them accepted as part
-        // of credentials.
-        name: {
-          type: "text",
-        },
-        pfp: {
-          type: "text",
-        },
       },
       async authorize(credentials) {
         const appClient = createAppClient({
@@ -50,13 +43,20 @@ const auth = NextAuth({
 
         return {
           id: fid.toString(),
-          name: credentials?.name,
-          image: credentials?.pfp,
         };
       },
     }),
   ],
-});
+  callbacks: {
+    async session({ session, token }) {
+      const profile = await getProfile({ fid: token.sub });
+      session.user = profile;
+      return session;
+    },
+  },
+};
+
+const auth = NextAuth(authOptions);
 
 export const GET = auth;
 export const POST = auth;
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index ad6e192..f64c30c 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,13 +1,21 @@
-// import { getServerSession } from 'next-auth';
+import { FeedPage } from '@components/feed/FeedPage';
+import { LandingPage } from '@components/landing/LandingPage';
+import { getServerSession } from 'next-auth';
 
-import { FeedPage } from "@components/feed/FeedPage";
-import { LandingPage } from "@components/landing/LandingPage";
+import { authOptions } from './api/auth/[...nextauth]/route';
 
 export default async function Home() {
-  // const session = await getServerSession();
-  // if (session) {
-  return <FeedPage fid="145" />;
-  // }
+  const {
+    user: { fid },
+  } = await getServerSession(authOptions);
+
+  if (fid) {
+    return (
+      <div>
+        <FeedPage fid={fid} />
+      </div>
+    );
+  }
 
   return <LandingPage />;
 }
diff --git a/web/src/components/avatar/Avatar.tsx b/web/src/components/avatar/Avatar.tsx
index 6a56fae..3266373 100644
--- a/web/src/components/avatar/Avatar.tsx
+++ b/web/src/components/avatar/Avatar.tsx
@@ -3,14 +3,14 @@
 import { User } from '@shared/types/models';
 import { useState } from 'react';
 
-const pfpDiameter = 46;
 const fallbackUrl = '/default-avatar.png';
 
 type AvatarProps = {
   user: User;
+  pfpDiameter?: number;
 };
 
-export function Avatar({ user }: AvatarProps) {
+export function Avatar({ user, pfpDiameter = 46 }: AvatarProps) {
   const [src, setSrc] = useState(user.pfp_url || fallbackUrl);
 
   return (
diff --git a/web/src/components/feed/FeedPage.tsx b/web/src/components/feed/FeedPage.tsx
index 2dbd130..3c5b5e6 100644
--- a/web/src/components/feed/FeedPage.tsx
+++ b/web/src/components/feed/FeedPage.tsx
@@ -1,15 +1,20 @@
 import { Cast } from "@components/feed/Cast";
+import { Profile } from '@components/profile/Profile';
 import { getFeed } from "@lib/services/feed";
 
+import { getProfile } from '../../lib/services/user';
+
 type FeedPageProps = {
   fid: string;
 };
 
 export async function FeedPage({ fid }: FeedPageProps) {
   const feed = await getFeed({ fid });
+  const user = await getProfile({ fid });
 
   return (
     <div className="container m-auto max-w-[660px] border-x border-gray-200">
+      <Profile user={user} />
       {feed.map((cast) => (
         <Cast key={cast.hash} cast={cast} />
       ))}
diff --git a/web/src/components/profile/Profile.tsx b/web/src/components/profile/Profile.tsx
new file mode 100644
index 0000000..9dd523f
--- /dev/null
+++ b/web/src/components/profile/Profile.tsx
@@ -0,0 +1,22 @@
+import { User } from '@shared/types/models';
+
+import { Avatar } from '../avatar/Avatar';
+
+type ProfileProps = {
+  user: User;
+};
+
+export function Profile({ user }: ProfileProps) {
+  return (
+    <div className="flex flex-col p-4">
+      <div className="flex flex-row place-items-center">
+        <Avatar user={user} pfpDiameter={72} />
+        <div className="flex flex-col ml-4 text-l">
+          <span className="font-bold">{user.display_name}</span>
+          <span className="text-gray-500">@{user.username}</span>
+          <div className="mt-2">{user.bio}</div>
+        </div>
+      </div>
+    </div>
+  );
+}