empty states; communities pagination sort desending; common skeleton card

Author: Rajat Saxena

apps/web/app/(with-contexts)/(with-layout)/communities/communities-list.tsx

@@ -1,27 +1,60 @@
 "use client";
 
-import { useState } from "react";
 import { useCommunities } from "@/hooks/use-communities";
-import { SkeletonCard } from "./skeleton-card";
 import { ContentCard } from "./content-card";
 import { PaginationControls } from "@components/public/pagination";
 import { Community } from "@courselit/common-models";
+import { Users } from "lucide-react";
+import { Button } from "@components/ui/button";
+import { SkeletonCard } from "@components/skeleton-card";
 
 const ITEMS_PER_PAGE = 9;
 
 export function CommunitiesList({
     itemsPerPage = ITEMS_PER_PAGE,
-    publicLink = true,
+    publicView = true,
+    page,
+    onPageChange,
 }: {
     itemsPerPage?: number;
-    publicLink?: boolean;
+    publicView?: boolean;
+    page: number;
+    onPageChange: (page: number) => void;
 }) {
-    const [currentPage, setCurrentPage] = useState(1);
     const { communities, loading, totalPages } = useCommunities(
-        currentPage,
+        page,
         itemsPerPage,
     );
 
+    if (!loading && totalPages === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+                <Users className="w-12 h-12 text-muted-foreground mb-4" />
+                <h3 className="text-lg font-semibold mb-2">
+                    No Communities Found
+                </h3>
+                <p className="text-muted-foreground">
+                    {publicView ? "The team " : "You have "} not added any
+                    communities yet.
+                </p>
+            </div>
+        );
+    }
+
+    if (!loading && totalPages && communities.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+                <Users className="w-12 h-12 text-muted-foreground mb-4" />
+                <p className="text-muted-foreground mb-4">
+                    This page is empty.
+                </p>
+                <Button variant="outline" onClick={() => onPageChange(1)}>
+                    Go to first page
+                </Button>
+            </div>
+        );
+    }
+
     return (
         <div className="space-y-8">
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -33,14 +66,14 @@ export function CommunitiesList({
                           <ContentCard
                               key={community.communityId}
                               community={community}
-                              publicLink={publicLink}
+                              publicView={publicView}
                           />
                       ))}
             </div>
             <PaginationControls
-                currentPage={currentPage}
+                currentPage={page}
                 totalPages={Math.ceil(totalPages / itemsPerPage)}
-                onPageChange={setCurrentPage}
+                onPageChange={onPageChange}
             />
         </div>
     );

apps/web/app/(with-contexts)/(with-layout)/communities/content-card.tsx

