refactor: apply consistent formatting to improve code quality

Ensure uniform code formatting across components by aligning with the established code style. Adjust imports, indentation, and spacing to enhance readability and maintainability.

frontend/src/components/content-list.tsx

@@ -1,89 +1,93 @@
 "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";
+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;
+	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 [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 loadMore = React.useCallback(async () => {
+		if (!hasMore || loading) return;
 
-  const { loaderRef } = useInfiniteScroll({
-    hasMore,
-    loading,
-    onLoadMore: loadMore,
-  });
+		setLoading(true);
+		try {
+			const response = await fetchFn({
+				limit: 10,
+				offset: offset + 10,
+			});
 
-  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);
-      }
-    };
+			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]);
 
-    fetchInitial();
-  }, [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);
+			}
+		};
 
-  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>
-  );
+		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>
+	);
 }