feat(explore): implement ExplorePageClient for resource filtering and pagination

Author: tyronejosee

src/actions/resources.ts

@@ -3,24 +3,47 @@
 import { revalidatePath } from "next/cache";
 
 import { createClient } from "@/lib/supabase/server";
+import type { Resource, ResourceList, ResourceForm, Filters } from "@/types";
 
-import type { Resource, ResourceList, ResourceForm } from "@/types";
-
-export const getResources = async (): Promise<ResourceList[]> => {
+export async function getResources(
+  filters: Filters,
+  from: number = 0,
+  to: number = 9,
+): Promise<Resource[]> {
   const supabase = await createClient();
-  const { data, error } = await supabase.from("resources").select(`
-    id,
-    name,
-    slug,
-    image,
-    tags,
-    category:categories (id, name, slug, created_at)
-    `);
+  let query = supabase.from("resources").select("*").range(from, to);
 
-  if (error) throw new Error(error.message);
-  // @ts-expect-error - supabase returns an array, but we want to return a single object
+  // Filters
+  if (filters.category) {
+    query = query.eq("category", filters.category);
+  }
+
+  if (filters.search) {
+    query = query.ilike("name", `%${filters.search}%`);
+  }
+
+  // Sorting
+  switch (filters.sortBy) {
+    case "newest":
+      query = query.order("created_at", { ascending: false });
+      break;
+    case "oldest":
+      query = query.order("created_at", { ascending: true });
+      break;
+    case "popular":
+      query = query.order("views", { ascending: false });
+      break;
+    case "name":
+      query = query.order("name", { ascending: true });
+      break;
+    case "":
+      break;
+  }
+
+  const { data, error } = await query;
+  if (error) throw new Error(`Failed to fetch resources: ${error.message}`);
   return data;
-};
+}
 
 export const getAllResources = async (): Promise<Resource[]> => {
   const supabase = await createClient();

src/app/(public)/explore/client.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useCallback } from "react";
+import { useSearchParams } from "next/navigation";
+import { Skeleton } from "@heroui/react";
+
+import { getResources } from "@/actions/resources";
+import { EmptyList } from "@/components/layout";
+import { ResourceCard } from "@/components/resources";
+import { InfiniteList } from "@/components/ui";
+import type { Filters } from "@/types";
+
+export default function ExplorePageClient() {
+  const searchParams = useSearchParams();
+
+  // Functions
+  const getCurrentFilters = useCallback((): Filters => {
+    return {
+      category: searchParams.get("category") || "",
+      sortBy: (searchParams.get("sortBy") as Filters["sortBy"]) || "",
+      search: searchParams.get("search") || "",
+    };
+  }, [searchParams]);
+
+  return (
+    <InfiniteList
+      pageSize={3}
+      loadMore={(from, to) => getResources(getCurrentFilters(), from, to)}
+      renderItem={(resource) => (
+        <ResourceCard key={resource.id} resource={resource} />
+      )}
+      renderWrapper={(children) => (
+        <section className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {children}
+        </section>
+      )}
+      renderEmpty={() => <EmptyList type="resources" />}
+      renderSkeleton={() => (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {[...Array(3)].map((_, idx) => (
+            <Skeleton key={idx} className="h-60 rounded-xl" />
+          ))}
+        </div>
+      )}
+    />
+  );
+}

src/app/(public)/explore/page.tsx

@@ -1,30 +1,19 @@
-import type { Metadata } from "next";
-
-import { getRandomResources } from "@/actions/resources";
-import { ResourceList } from "@/components/resources";
-import { EmptyList } from "@/components/layout";
-import { Heading } from "@/components/ui";
+import { FilterBar, Heading } from "@/components/ui";
 import { PROJECT_NAME } from "@/config/constants";
-
-export const revalidate = 86400; // 24 hours
+import ExplorePageClient from "./client";
+import type { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: `Explore - ${PROJECT_NAME}`,
   description: "Discover new resources",
 };
 
-export default async function ExplorePage() {
-  const resources = await getRandomResources();
-
-  const renderResources = () => {
-    if (resources.length === 0) return <EmptyList type="resources" />;
-    return <ResourceList resources={resources} />;
-  };
-
+export default function ExplorePage() {
   return (
     <main className="max-w-screen-xl mx-auto p-4 flex flex-col gap-4">
       <Heading title="Explore" subtitle="Discover new resources" />
-      {renderResources()}
+      <FilterBar />
+      <ExplorePageClient />
     </main>
   );
 }