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>
  );
}