Fix pagination of tutor

src/components/AITutor/AIFeaturedCoursesListing.tsx

@@ -8,18 +8,18 @@ import { useEffect, useState } from 'react';
 import { getUrlParams, setUrlParams, deleteUrlParam } from '../../lib/browser';
 import { AICourseCard } from '../GenerateCourse/AICourseCard';
 import { Pagination } from '../Pagination/Pagination';
-import { AILoadingState } from './AILoadingState';
-import { AITutorTallMessage } from './AITutorTallMessage';
-import { BookOpen } from 'lucide-react';
 import { AITutorHeader } from './AITutorHeader';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { AITutorTallMessage } from './AITutorTallMessage';
+import { BookOpen } from 'lucide-react';
+import { AILoadingState } from './AILoadingState';
 
 export function AIFeaturedCoursesListing() {
   const [isInitialLoading, setIsInitialLoading] = useState(true);
   const [showUpgradePopup, setShowUpgradePopup] = useState(false);
 
   const [pageState, setPageState] = useState<ListUserAiCoursesQuery>({
-    perPage: '20',
+    perPage: '21',
     currPage: '1',
   });
 
@@ -51,31 +51,8 @@ export function AIFeaturedCoursesListing() {
     }
   }, [pageState]);
 
-  if (isInitialLoading || isFeaturedAiCoursesLoading) {
-    return (
-      <AILoadingState
-        title="Loading featured courses"
-        subtitle="This may take a moment..."
-      />
-    );
-  }
-
-  if (courses.length === 0) {
-    return (
-      <AITutorTallMessage
-        title="No featured courses"
-        subtitle="There are no featured courses available at the moment."
-        icon={BookOpen}
-        buttonText="Browse all courses"
-        onButtonClick={() => {
-          window.location.href = '/ai';
-        }}
-      />
-    );
-  }
-
   return (
-    <div className="w-full">
+    <>
       {showUpgradePopup && (
         <UpgradeAccountModal onClose={() => setShowUpgradePopup(false)} />
       )}
@@ -85,41 +62,54 @@ export function AIFeaturedCoursesListing() {
         onUpgradeClick={() => setShowUpgradePopup(true)}
       />
 
-      {!isFeaturedAiCoursesLoading && courses && courses.length > 0 && (
-        <div className="flex flex-col gap-2">
-          <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
-            {courses.map((course) => (
-              <AICourseCard
-                key={course._id}
-                course={course}
-                showActions={false}
-                showProgress={false}
-              />
-            ))}
-          </div>
-
-          <Pagination
-            totalCount={featuredAiCourses?.totalCount || 0}
-            totalPages={featuredAiCourses?.totalPages || 0}
-            currPage={Number(featuredAiCourses?.currPage || 1)}
-            perPage={Number(featuredAiCourses?.perPage || 10)}
-            onPageChange={(page) => {
-              setPageState({ ...pageState, currPage: String(page) });
-            }}
-            className="rounded-lg border border-gray-200 bg-white p-4"
-          />
-        </div>
+      {(isFeaturedAiCoursesLoading || isInitialLoading) && (
+        <AILoadingState
+          title="Loading featured courses"
+          subtitle="This may take a moment..."
+        />
       )}
 
       {!isFeaturedAiCoursesLoading &&
-        (featuredAiCourses?.data?.length || 0 > 0) &&
-        courses.length === 0 && (
-          <div className="flex min-h-[114px] items-center justify-center rounded-lg border border-gray-200 bg-white py-4">
-            <p className="text-sm text-gray-600">
-              No courses match your search.
-            </p>
+        !isInitialLoading &&
+        courses.length > 0 && (
+          <div className="flex flex-col gap-2">
+            <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
+              {courses.map((course) => (
+                <AICourseCard
+                  key={course._id}
+                  course={course}
+                  showActions={false}
+                  showProgress={false}
+                />
+              ))}
+            </div>
+
+            <Pagination
+              totalCount={featuredAiCourses?.totalCount || 0}
+              totalPages={featuredAiCourses?.totalPages || 0}
+              currPage={Number(featuredAiCourses?.currPage || 1)}
+              perPage={Number(featuredAiCourses?.perPage || 10)}
+              onPageChange={(page) => {
+                setPageState({ ...pageState, currPage: String(page) });
+              }}
+              className="rounded-lg border border-gray-200 bg-white p-4"
+            />
           </div>
         )}
-    </div>
+
+      {!isFeaturedAiCoursesLoading &&
+        !isInitialLoading &&
+        courses.length === 0 && (
+          <AITutorTallMessage
+            title="No featured courses"
+            subtitle="There are no featured courses available at the moment."
+            icon={BookOpen}
+            buttonText="Browse all courses"
+            onButtonClick={() => {
+              window.location.href = '/ai';
+            }}
+          />
+        )}
+    </>
   );
 }

src/components/GenerateCourse/AICourse.tsx

@@ -92,6 +92,7 @@ export function AICourse(props: AICourseProps) {
             id="keyword"
             type="text"
             value={keyword}
+            autoFocus={true}
             onChange={(e) => setKeyword(e.target.value)}
             onKeyDown={handleKeyDown}
             placeholder="e.g. JavaScript Promises, React Hooks, Go Routines etc"
@@ -126,7 +127,7 @@ export function AICourse(props: AICourseProps) {
               type="submit"
               disabled={!keyword.trim()}
               className={cn(
-                'flex items-center justify-center rounded-full px-4 py-1 text-white transition-colors text-sm',
+                'flex items-center justify-center rounded-full px-4 py-1 text-sm text-white transition-colors',
                 !keyword.trim()
                   ? 'cursor-not-allowed bg-gray-400'
                   : 'bg-black hover:bg-gray-800',

src/components/GenerateCourse/UserCoursesList.tsx

@@ -9,13 +9,13 @@ import {
   type ListUserAiCoursesQuery,
 } from '../../queries/ai-course';
 import { queryClient } from '../../stores/query-client';
-import { AILoadingState } from '../AITutor/AILoadingState';
 import { AITutorHeader } from '../AITutor/AITutorHeader';
 import { AITutorTallMessage } from '../AITutor/AITutorTallMessage';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 import { Pagination } from '../Pagination/Pagination';
 import { AICourseCard } from './AICourseCard';
 import { AICourseSearch } from './AICourseSearch';
+import { AILoadingState } from '../AITutor/AILoadingState';
 
 export function UserCoursesList() {
   const [isInitialLoading, setIsInitialLoading] = useState(true);
@@ -60,16 +60,7 @@ export function UserCoursesList() {
     }
   }, [pageState]);
 
-  if (isInitialLoading || isUserAiCoursesLoading) {
-    return (
-      <AILoadingState
-        title="Loading your courses"
-        subtitle="This may take a moment..."
-      />
-    );
-  }
-
-  if (!isLoggedIn()) {
+  if (!isInitialLoading && !isLoggedIn()) {
     return (
       <AITutorTallMessage
         title="Sign up or login"
@@ -83,20 +74,6 @@ export function UserCoursesList() {
     );
   }
 
-  if (courses.length === 0) {
-    return (
-      <AITutorTallMessage
-        title="No courses found"
-        subtitle="You haven't generated any courses yet."
-        icon={BookOpen}
-        buttonText="Create your first course"
-        onButtonClick={() => {
-          window.location.href = '/ai';
-        }}
-      />
-    );
-  }
-
   return (
     <>
       {showUpgradePopup && (
@@ -119,7 +96,14 @@ export function UserCoursesList() {
         />
       </AITutorHeader>
 
-      {!isUserAiCoursesLoading && courses && courses.length > 0 && (
+      {(isUserAiCoursesLoading || isInitialLoading) && (
+        <AILoadingState
+          title="Loading your courses"
+          subtitle="This may take a moment..."
+        />
+      )}
+
+      {!isUserAiCoursesLoading && !isInitialLoading && courses.length > 0 && (
         <div className="flex flex-col gap-2">
           <div className="grid grid-cols-3 gap-2">
             {courses.map((course) => (
@@ -140,15 +124,17 @@ export function UserCoursesList() {
         </div>
       )}
 
-      {!isUserAiCoursesLoading &&
-        (userAiCourses?.data?.length || 0 > 0) &&
-        courses.length === 0 && (
-          <div className="flex min-h-[114px] items-center justify-center rounded-lg border border-gray-200 bg-white py-4">
-            <p className="text-sm text-gray-600">
-              No courses match your search.
-            </p>
-          </div>
-        )}
+      {!isUserAiCoursesLoading && !isInitialLoading && courses.length === 0 && (
+        <AITutorTallMessage
+          title="No courses found"
+          subtitle="You haven't generated any courses yet."
+          icon={BookOpen}
+          buttonText="Create your first course"
+          onButtonClick={() => {
+            window.location.href = '/ai';
+          }}
+        />
+      )}
     </>
   );
 }