35abd0496e
Ensure uniform code formatting across components by aligning with the established code style. Adjust imports, indentation, and spacing to enhance readability and maintainability.
94 lines
2.4 KiB
TypeScript
94 lines
2.4 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 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>
|
|
);
|
|
}
|