7503707ef1
- Refactored `fetchInitial` function to make it reusable using `useCallback`. - Updated `ContentCard` to call `fetchInitial` via `onUpdate` prop for better reusability. - Removed duplicate logic from `useEffect` for improved code readability and maintainability.
95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { useInfiniteScroll } from "@/app/(dashboard)/_hooks/use-infinite-scroll";
|
|
import { ContentCard } from "@/components/content-card";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import type { Content, PaginatedResponse } from "@/types/content";
|
|
|
|
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 fetchInitial = React.useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await fetchFn({
|
|
limit: 10,
|
|
offset: 0,
|
|
});
|
|
setContents(response.data);
|
|
setOffset(0);
|
|
setHasMore(response.data.length === 10);
|
|
} catch (error) {
|
|
console.error("Failed to fetch contents:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [fetchFn]);
|
|
|
|
React.useEffect(() => {
|
|
fetchInitial();
|
|
}, [fetchInitial]);
|
|
|
|
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,
|
|
});
|
|
|
|
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} onUpdate={fetchInitial} />
|
|
))}
|
|
</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>
|
|
);
|
|
}
|