memegoat/frontend/src/components/content-list.tsx

"use client";

import * as React from "react";
import { ContentCard } from "@/components/content-card";
import { ContentService } from "@/services/content.service";
import type { Content, PaginatedResponse } from "@/types/content";
import { Spinner } from "@/components/ui/spinner";

import { useInfiniteScroll } from "@/app/(dashboard)/_hooks/use-infinite-scroll";

interface ContentListProps {
  fetchFn: (params: { limit: number; offset: number }) => Promise<PaginatedResponse<Content>>;
  title?: string;
}

export function ContentList({ fetchFn, title }: ContentListProps) {
  const [contents, setContents] = React.useState<Content[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [offset, setOffset] = React.useState(0);
  const [hasMore, setHasMore] = React.useState(true);

  const loadMore = React.useCallback(async () => {
    if (!hasMore || loading) return;
    
    setLoading(true);
    try {
      const response = await fetchFn({
        limit: 10,
        offset: offset + 10,
      });
      
      setContents(prev => [...prev, ...response.data]);
      setOffset(prev => prev + 10);
      setHasMore(response.data.length === 10);
    } catch (error) {
      console.error("Failed to load more contents:", error);
    } finally {
      setLoading(false);
    }
  }, [offset, hasMore, loading, fetchFn]);

  const { loaderRef } = useInfiniteScroll({
    hasMore,
    loading,
    onLoadMore: loadMore,
  });

  React.useEffect(() => {
    const fetchInitial = async () => {
      setLoading(true);
      try {
        const response = await fetchFn({
          limit: 10,
          offset: 0,
        });
        setContents(response.data);
        setHasMore(response.data.length === 10);
      } catch (error) {
        console.error("Failed to fetch contents:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchInitial();
  }, [fetchFn]);


  return (
    <div className="max-w-2xl mx-auto py-8 px-4 space-y-8">
      {title && <h1 className="text-2xl font-bold">{title}</h1>}
      <div className="flex flex-col gap-6">
        {contents.map((content) => (
          <ContentCard key={content.id} content={content} />
        ))}
      </div>
      
      <div ref={loaderRef} className="py-8 flex justify-center">
        {loading && <Spinner className="h-8 w-8 text-primary" />}
        {!hasMore && contents.length > 0 && (
          <p className="text-muted-foreground text-sm italic">Vous avez atteint la fin ! 🐐</p>
        )}
        {!loading && contents.length === 0 && (
          <p className="text-muted-foreground text-sm italic">Aucun mème trouvé ici... pour l'instant !</p>
        )}
      </div>
    </div>
  );
}