Merge branch 'main' into UserProfile

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

+import FollowersList from "@/components/following-users";
+import { useSession } from "next-auth/react";
+
 export default function Followers() {
+    const { data: session } = useSession();
+
+    if (!session) {
+        return <div>Loading...</div>;
+    }
+
     return (
         <div>
             <h1>Followers Page WIP</h1>
+            <FollowersList userId={session.user?.id} />
         </div>
     )
 }
\ No newline at end of file

components/following-button.tsx

+"use client"
+
+import { PrismaClient } from '@prisma/client';
+import { useState } from 'react';
+import { Button } from './ui/button';
+
+const prisma = new PrismaClient();
+
+async function getFollower(userId: number, followerId: number) {
+  const follower = await prisma.follows.findFirst({
+    where: {
+      followerId: followerId,
+      followingId: userId,
+    },
+  });
+
+  return follower;
+}
+
+export default function FollowButton({ userId, followerId }: { userId: number; followerId: number }) {
+  const [isFollowing, setIsFollowing] = useState(false);
+
+  const handleFollow = async () => {
+    const follower = await getFollower(userId, followerId);
+
+    if (follower) {
+      // User is already following, so unfollow
+      await prisma.follows.delete({
+        where: {
+          followerId_followingId: {
+            followerId: followerId,
+            followingId: userId,
+          },
+        },
+      });
+      setIsFollowing(false);
+    } else {
+      // User is not following, so follow
+      await prisma.follows.create({
+        data: {
+          followerId: followerId,
+          followingId: userId,
+        },
+      });
+      setIsFollowing(true);
+    }
+  };
+
+  return (
+    <Button onClick={handleFollow}>
+      {isFollowing ? 'Unfollow' : 'Follow'}
+    </Button>
+  );
+}
\ No newline at end of file

components/following-users.tsx

+"use client"
+
+import { PrismaClient } from '@prisma/client';
+import { useEffect, useState } from 'react';
+
+const prisma = new PrismaClient();
+
+interface Follower {
+  id: number;
+  name: string;
+  email: string | null;
+}
+
+export default function FollowersList({ userId }: { userId: number }) {
+  const [followers, setFollowers] = useState<Follower[]>([]);
+
+  useEffect(() => {
+    async function fetchFollowers() {
+      const followersList = await prisma.follows.findMany({
+        where: {
+          followingId: userId,
+        },
+        include: {
+          follower: true,
+        },
+      });
+
+      const filteredFollowers = followersList.map((follow) => {
+        const { id, name, email } = follow.follower;
+        return { id, name: name ?? "", email };
+      });
+
+      setFollowers(filteredFollowers);
+    }
+
+    fetchFollowers();
+  }, [userId]);
+
+  return (
+    <ul>
+      {followers.map((follower) => (
+        <li key={follower.id}>{follower.name} ({follower.email})</li>
+      ))}
+    </ul>
+  );
+}
\ No newline at end of file

components/user-item.tsx

+import Image from "next/image";
+import Link from "next/link";
+import FollowButton from "./following-button";
+
+// this is a single user helper-component, only for design purposes
+export default function FollowUser({ id, followId, userName, image }: { id: number, followId: number, userName: string, image: { url: string } }) {
+    return (
+        <div>
+            <Link href={`/user/${id}`}>
+                <div className="">
+                    <Image
+                        src={image.url}
+                        alt={userName}
+                        width={50}
+                        height={50}
+                        priority={true} />
+                </div>
+                <p>{userName}</p>
+                <FollowButton userId={id} followerId={followId} />
+            </Link>
+        </div>
+    )
+}
\ No newline at end of file

prisma/schema.prisma

@@ -23,6 +23,19 @@ model User {
   Post    Post[]
   Comment Comment[]
   Like    Like[]
+
+  followers Follows[] @relation("follower")
+  following Follows[] @relation("following")
+}
+
+model Follows {
+  follower    User     @relation("following", fields: [followerId], references: [id])
+  followerId  Int
+  following   User     @relation("follower", fields: [followingId], references: [id])
+  followingId Int
+  createdAt   DateTime @default(now())
+
+  @@id([followerId, followingId])
 }
 
 model Post {

types/next-auth.d.ts

+import 'next-auth';
+
+declare module 'next-auth' {
+    interface Session {
+        user: {
+            id: number;
+            name?: string | null;
+            email?: string | null;
+            image?: string | null;
+        };
+    }
+}
\ No newline at end of file