diff --git a/src/components/GenerateCourse/AICourseContent.tsx b/src/components/GenerateCourse/AICourseContent.tsx index d182be30a..9e0c4564c 100644 --- a/src/components/GenerateCourse/AICourseContent.tsx +++ b/src/components/GenerateCourse/AICourseContent.tsx @@ -1,28 +1,25 @@ -import { useQuery } from '@tanstack/react-query'; import { BookOpenCheck, ChevronLeft, + CircleAlert, Loader2, Menu, - X, - CircleAlert, Play, + X, } from 'lucide-react'; import { useState } from 'react'; import { type AiCourse } from '../../lib/ai'; import { cn } from '../../lib/classname'; import { slugify } from '../../lib/slugger'; -import { getAiCourseProgressOptions } from '../../queries/ai-course'; -import { queryClient } from '../../stores/query-client'; +import { useIsPaidUser } from '../../queries/billing'; +import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal'; import { CheckIcon } from '../ReactIcons/CheckIcon'; import { ErrorIcon } from '../ReactIcons/ErrorIcon'; +import { AICourseLesson } from './AICourseLesson'; import { AICourseLimit } from './AICourseLimit'; import { AICourseSidebarModuleList } from './AICourseSidebarModuleList'; -import { AICourseLesson } from './AICourseLesson'; -import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal'; import { AILimitsPopup } from './AILimitsPopup'; import { RegenerateOutline } from './RegenerateOutline'; -import { useIsPaidUser } from '../../queries/billing'; type AICourseContentProps = { courseSlug?: string; @@ -45,10 +42,7 @@ export function AICourseContent(props: AICourseContentProps) { const { isPaidUser } = useIsPaidUser(); - const { data: aiCourseProgress } = useQuery( - getAiCourseProgressOptions({ aiCourseSlug: courseSlug || '' }), - queryClient, - ); + const aiCourseProgress = course.done || []; const [expandedModules, setExpandedModules] = useState< Record @@ -121,7 +115,7 @@ export function AICourseContent(props: AICourseContentProps) { 0, ); - const totalDoneLessons = aiCourseProgress?.done?.length || 0; + const totalDoneLessons = (course?.done || []).length; const finishedPercentage = Math.round( (totalDoneLessons / totalCourseLessons) * 100, ); @@ -389,6 +383,7 @@ export function AICourseContent(props: AICourseContentProps) { {viewMode === 'module' && (
{courseModule.lessons.map((lesson, lessonIdx) => { - const key = `${slugify(courseModule.title)}__${slugify(lesson)}`; - const isCompleted = - aiCourseProgress?.done.includes(key); + const key = `${slugify(String(moduleIdx))}-${slugify(String(lessonIdx))}`; + const isCompleted = aiCourseProgress.includes(key); return (
{ - return httpPatch( + return httpPatch( `/v1-toggle-done-ai-lesson/${courseSlug}`, { - lessonId, + moduleIndex: activeModuleIndex, + lessonIndex: activeLessonIndex, }, ); }, onSuccess: (data) => { queryClient.setQueryData( - ['ai-course-progress', { aiCourseSlug: courseSlug }], + getAiCourseOptions({ aiCourseSlug: courseSlug }).queryKey, data, ); }, diff --git a/src/components/GenerateCourse/AICourseSidebarModuleList.tsx b/src/components/GenerateCourse/AICourseSidebarModuleList.tsx index 7bbf557ee..5158f91b8 100644 --- a/src/components/GenerateCourse/AICourseSidebarModuleList.tsx +++ b/src/components/GenerateCourse/AICourseSidebarModuleList.tsx @@ -2,9 +2,6 @@ import { type Dispatch, type SetStateAction } from 'react'; import type { AiCourse } from '../../lib/ai'; import { Check, ChevronDownIcon, ChevronRightIcon } from 'lucide-react'; import { cn } from '../../lib/classname'; -import { getAiCourseProgressOptions } from '../../queries/ai-course'; -import { useQuery } from '@tanstack/react-query'; -import { queryClient } from '../../stores/query-client'; import { slugify } from '../../lib/slugger'; import { CheckIcon } from '../ReactIcons/CheckIcon'; import { CircularProgress } from './CircularProgress'; @@ -44,10 +41,7 @@ export function AICourseSidebarModuleList(props: AICourseModuleListProps) { isLoading, } = props; - const { data: aiCourseProgress } = useQuery( - getAiCourseProgressOptions({ aiCourseSlug: courseSlug || '' }), - queryClient, - ); + const aiCourseProgress = course.done || []; const toggleModule = (index: number) => { setExpandedModules((prev) => { @@ -71,16 +65,18 @@ export function AICourseSidebarModuleList(props: AICourseModuleListProps) { }); }; - const { done = [] } = aiCourseProgress || {}; + const done = aiCourseProgress || []; return (