follow button und following users

components/following-button.tsx

-"use client"
+import { useState } from 'react';
+import { PrismaClient } from '@prisma/client';
 
-import { Prisma } from "@prisma/client";
-import { useRouter } from "next/navigation";
-import { startTransition } from "react";
-import { Icons } from "./icons";
-import { Button } from "./ui/button";
+const prisma = new PrismaClient();
 
-type likeType = Prisma.LikeUncheckedCreateInput
+export default function FollowButton({ userId, followerId }) {
+  const [isFollowing, setIsFollowing] = useState(false);
 
-export default function FollowButton(props: { data: likeType }) {
-  const router = useRouter();
+  const handleFollow = async () => {
+    try {
+      // Überprüfen, ob der Benutzer bereits folgt
+      const isAlreadyFollowing = await prisma.followers.findFirst({
+        where: {
+          userId: followerId,
+          followerId: userId,
+        },
+      });
 
-  async function postFollow(e: any) {
-    e.preventDefault()
-    const msgLikeData = props.data;
-    const likeData = {} as likeType
-    likeData.userId = msgLikeData.userId
-    likeData.postId = msgLikeData.postId
-
-    const response = await fetch('http://localhost:3000/api/follows', {
-      method: 'PUT',
-      body: JSON.stringify(likeData)
-    })
-
-    startTransition(() => {
-      // Refresh the current route and fetch new data from the server without
-      // losing client-side browser or React state.
-      router.refresh();
-    });
-    return await response.json()
-  }
+      if (isAlreadyFollowing) {
+        // Benutzer ist bereits ein Follower, daher folgen aufheben
+        await prisma.followers.delete({
+          where: {
+            userId: followerId,
+            followerId: userId,
+          },
+        });
+        setIsFollowing(false);
+      } else {
+        // Benutzer folgt noch nicht, daher folgen
+        await prisma.followers.create({
+          data: {
+            userId: followerId,
+            followerId: userId,
+          },
+        });
+        setIsFollowing(true);
+      }
+    } catch (error) {
+      console.error('Error following/unfollowing user:', error);
+    }
+  };
 
   return (
-    <div>
-      <form onSubmit={postFollow}>
-        <Button type="submit" variant="ghost" size="lg" className="float-right" >
-          <Icons.heart className="h-3 w-3" />
-        </Button>
-      </form>
-    </div>
-  )
-}
\ No newline at end of file
+    <button onClick={handleFollow}>
+      {isFollowing ? 'Unfollow' : 'Follow'}
+    </button>
+  );
+}

components/following-users.tsx

-"use client"
+"use-client"
 
-import { useEffect, useState } from "react";
-import { getUsers } from "@/lib/api";
-import { IUser } from "@/types/types";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import User from "./user-item";
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { PrismaClient } from '@prisma/client';
 
-export default function Following() {
-  const [followedUsers, setFollowedUsers] = useState<IUser[]>([]);
- 
+const prisma = new PrismaClient();
 
-  useEffect(() => {
-    fetchFollowedUsers();
-  }, []);
+export default function Followers() {
+  const router = useRouter();
+  const { userId } = router.query;
+  const [followers, setFollowers] = useState([]);
 
-  const fetchFollowedUsers = async () => {
-    try {
-      const users = await getUsers();
-      setFollowedUsers(users);
-    } catch (error) {
-      console.error("Error fetching followed users:", error);
+  //Zeigt die User an die Follower sind.
+  useEffect(() => {
+    if (userId) {
+      prisma.user.findUnique({
+        where: { id: Number(userId) },
+        include: { followers: true },
+      })
+      .then((user) => {
+        setFollowers(user.followers);
+      })
+      .catch((error) => {
+        console.error('Error retrieving followers:', error);
+      });
     }
-  };
+  }, [userId]);
 
   return (
     <div>
-      <h1>Followed Users</h1>
-      {followedUsers.map((user) => (
-        <User key={user.id} id={user.id} name={user.name} avatar={user.avatar} />
+      <h1>Followers</h1>
+      {followers.map((follower) => (
+        <div key={follower.id}>
+          <p>{follower.userName}</p>
+        </div>
       ))}
     </div>
   );
-};
+}
\ No newline at end of file