refactor: ai-courses (#8327)

* Refactor ai courses

* Refactor

* Regenerate roadmap functionality

* Title and difficulty to refresh also

* Add course regeneration

* Improve the non paid user headings

* Update

* Improve back button logic

* Is paid user checks

src/components/GenerateCourse/GetAICourse.tsx

@@ -1,10 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
-import { getAiCourseOptions } from '../../queries/ai-course';
+import {
+  getAiCourseOptions,
+  getAiCourseProgressOptions,
+} from '../../queries/ai-course';
 import { queryClient } from '../../stores/query-client';
 import { useEffect, useState } from 'react';
 import { AICourseContent } from './AICourseContent';
 import { generateAiCourseStructure } from '../../lib/ai';
 import { isLoggedIn } from '../../lib/jwt';
+import { generateCourse } from '../../helper/generate-ai-course';
 
 type GetAICourseProps = {
   courseSlug: string;
@@ -14,7 +18,10 @@ export function GetAICourse(props: GetAICourseProps) {
   const { courseSlug } = props;
 
   const [isLoading, setIsLoading] = useState(true);
-  const { data: aiCourse, error } = useQuery(
+  const [isRegenerating, setIsRegenerating] = useState(false);
+
+  const [error, setError] = useState('');
+  const { data: aiCourse, error: queryError } = useQuery(
     {
       ...getAiCourseOptions({ aiCourseSlug: courseSlug }),
       select: (data) => {
@@ -43,12 +50,49 @@ export function GetAICourse(props: GetAICourseProps) {
   }, [aiCourse]);
 
   useEffect(() => {
-    if (!error) {
+    if (!queryError) {
       return;
     }
 
     setIsLoading(false);
-  }, [error]);
+    setError(queryError.message);
+  }, [queryError]);
+
+  const handleRegenerateCourse = async (prompt?: string) => {
+    if (!aiCourse) {
+      return;
+    }
+
+    await generateCourse({
+      term: aiCourse.keyword,
+      difficulty: aiCourse.difficulty,
+      slug: courseSlug,
+      prompt,
+      onCourseChange: (course, rawData) => {
+        queryClient.setQueryData(
+          getAiCourseOptions({ aiCourseSlug: courseSlug }).queryKey,
+          {
+            ...aiCourse,
+            title: course.title,
+            difficulty: course.difficulty,
+            data: rawData,
+          },
+        );
+      },
+      onLoadingChange: (isNewLoading) => {
+        setIsRegenerating(isNewLoading);
+        if (!isNewLoading) {
+          queryClient.invalidateQueries({
+            queryKey: getAiCourseProgressOptions({
+              aiCourseSlug: courseSlug,
+            }).queryKey,
+          });
+        }
+      },
+      onError: setError,
+      isForce: true,
+    });
+  };
 
   return (
     <AICourseContent
@@ -57,9 +101,10 @@ export function GetAICourse(props: GetAICourseProps) {
         modules: aiCourse?.course.modules || [],
         difficulty: aiCourse?.difficulty || 'Easy',
       }}
-      isLoading={isLoading}
+      isLoading={isLoading || isRegenerating}
       courseSlug={courseSlug}
-      error={error?.message}
+      error={error}
+      onRegenerateOutline={handleRegenerateCourse}
     />
   );
 }