feat: add ai course generator (#8322)

* Course landing page * Add ai course page * wip * wip * wip * wip * wip * wip * wip * wip: error handling * wip * wip * wip * wip: ai course progress * wip * wip * wip * feat: code highlighting * feat: usage limit * feat: follow up message * Update UI * wip * Add course content * wip: autogrow textarea & examples * Update types * Update * fix: add highlight to the AI chat * UI changes * Refactor * Update * Improve outline style * Improve spacing * Improve spacing * UI changes for sidebar * Update UI for sidebar * Improve course UI * Mark done, undone * Add toggle lesson done/undone * Update forward backward UI * wip * Minor ui change * Responsiveness of sidebar * wip * wip * wip: billing page * wip * Update UI * fix: hide upgrade if paid user * feat: token usage * feat: list ai courses * fix: limit for followup * Course content responsiveness * Make course content responsive * Responsiveness * Outline button * Responsiveness of course content * Responsiveness of course content * Add course upgrade button * Update design for upgrade * Improve logic for upgrade and limits button * Limits and errors * Add lesson count * Add course card * Improve UI for course generator * Update course functionality * Refactor AI course generation * Responsiveness of screen * Improve * Add responsiveness * Improve empty billing page design * Add empty billing screen * Update UI for billing page * Update UI for billing page * Update UI for billing page * Update billing page design * Update * Remove sidebar * Update --------- Co-authored-by: Arik Chakma <arikchangma@gmail.com>
2025-10-01 19:36:43 +02:00 · 2025-03-12 13:17:38 +00:00
parent faf43f7905
commit cb64894e49
39 changed files with 3906 additions and 25 deletions
--- a/src/components/GenerateCourse/GetAICourse.tsx
+++ b/src/components/GenerateCourse/GetAICourse.tsx
@@ -0,0 +1,65 @@
+import { useQuery } from '@tanstack/react-query';
+import { getAiCourseOptions } 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';
+
+type GetAICourseProps = {
+  courseSlug: string;
+};
+
+export function GetAICourse(props: GetAICourseProps) {
+  const { courseSlug } = props;
+
+  const [isLoading, setIsLoading] = useState(true);
+  const { data: aiCourse, error } = useQuery(
+    {
+      ...getAiCourseOptions({ aiCourseSlug: courseSlug }),
+      select: (data) => {
+        return {
+          ...data,
+          course: generateAiCourseStructure(data.data),
+        };
+      },
+      enabled: !!courseSlug && !!isLoggedIn(),
+    },
+    queryClient,
+  );
+
+  useEffect(() => {
+    if (!isLoggedIn()) {
+      window.location.href = '/ai-tutor';
+    }
+  }, [isLoggedIn]);
+
+  useEffect(() => {
+    if (!aiCourse) {
+      return;
+    }
+
+    setIsLoading(false);
+  }, [aiCourse]);
+
+  useEffect(() => {
+    if (!error) {
+      return;
+    }
+
+    setIsLoading(false);
+  }, [error]);
+
+  return (
+    <AICourseContent
+      course={{
+        title: aiCourse?.title || '',
+        modules: aiCourse?.course.modules || [],
+        difficulty: aiCourse?.difficulty || 'Easy',
+      }}
+      isLoading={isLoading}
+      courseSlug={courseSlug}
+      error={error?.message}
+    />
+  );
+}