import { useFetchFollowers } from "@replyke/react-js";

function MyFollowersList() {
  const fetchFollowers = useFetchFollowers();

  const loadFollowers = async () => {
    try {
      const result = await fetchFollowers({ page: 1, limit: 10 });

      console.log(`Found ${result.pagination.totalCount} total followers`);
      result.followers.forEach(follower => {
        console.log(`${follower.user.username} followed on ${follower.followedAt}`);
      });
    } catch (error) {
      console.error("Failed to fetch followers:", error.message);
    }
  };

  return <button onClick={loadFollowers}>Load My Followers</button>;
}

import { useFetchFollowers, FollowersResponse } from "@replyke/react-js";
import { useState } from "react";

function PaginatedFollowersList() {
  const fetchFollowers = useFetchFollowers();
  const [followers, setFollowers] = useState<FollowersResponse | null>(null);
  const [loading, setLoading] = useState(false);

  const loadPage = async (page: number) => {
    setLoading(true);
    try {
      const result = await fetchFollowers({ page, limit: 20 });
      setFollowers(result);
    } catch (error) {
      console.error("Failed to load followers:", error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      {followers?.followers.map(follower => (
        <div key={follower.followId}>
          {follower.user.username} - Followed: {new Date(follower.followedAt).toLocaleDateString()}
        </div>
      ))}

      {followers && (
        <div>
          Page {followers.pagination.currentPage} of {followers.pagination.totalPages}
          {followers.pagination.hasNextPage && (
            <button onClick={() => loadPage(followers.pagination.currentPage + 1)}>
              Next Page
            </button>
          )}
        </div>
      )}
    </div>
  );
}