From ab981b8c88e4ed9ef1da3da7845fd3965f79c9e6 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 10 Apr 2025 19:45:03 +0100
Subject: [PATCH] Improve pagination

---
 .../AITutor/AIExploreCourseListing.tsx        | 81 ++++++++++---------
 .../GenerateCourse/UserCoursesList.tsx        |  2 +-
 src/queries/ai-course.ts                      |  2 +-
 3 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/src/components/AITutor/AIExploreCourseListing.tsx b/src/components/AITutor/AIExploreCourseListing.tsx
index 93ea36f46..c8b25f560 100644
--- a/src/components/AITutor/AIExploreCourseListing.tsx
+++ b/src/components/AITutor/AIExploreCourseListing.tsx
@@ -2,9 +2,13 @@ import { useListExploreAiCourses } from '../../queries/ai-course';
 import { useEffect, useState } from 'react';
 import { AlertCircle, Loader2 } from 'lucide-react';
 import { AICourseCard } from '../GenerateCourse/AICourseCard';
+import { AILoadingState } from './AILoadingState';
+import { AITutorHeader } from './AITutorHeader';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 
 export function AIExploreCourseListing() {
   const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [showUpgradePopup, setShowUpgradePopup] = useState(false);
 
   const {
     data,
@@ -23,50 +27,51 @@ export function AIExploreCourseListing() {
 
   const courses = data?.pages.flatMap((page) => page.data) ?? [];
 
-  return (
-    <>
-      <div className="mb-3 flex min-h-[35px] items-center justify-between max-sm:mb-1">
-        <div className="flex items-center gap-2">
-          <h2 className="text-lg font-semibold">Explore Courses</h2>
-        </div>
+  if (isInitialLoading || isExploreAiCoursesLoading) {
+    return (
+      <AILoadingState
+        title="Loading courses"
+        subtitle="This may take a moment..."
+      />
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex min-h-[152px] items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white py-4">
+        <AlertCircle className="size-4 text-red-500" />
+        <p className="text-sm font-medium text-red-600">
+          {error?.message ?? 'Error loading courses.'}
+        </p>
       </div>
+    );
+  }
 
-      {(isExploreAiCoursesLoading || isInitialLoading) && (
-        <div className="flex min-h-[152px] items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white py-4">
-          <Loader2
-            className="size-4 animate-spin text-gray-400"
-            strokeWidth={2.5}
-          />
-          <p className="text-sm font-medium text-gray-600">Loading...</p>
-        </div>
+  return (
+    <>
+      {showUpgradePopup && (
+        <UpgradeAccountModal onClose={() => setShowUpgradePopup(false)} />
       )}
 
-      {error && !isExploreAiCoursesLoading && !isInitialLoading && (
-        <div className="flex min-h-[152px] items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white py-4">
-          <AlertCircle className="size-4 text-red-500" />
-          <p className="text-sm font-medium text-red-600">
-            {error?.message ?? 'Error loading courses.'}
-          </p>
+      <AITutorHeader
+        title="Explore Courses"
+        onUpgradeClick={() => setShowUpgradePopup(true)}
+      />
+
+      {courses && courses.length > 0 && (
+        <div className="grid grid-cols-3 gap-2">
+          {courses.map((course) => (
+            <AICourseCard
+              key={course._id}
+              course={course}
+              showActions={false}
+              showProgress={false}
+            />
+          ))}
         </div>
       )}
 
-      {!isExploreAiCoursesLoading &&
-        courses &&
-        courses.length > 0 &&
-        !error && (
-          <div className="grid grid-cols-2 gap-2">
-            {courses.map((course) => (
-              <AICourseCard
-                key={course._id}
-                course={course}
-                showActions={false}
-                showProgress={false}
-              />
-            ))}
-          </div>
-        )}
-
-      {hasNextPage && !isFetchingNextPage && !error && (
+      {hasNextPage && !isFetchingNextPage && (
         <div className="mt-4 flex items-center justify-center">
           <button
             onClick={() => fetchNextPage()}
@@ -78,7 +83,7 @@ export function AIExploreCourseListing() {
         </div>
       )}
 
-      {isFetchingNextPage && !error && (
+      {isFetchingNextPage && (
         <div className="mt-4 flex items-center justify-center gap-2">
           <Loader2
             className="size-4 animate-spin text-gray-400"
diff --git a/src/components/GenerateCourse/UserCoursesList.tsx b/src/components/GenerateCourse/UserCoursesList.tsx
index 943bead6f..ece352e6d 100644
--- a/src/components/GenerateCourse/UserCoursesList.tsx
+++ b/src/components/GenerateCourse/UserCoursesList.tsx
@@ -22,7 +22,7 @@ export function UserCoursesList() {
   const [showUpgradePopup, setShowUpgradePopup] = useState(false);
 
   const [pageState, setPageState] = useState<ListUserAiCoursesQuery>({
-    perPage: '10',
+    perPage: '21',
     currPage: '1',
     query: '',
   });
diff --git a/src/queries/ai-course.ts b/src/queries/ai-course.ts
index 4f90e2081..8b269124f 100644
--- a/src/queries/ai-course.ts
+++ b/src/queries/ai-course.ts
@@ -154,7 +154,7 @@ export function useListExploreAiCourses() {
         return httpGet<ListExploreAiCoursesResponse>(
           `/v1-list-explore-ai-courses`,
           {
-            perPage: '20',
+            perPage: '21',
             currPage: String(pageParam),
           },
         );