Merge branch 'followButton' into 'main'

Follow button

See merge request !31

app/(content)/(user)/[userid]/followers/page.tsx

-export default async function Followers() {
+
+import { UserAvatar } from "@/components/user-avatar";
+import { db } from "@/lib/db";
+import { User } from "@prisma/client";
+import { getServerSession } from "next-auth";
+
+export default async function UserFollowers({ params }: { params: { userid: string } }) {
+    // const session = await getServerSession(authOptions);
+
+    // if (!session) {
+    //     return <div>Loading...</div>;
+    // }
+
+    const fullUser = await db.user.findFirst({
+        where: {
+            username: params.userid
+        },
+        include: {
+            following: true,
+            followers: true
+        }
+    })
+
+
+    const followers = await db.user.findMany({
+        where: {
+            following: {
+                every: {
+                    followerId: { not: undefined }
+                }
+            },
+            followers: {
+                every: {
+                    followingId: fullUser?.id
+                }
+            }
+        }
+    })
+    console.log(fullUser?.id)
+    console.log(followers)
+
     return (
         <div>
             <h1>Followers Page WIP</h1>
+            {followers?.map((follower: User) => (
+                <div key={follower.id}> {follower.id} <UserAvatar
+                    user={{ username: follower.name || null, image: follower.image || null }}
+                    className="h-20 w-20 -mt-50" />
+
+                    <div className="ml-6 md:ml-12 space-y-3">
+                        <h1 className="text-2xl font-bold">{follower.name}</h1>
+                        <h1 className="text-md text-sky-500">@{follower.username}</h1>
+                    </div>
+                </div>
+            ))}
         </div>
     )
-}
\ No newline at end of file
+}
+
+

app/(content)/(user)/[userid]/page.tsx

+import FollowButton from "@/components/following-button"
 import GameItem from "@/components/game-item"
 import { AspectRatio } from "@/components/ui/aspect-ratio"
 import { Card } from "@/components/ui/card"
