feat: introduce new app routes with modular structure and enhanced features

Added modular app routes including `login`, `dashboard`, `categories`, `trends`, and `upload`. Introduced reusable components such as `ContentList`, `ContentSkeleton`, and `AppSidebar` for improved UI consistency. Enhanced authentication with `AuthProvider` and implemented lazy loading, dynamic layouts, and infinite scrolling for better performance.
2026-01-14 13:52:08 +01:00
parent 0c045e8d3c
commit 0b07320974
41 changed files with 2341 additions and 43 deletions
--- a/frontend/src/components/content-list.tsx
+++ b/frontend/src/components/content-list.tsx
@@ -0,0 +1,89 @@
+"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>
+  );
+}