Kamran Ahmed
2 months ago
parent
fc82401430
commit
7c60b79942
4 changed files with 144 additions and 62 deletions
@ -0,0 +1,125 @@ |
|||||||
|
import { useQuery } from '@tanstack/react-query'; |
||||||
|
import { listUserAiCoursesOptions } from '../../queries/ai-course'; |
||||||
|
import { queryClient } from '../../stores/query-client'; |
||||||
|
import { AICourseCard } from './AICourseCard'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { Loader2, Search, Lock } from 'lucide-react'; |
||||||
|
import { isLoggedIn } from '../../lib/jwt'; |
||||||
|
import { showLoginPopup } from '../../lib/popup'; |
||||||
|
|
||||||
|
type UserCoursesListProps = {}; |
||||||
|
|
||||||
|
export function UserCoursesList(props: UserCoursesListProps) { |
||||||
|
const [searchTerm, setSearchTerm] = useState(''); |
||||||
|
const [isInitialLoading, setIsInitialLoading] = useState(true); |
||||||
|
|
||||||
|
const { data: userAiCourses, isFetching: isUserAiCoursesLoading } = useQuery( |
||||||
|
listUserAiCoursesOptions(), |
||||||
|
queryClient, |
||||||
|
); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setIsInitialLoading(false); |
||||||
|
}, [userAiCourses]); |
||||||
|
|
||||||
|
const filteredCourses = userAiCourses?.filter((course) => { |
||||||
|
if (!searchTerm.trim()) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
const searchLower = searchTerm.toLowerCase(); |
||||||
|
|
||||||
|
return ( |
||||||
|
course.title.toLowerCase().includes(searchLower) || |
||||||
|
course.keyword.toLowerCase().includes(searchLower) |
||||||
|
); |
||||||
|
}); |
||||||
|
|
||||||
|
const isAuthenticated = isLoggedIn(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="mb-3 flex min-h-[35px] items-center justify-between"> |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
<h2 className="text-lg font-semibold">Your Courses</h2> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="relative w-64"> |
||||||
|
<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 focus:border-gray-300 focus:outline-none focus:ring-blue-500 disabled:opacity-70 sm:text-sm" |
||||||
|
placeholder="Search your courses..." |
||||||
|
value={searchTerm} |
||||||
|
disabled={ |
||||||
|
isInitialLoading || |
||||||
|
isUserAiCoursesLoading || |
||||||
|
!isAuthenticated || |
||||||
|
userAiCourses?.length === 0 |
||||||
|
} |
||||||
|
onChange={(e) => setSearchTerm(e.target.value)} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
{!isInitialLoading && !isUserAiCoursesLoading && !isAuthenticated && ( |
||||||
|
<div className="flex min-h-[152px] flex-col items-center justify-center rounded-lg border border-gray-200 bg-white px-6 py-4"> |
||||||
|
<Lock className="mb-3 size-6 text-gray-300/90" strokeWidth={2.5} /> |
||||||
|
<p className="max-w-sm text-balance text-center text-gray-500"> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
showLoginPopup(); |
||||||
|
}} |
||||||
|
className="font-medium text-black underline underline-offset-2 hover:opacity-80" |
||||||
|
> |
||||||
|
Sign up (free and takes 2s) or login |
||||||
|
</button>{' '} |
||||||
|
to start generating courses. |
||||||
|
</p> |
||||||
|
</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) && ( |
||||||
|
<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> |
||||||
|
)} |
||||||
|
|
||||||
|
{!isUserAiCoursesLoading && |
||||||
|
filteredCourses && |
||||||
|
filteredCourses.length > 0 && ( |
||||||
|
<div className="flex flex-col gap-2"> |
||||||
|
{filteredCourses.map((course) => ( |
||||||
|
<AICourseCard key={course._id} course={course} /> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{!isUserAiCoursesLoading && |
||||||
|
(userAiCourses?.length || 0 > 0) && |
||||||
|
filteredCourses?.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> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue