diff --git a/src/components/AITutor/AIFeaturedCoursesListing.tsx b/src/components/AITutor/AIFeaturedCoursesListing.tsx index 2b7fa3468..0023cda29 100644 --- a/src/components/AITutor/AIFeaturedCoursesListing.tsx +++ b/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({ - perPage: '20', + perPage: '21', currPage: '1', }); @@ -51,31 +51,8 @@ export function AIFeaturedCoursesListing() { } }, [pageState]); - if (isInitialLoading || isFeaturedAiCoursesLoading) { - return ( - - ); - } - - if (courses.length === 0) { - return ( - { - window.location.href = '/ai'; - }} - /> - ); - } - return ( -
+ <> {showUpgradePopup && ( setShowUpgradePopup(false)} /> )} @@ -85,41 +62,54 @@ export function AIFeaturedCoursesListing() { onUpgradeClick={() => setShowUpgradePopup(true)} /> - {!isFeaturedAiCoursesLoading && courses && courses.length > 0 && ( -
-
- {courses.map((course) => ( - - ))} -
- - { - setPageState({ ...pageState, currPage: String(page) }); - }} - className="rounded-lg border border-gray-200 bg-white p-4" - /> -
+ {(isFeaturedAiCoursesLoading || isInitialLoading) && ( + )} {!isFeaturedAiCoursesLoading && - (featuredAiCourses?.data?.length || 0 > 0) && - courses.length === 0 && ( -
-

- No courses match your search. -

+ !isInitialLoading && + courses.length > 0 && ( +
+
+ {courses.map((course) => ( + + ))} +
+ + { + setPageState({ ...pageState, currPage: String(page) }); + }} + className="rounded-lg border border-gray-200 bg-white p-4" + />
)} -
+ + {!isFeaturedAiCoursesLoading && + !isInitialLoading && + courses.length === 0 && ( + { + window.location.href = '/ai'; + }} + /> + )} + ); } diff --git a/src/components/GenerateCourse/AICourse.tsx b/src/components/GenerateCourse/AICourse.tsx index d100a7d97..eba3cecd5 100644 --- a/src/components/GenerateCourse/AICourse.tsx +++ b/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', diff --git a/src/components/GenerateCourse/UserCoursesList.tsx b/src/components/GenerateCourse/UserCoursesList.tsx index ece352e6d..bef5f21cb 100644 --- a/src/components/GenerateCourse/UserCoursesList.tsx +++ b/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 ( - - ); - } - - if (!isLoggedIn()) { + if (!isInitialLoading && !isLoggedIn()) { return ( { - window.location.href = '/ai'; - }} - /> - ); - } - return ( <> {showUpgradePopup && ( @@ -119,7 +96,14 @@ export function UserCoursesList() { /> - {!isUserAiCoursesLoading && courses && courses.length > 0 && ( + {(isUserAiCoursesLoading || isInitialLoading) && ( + + )} + + {!isUserAiCoursesLoading && !isInitialLoading && courses.length > 0 && (
{courses.map((course) => ( @@ -140,15 +124,17 @@ export function UserCoursesList() {
)} - {!isUserAiCoursesLoading && - (userAiCourses?.data?.length || 0 > 0) && - courses.length === 0 && ( -
-

- No courses match your search. -

-
- )} + {!isUserAiCoursesLoading && !isInitialLoading && courses.length === 0 && ( + { + window.location.href = '/ai'; + }} + /> + )} ); }