feat: ai course pagination (#8329)

1 month ago · ebb88721b6
parent 8878d04f98
commit ebb88721b6
5 changed files with 157 additions and 60 deletions
--- a/src/components/GenerateCourse/AICourseCard.tsx
+++ b/src/components/GenerateCourse/AICourseCard.tsx
@ -1,9 +1,9 @@
-import type { AICourseListItem } from '../../queries/ai-course';
+import type { AICourseWithLessonCount } from '../../queries/ai-course';
 import type { DifficultyLevel } from './AICourse';
 import { BookOpen } from 'lucide-react';

 type AICourseCardProps = {
-  course: AICourseListItem;
+  course: AICourseWithLessonCount;
 };

 export function AICourseCard(props: AICourseCardProps) {
--- a/src/components/GenerateCourse/AICourseSearch.tsx
+++ b/src/components/GenerateCourse/AICourseSearch.tsx
@ -0,0 +1,46 @@
+import { SearchIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useDebounceValue } from '../../hooks/use-debounce';
+
+type AICourseSearchProps = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export function AICourseSearch(props: AICourseSearchProps) {
+  const { value: defaultValue, onChange } = props;
+
+  const [searchTerm, setSearchTerm] = useState(defaultValue);
+  const debouncedSearchTerm = useDebounceValue(searchTerm, 500);
+
+  useEffect(() => {
+    setSearchTerm(defaultValue);
+  }, [defaultValue]);
+
+  useEffect(() => {
+    if (debouncedSearchTerm && debouncedSearchTerm.length < 3) {
+      return;
+    }
+
+    if (debouncedSearchTerm === defaultValue) {
+      return;
+    }
+
+    onChange(debouncedSearchTerm);
+  }, [debouncedSearchTerm]);
+
+  return (
+    <div className="relative w-64 max-sm:hidden">
+      <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+        <SearchIcon className="h-4 w-4 text-gray-400" />
+      </div>
+      <input
+        type="text"
+        className="block w-full rounded-md border border-gray-200 bg-white py-1.5 pl-10 pr-3 leading-5 placeholder-gray-500 focus:border-gray-300 focus:outline-none focus:ring-blue-500 disabled:opacity-70 sm:text-sm"
+        placeholder="Search your courses..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+      />
+    </div>
+  );
+}
--- a/src/components/GenerateCourse/UserCoursesList.tsx
+++ b/src/components/GenerateCourse/UserCoursesList.tsx
@ -2,24 +2,33 @@ import { useQuery } from '@tanstack/react-query';
 import {
  getAiCourseLimitOptions,
  listUserAiCoursesOptions,
+  type ListUserAiCoursesQuery,
 } from '../../queries/ai-course';
 import { queryClient } from '../../stores/query-client';
 import { AICourseCard } from './AICourseCard';
 import { useEffect, useState } from 'react';
-import { Gift, Loader2, Search, User2 } from 'lucide-react';
+import { Gift, Loader2, User2 } from 'lucide-react';
 import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
 import { cn } from '../../lib/classname';
 import { useIsPaidUser } from '../../queries/billing';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { getUrlParams, setUrlParams, deleteUrlParam } from '../../lib/browser';
+import { AICourseSearch } from './AICourseSearch';
+import { Pagination } from '../Pagination/Pagination';

 type UserCoursesListProps = {};

 export function UserCoursesList(props: UserCoursesListProps) {
-  const [searchTerm, setSearchTerm] = useState('');
  const [isInitialLoading, setIsInitialLoading] = useState(true);
  const [showUpgradePopup, setShowUpgradePopup] = useState(false);

+  const [pageState, setPageState] = useState<ListUserAiCoursesQuery>({
+    perPage: '10',
+    currPage: '1',
+    query: '',
+  });
+
  const { data: limits, isLoading: isLimitsLoading } = useQuery(
    getAiCourseLimitOptions(),
    queryClient,
@ -29,7 +38,7 @@ export function UserCoursesList(props: UserCoursesListProps) {
  const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();

  const { data: userAiCourses, isFetching: isUserAiCoursesLoading } = useQuery(
-    listUserAiCoursesOptions(),
+    listUserAiCoursesOptions(pageState),
    queryClient,
  );

@ -37,21 +46,31 @@ export function UserCoursesList(props: UserCoursesListProps) {
    setIsInitialLoading(false);
  }, [userAiCourses]);

-  const filteredCourses = userAiCourses?.filter((course) => {
-    if (!searchTerm.trim()) {
-      return true;
-    }
+  const courses = userAiCourses?.data ?? [];
+  const isAuthenticated = isLoggedIn();
+  const limitUsedPercentage = Math.round((used / limit) * 100);

-    const searchLower = searchTerm.toLowerCase();
+  useEffect(() => {
+    const queryParams = getUrlParams();

-    return (
-      course.title.toLowerCase().includes(searchLower) ||
-      course.keyword.toLowerCase().includes(searchLower)
-    );
-  });
+    setPageState({
+      ...pageState,
+      currPage: queryParams?.p || '1',
+      query: queryParams?.q || '',
+    });
+  }, []);

-  const isAuthenticated = isLoggedIn();
-  const limitUsedPercentage = Math.round((used / limit) * 100);
+  useEffect(() => {
+    if (pageState?.currPage !== '1' || pageState?.query !== '') {
+      setUrlParams({
+        p: pageState?.currPage || '1',
+        q: pageState?.query || '',
+      });
+    } else {
+      deleteUrlParam('p');
+      deleteUrlParam('q');
+    }
+  }, [pageState]);

  return (
    <>
@ -69,9 +88,9 @@ export function UserCoursesList(props: UserCoursesListProps) {
          {used > 0 && limit > 0 && !isPaidUserLoading && (
            <div
              className={cn(
-                'flex items-center gap-2 opacity-0 transition-opacity',
+                'pointer-events-none flex items-center gap-2 opacity-0 transition-opacity',
                {
-                  'opacity-100': !isPaidUser,
+                  'pointer-events-auto opacity-100': !isPaidUser,
                },
              )}
            >
@ -95,18 +114,16 @@ export function UserCoursesList(props: UserCoursesListProps) {
            </div>
          )}

-          <div className={cn('relative w-64 max-sm:hidden', {})}>
-            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-              <Search className="h-4 w-4 text-gray-400" />
-            </div>
-            <input
-              type="text"
-              className="block w-full rounded-md border border-gray-200 bg-white py-1.5 pl-10 pr-3 leading-5 placeholder-gray-500 transition-all focus:border-gray-300 focus:outline-none focus:ring-blue-500 disabled:opacity-70 sm:text-sm"
-              placeholder="Search your courses..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-          </div>
+          <AICourseSearch
+            value={pageState?.query || ''}
+            onChange={(value) => {
+              setPageState({
+                ...pageState,
+                query: value,
+                currPage: '1',
+              });
+            }}
+          />
        </div>
      </div>

@ -127,15 +144,13 @@ export function UserCoursesList(props: UserCoursesListProps) {
        </div>
      )}

-      {!isUserAiCoursesLoading &&
-        !isInitialLoading &&
-        userAiCourses?.length === 0 && (
-          <div className="flex min-h-[152px] items-center justify-center rounded-lg border border-gray-200 bg-white py-4">
-            <p className="text-sm text-gray-600">
-              You haven't generated any courses yet.
-            </p>
-          </div>
-        )}
+      {!isUserAiCoursesLoading && !isInitialLoading && courses.length === 0 && (
+        <div className="flex min-h-[152px] items-center justify-center rounded-lg border border-gray-200 bg-white py-4">
+          <p className="text-sm text-gray-600">
+            You haven't generated any courses yet.
+          </p>
+        </div>
+      )}

      {(isUserAiCoursesLoading || isInitialLoading) && (
        <div className="flex min-h-[152px] items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white py-4">
@ -147,19 +162,28 @@ export function UserCoursesList(props: UserCoursesListProps) {
        </div>
      )}

-      {!isUserAiCoursesLoading &&
-        filteredCourses &&
-        filteredCourses.length > 0 && (
-          <div className="flex flex-col gap-2">
-            {filteredCourses.map((course) => (
-              <AICourseCard key={course._id} course={course} />
-            ))}
-          </div>
-        )}
+      {!isUserAiCoursesLoading && courses && courses.length > 0 && (
+        <div className="flex flex-col gap-2">
+          {courses.map((course) => (
+            <AICourseCard key={course._id} course={course} />
+          ))}
+
+          <Pagination
+            totalCount={userAiCourses?.totalCount || 0}
+            totalPages={userAiCourses?.totalPages || 0}
+            currPage={Number(userAiCourses?.currPage || 1)}
+            perPage={Number(userAiCourses?.perPage || 10)}
+            onPageChange={(page) => {
+              setPageState({ ...pageState, currPage: String(page) });
+            }}
+            className="rounded-lg border border-gray-200 bg-white p-4"
+          />
+        </div>
+      )}

      {!isUserAiCoursesLoading &&
-        (userAiCourses?.length || 0 > 0) &&
-        filteredCourses?.length === 0 && (
+        (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.
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@ -11,6 +11,7 @@ type PaginationProps = {
  totalCount: number;
  isDisabled?: boolean;
  onPageChange: (page: number) => void;
+  className?: string;
 };

 export function Pagination(props: PaginationProps) {
@ -22,6 +23,7 @@ export function Pagination(props: PaginationProps) {
    currPage,
    perPage,
    isDisabled = false,
+    className,
  } = props;

  if (!totalPages || totalPages === 1) {
@ -32,10 +34,14 @@ export function Pagination(props: PaginationProps) {

  return (
    <div
-      className={cn('flex items-center', {
-        'justify-between': variant === 'default',
-        'justify-start': variant === 'minimal',
-      })}
+      className={cn(
+        'flex items-center',
+        {
+          'justify-between': variant === 'default',
+          'justify-start': variant === 'minimal',
+        },
+        className,
+      )}
    >
      <div className="flex items-center gap-1 text-xs font-medium">
        <button
--- a/src/queries/ai-course.ts
+++ b/src/queries/ai-course.ts
@ -63,17 +63,38 @@ export function getAiCourseLimitOptions() {
  });
 }

-export type AICourseListItem = AICourseDocument & {
+export type ListUserAiCoursesQuery = {
+  perPage?: string;
+  currPage?: string;
+  query?: string;
+};
+
+export type AICourseWithLessonCount = AICourseDocument & {
  lessonCount: number;
 };

-type ListUserAiCoursesResponse = AICourseListItem[];
+type ListUserAiCoursesResponse = {
+  data: AICourseWithLessonCount[];
+  totalCount: number;
+  totalPages: number;
+  currPage: number;
+  perPage: number;
+};

-export function listUserAiCoursesOptions() {
+export function listUserAiCoursesOptions(
+  params: ListUserAiCoursesQuery = {
+    perPage: '10',
+    currPage: '1',
+    query: '',
+  },
+) {
  return {
-    queryKey: ['user-ai-courses'],
+    queryKey: ['user-ai-courses', params],
    queryFn: () => {
-      return httpGet<ListUserAiCoursesResponse>(`/v1-list-user-ai-courses`);
+      return httpGet<ListUserAiCoursesResponse>(
+        `/v1-list-user-ai-courses`,
+        params,
+      );
    },
    enabled: !!isLoggedIn(),
  };