@@ -12,15 +12,15 @@ import {
 
 export function ContentCard({
     community,
-    publicLink = true,
+    publicView = true,
 }: {
     community: Community;
-    publicLink?: boolean;
+    publicView?: boolean;
 }) {
     return (
         <Link
             href={
-                publicLink
+                publicView
                     ? `/p/${community.pageId}`
                     : `/dashboard/community/${community.communityId}`
             }

apps/web/app/(with-contexts)/(with-layout)/communities/page.tsx

@@ -1,13 +1,29 @@
-import { Suspense } from "react";
+"use client";
+
+import { useCallback } from "react";
 import { CommunitiesList } from "./communities-list";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function CommunitiesPage() {
+    const searchParams = useSearchParams();
+    const page = parseInt(searchParams?.get("page") || "1");
+    const router = useRouter();
+
+    const handlePageChange = useCallback(
+        (value: number) => {
+            router.push(`/communities?page=${value}`);
+        },
+        [router],
+    );
+
     return (
         <div className="container mx-auto px-4 py-8">
             <h1 className="text-3xl font-bold mb-8">Communities</h1>
-            <Suspense fallback={<div>Loading...</div>}>
-                <CommunitiesList />
-            </Suspense>
+            <CommunitiesList
+                page={page}
+                onPageChange={handlePageChange}
+                itemsPerPage={1}
+            />
         </div>
     );
 }

apps/web/app/(with-contexts)/(with-layout)/communities/skeleton-card.tsx

@@ -0,0 +1,14 @@
+import { BookOpen } from "lucide-react";
+
+export function EmptyState({ publicView = true }: { publicView?: boolean }) {
+    return (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+            <BookOpen className="w-12 h-12 text-muted-foreground mb-4" />
+            <h3 className="text-lg font-semibold mb-2">No Products Found</h3>
+            <p className="text-muted-foreground">
+                {publicView ? "The team has " : "You have "} not added any
+                products yet.
+            </p>
+        </div>
+    );
+}

apps/web/app/(with-contexts)/(with-layout)/products/empty-state.tsx

@@ -1,13 +1,25 @@
-import { Suspense } from "react";
+"use client";
+
+import { useCallback } from "react";
 import { ProductsList } from "./products-list";
+import { useRouter, useSearchParams } from "next/navigation";
 
 export default function CoursesPage() {
+    const searchParams = useSearchParams();
+    const page = parseInt(searchParams?.get("page") || "1");
+    const router = useRouter();
+
+    const handlePageChange = useCallback(
+        (value: number) => {
+            router.push(`/products?page=${value}`);
+        },
+        [router],
+    );
+
     return (
         <div className="container mx-auto px-4 py-8">
             <h1 className="text-3xl font-bold mb-8">Products</h1>
-            <Suspense fallback={<div>Loading...</div>}>
-                <ProductsList />
-            </Suspense>
+            <ProductsList page={page} onPageChange={handlePageChange} />
         </div>
     );
 }

apps/web/app/(with-contexts)/(with-layout)/products/page.tsx

@@ -1,31 +1,56 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import { SkeletonCard } from "./skeleton-card";
+import { useMemo } from "react";
+import { SkeletonCard } from "@components/skeleton-card";
 import { ContentCard } from "./content-card";
 import { PaginationControls } from "@components/public/pagination";
 import { Constants, Course } from "@courselit/common-models";
 import { useProducts } from "@/hooks/use-products";
+import { BookOpen } from "lucide-react";
+import { EmptyState } from "./empty-state";
+import { Button } from "@components/ui/button";
 
 const ITEMS_PER_PAGE = 9;
 
 export function ProductsList({
+    page,
     itemsPerPage = ITEMS_PER_PAGE,
+    onPageChange,
 }: {
+    page: number;
     itemsPerPage?: number;
+    onPageChange: (page: number) => void;
 }) {
-    const [currentPage, setCurrentPage] = useState(1);
     const filters = useMemo(
         () => [Constants.CourseType.COURSE.toUpperCase()],
         [],
     );
+
     const { products, loading, totalPages } = useProducts(
-        currentPage,
+        page,
         itemsPerPage,
         filters,
         true,
     );
 
+    if (!loading && totalPages === 0) {
+        return <EmptyState />;
+    }
+
+    if (!loading && totalPages && products.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center py-12 text-center">
+                <BookOpen className="w-12 h-12 text-muted-foreground mb-4" />
+                <p className="text-muted-foreground mb-4">
+                    This page is empty.
+                </p>
+                <Button variant="outline" onClick={() => onPageChange(1)}>
+                    Go to first page
+                </Button>
+            </div>
+        );
+    }
+
     return (
         <div className="space-y-8">
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -41,9 +66,9 @@ export function ProductsList({
                       ))}
             </div>
             <PaginationControls
-                currentPage={currentPage}
+                currentPage={page}
                 totalPages={Math.ceil(totalPages / itemsPerPage)}
-                onPageChange={setCurrentPage}
+                onPageChange={onPageChange}
             />
         </div>
     );

apps/web/app/(with-contexts)/(with-layout)/products/products-list.tsx

@@ -9,11 +9,25 @@ import {
 } from "@ui-config/strings";
 import Link from "next/link";
 import { Button } from "@components/ui/button";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback } from "react";
+import Resources from "@components/resources";
 const { permissions } = UIConstants;
 
 const breadcrumbs = [{ label: MANAGE_COMMUNITIES_PAGE_HEADING, href: "#" }];
 
 export default function Page() {
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const page = parseInt(searchParams?.get("page") || "1");
+
+    const handlePageChange = useCallback(
+        (value: number) => {
+            router.push(`/dashboard/communities?page=${value}`);
+        },
+        [router],
+    );
+
     return (
         <DashboardContent
             breadcrumbs={breadcrumbs}
@@ -29,7 +43,20 @@ export default function Page() {
                     </Link>
                 </div>
             </div>
-            <CommunitiesList itemsPerPage={9} publicLink={false} />
+            <CommunitiesList
+                page={page}
+                itemsPerPage={9}
+                publicView={false}
+                onPageChange={handlePageChange}
+            />
+            <Resources
+                links={[
+                    {
+                        href: "https://docs.courselit.app/en/communities/introduction/",
+                        text: "Create a community",
+                    },
+                ]}
+            />
         </DashboardContent>
     );
 }

apps/web/app/(with-contexts)/dashboard/(sidebar)/communities/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useContext } from "react";
 // import { ContentCard } from "@/components/admin/my-content/content-card";
-import { SkeletonCard } from "@/components/admin/my-content/skeleton-card";
+// import { SkeletonCard } from "@/components/admin/my-content/skeleton-card";
 import type { ContentItem } from "@/components/admin/my-content/content";
 import { AddressContext, ProfileContext } from "@components/contexts";
 import { MY_CONTENT_HEADER } from "@ui-config/strings";
@@ -13,6 +13,7 @@ import { MyContentCard } from "@components/admin/my-content/content-card";
 import { BookOpen, Users } from "lucide-react";
 import Link from "next/link";
 import { Button } from "@components/ui/button";
+import { SkeletonCard } from "@components/skeleton-card";
 
 function ContentGrid({
     items,