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

function MyFollowingList() {
  const fetchFollowing = useFetchFollowing();

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

      console.log(`Following ${result.pagination.totalCount} users`);
      result.following.forEach(follow => {
        console.log(`Following ${follow.user.username} since ${follow.followedAt}`);
      });
    } catch (error) {
      console.error("Failed to fetch following:", error.message);
    }
  };

  return <button onClick={loadFollowing}>Load Who I'm Following</button>;
}

import { useFetchFollowing, FollowingResponse } from "@replyke/react-js";
import { useState } from "react";

function PaginatedFollowingList() {
  const fetchFollowing = useFetchFollowing();
  const [following, setFollowing] = useState<FollowingResponse | null>(null);
  const [loading, setLoading] = useState(false);

  const loadPage = async (page: number) => {
    setLoading(true);
    try {
      const result = await fetchFollowing({ page, limit: 15 });
      setFollowing(result);
    } catch (error) {
      console.error("Failed to load following:", error.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      {following?.following.map(follow => (
        <div key={follow.followId}>
          {follow.user.username} - Following since: {new Date(follow.followedAt).toLocaleDateString()}
        </div>
      ))}

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