@@ -12,33 +13,53 @@ import { redirect } from "next/navigation"
 export default async function User({ params }: { params: { userid: string } }) {
   const user = await getCurrentUser()
 
-  if (user?.username !== params.userid) {
-    redirect('/')
-  }
-  const fullUser = await db.user.findFirst({
+  /*     if (user?.username !== params.userid) {
+        redirect('/')
+      } */
+
+  const sessionUser = await db.user.findFirst({
     where: {
       id: user?.id
+    },
+    include: {
+      following: true,
+      followers: true
     }
   })
 
+  const fullUser = await db.user.findFirst({
+    where: {
+      username: params.userid
+    },
+    include: {
+      following: true,
+      followers: true
+    }
+  })
+
+  if (!fullUser) {
+    redirect('/')
+  }
+
 
   let favoritegames = undefined
   let playingGames = undefined
   let finishedGames = undefined
   let planningGames = undefined
 
-  if (fullUser?.favGameList?.length !== 0) {
+  if (fullUser?.favGameList?.length !== 0 && fullUser?.favGameList?.length != undefined) {
     favoritegames = await getFavoriteGames(fullUser?.favGameList!)
   }
-  if (fullUser?.favGameList?.length !== 0) {
+  if (fullUser?.playingGameList?.length !== 0) {
     playingGames = await getFavoriteGames(fullUser?.playingGameList!)
   }
-  if (fullUser?.favGameList?.length !== 0) {
+  if (fullUser?.finishedGameList?.length !== 0) {
     finishedGames = await getFavoriteGames(fullUser?.finishedGameList!)
   }
-  if (fullUser?.favGameList?.length !== 0) {
+  if (fullUser?.planningGameList?.length !== 0) {
     planningGames = await getFavoriteGames(fullUser?.planningGameList!)
   }
+
   return (
     <>
       <div className="main-content h-full">
@@ -56,15 +77,19 @@ export default async function User({ params }: { params: { userid: string } }) {
           </div>
           <div className="p-6 md:p-12 ss:flex">
             <UserAvatar
-              user={{ username: user.username, image: user.image || null }}
+              user={{ username: fullUser.username, image: fullUser.image || null }}
               className="h-52 w-52 -mt-36"
             />
             <div className="ml-6 md:ml-12 space-y-3">
-              <h1 className="text-2xl font-bold">{user.name}</h1>
-              <h1 className="text-md text-sky-500">@{user.username}</h1>
-              {/* <h1 className="pt-3">{user.bio}</h1> */}
+              <h1 className="text-2xl font-bold">{fullUser.name}</h1>
+              <h1 className="text-md text-sky-500">@{fullUser.username}</h1>
+              {/* <h1 className="pt-3">{fullUser.bio}</h1> */}
+            </div>
+            <div className="flex justify-start ml-6 md:ml-12 space-y-3">
+              <FollowButton user={sessionUser!} followingId={fullUser?.id!} />
             </div>
           </div>
+
           <div className="px-6 md:px-12">
             {/* <div className="border-b border-gray-400 dark:border-gray-200" /> */}
             {/* gweets */}

app/api/followers/route.ts

+import { db } from "@/lib/db";
+import { getCurrentUser } from "@/lib/session";
+import { User } from "@prisma/client";
+import { revalidatePath } from "next/cache";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+    const sessionUser = await getCurrentUser();
+
+    if (!sessionUser) {
+        return NextResponse.json({ status: 401, message: 'Unauthorized' });
+    }
+    let follows = undefined;
+
+    try {
+        follows = await db.follows.findMany({
+            where: {
+                followerId: sessionUser.id
+            }
+        });
+    } catch (error) {
+        console.log(error)
+    }
+
+    return NextResponse.json({ status: 200, message: "fetched follows", follows })
+}
+
+export async function PUT(req: NextRequest) {
+    const sessionUser = await getCurrentUser();
+
+    const data = await req.json()
+
+    if (!sessionUser) {
+        return NextResponse.json({ status: 401, message: 'Unauthorized' });
+    }
+
+    try {
+        const dbUser = await db.user.findFirst({
+            where: {
+                id: sessionUser.id
+            }
+        });
+
+        const follow = await db.follows.findFirst({
+            where: {
+                followerId: sessionUser.id,
+                followingId: data.followingId
+            }
+        });
+        console.log(follow)
+
+        if (follow) {
+            // User is already following, so unfollow
+            console.log("delete follow")
+            const delfollow = await db.follows.delete({
+                where: {
+                    followerId_followingId: {
+                        followerId: sessionUser.id,
+                        followingId: data.followingId
+                    }
+
+                }
+            })
+            console.log("del follow:", delfollow)
+        } else {
+            // User is not following, so follow
+            console.log("create follow")
+            await db.follows.create({
+                data: {
+                    followerId: sessionUser.id,
+                    followingId: data.followingId
+                },
+            });
+
+        }
+    } catch (error) {
+        console.log(error)
+    }
+    const path = req.nextUrl.searchParams.get('path') || '/';
+    revalidatePath(path);
+
+    return NextResponse.json({ status: 200, message: 'Follow handled' })
+
+
+}
\ No newline at end of file

components/following-button.tsx

+"use client"
+
+// import { PrismaClient } from '@prisma/client';
+import { startTransition, useEffect, useState } from 'react';
+import { Button } from './ui/button';
+import { Prisma, User, Follows } from '@prisma/client';
+import { useRouter } from "next/navigation";
+
+// 1: Define a type that includes the relation to `Post`
+const userWithFollows = Prisma.validator<Prisma.UserArgs>()({
+  include: { followers: true, following: true },
+})
+
+// 2: Define a type that only contains a subset of the scalar fields
+const userPersonalData = Prisma.validator<Prisma.UserArgs>()({
+  select: { email: true, name: true },
+})
+
+// 3: This type will include a user and all their posts
+type UserWithFollows = Prisma.UserGetPayload<typeof userWithFollows>
+
+
+export default function FollowButton({ user, followingId }: { user: UserWithFollows; followingId: string }) {
+  const [isFollowing, setIsFollowing] = useState(false);
+  const [follows, setFollows] = useState([]);
+  const [buttonPressed, setButtonPress] = useState(false);
+  const router = useRouter();
+
+  async function fetchFollows() {
+
+    try {
+      const response = await fetch('/api/followers')
+
+      const data = await response.json()
+      setFollows(data.follows)
+      setIsFollowing(false)
+      data.follows?.forEach((f: Follows) => {
+
+        if (f.followerId == user.id && f.followingId == followingId) {
+          setIsFollowing(true)
+          return;
+        }
+      })
+    } catch (error) {
+
+    }
+  }
+  useEffect(() => {
+    fetchFollows()
+  }, [buttonPressed])
+
+  async function handleFollow(e: any) {
+    e.preventDefault()
+
+    const response = await fetch('/api/followers', {
+      method: 'PUT',
+      body: JSON.stringify({ user, followingId })
+    })
+
+    setButtonPress(!buttonPressed)
+  }
+
+  console.log(isFollowing)
+
+  return (
+    <Button onClick={handleFollow}>
+      {isFollowing ? 'Unfollow' : 'Follow'}
+    </Button>
+  );
+}  
\ No newline at end of file