Refactor

src/components/GenerateCourse/GenerateAICourse.tsx

@@ -54,6 +54,7 @@ export function GenerateAICourse(props: GenerateAICourseProps) {
     await generateCourse({
       term,
       difficulty,
+      slug: courseSlug,
       onCourseIdChange: setCourseId,
       onCourseSlugChange: setCourseSlug,
       onCourseChange: setCourse,

src/components/GenerateCourse/GetAICourse.tsx

@@ -15,6 +15,8 @@ export function GetAICourse(props: GetAICourseProps) {
   const { courseSlug } = props;
 
   const [isLoading, setIsLoading] = useState(true);
+  const [isRegenerating, setIsRegenerating] = useState(false);
+
   const [error, setError] = useState('');
   const { data: aiCourse, error: queryError } = useQuery(
     {
@@ -61,7 +63,17 @@ export function GetAICourse(props: GetAICourseProps) {
     await generateCourse({
       term: aiCourse.keyword,
       difficulty: aiCourse.difficulty,
-      onLoadingChange: setIsLoading,
+      slug: courseSlug,
+      onCourseChange: (course, rawData) => {
+        queryClient.setQueryData(
+          getAiCourseOptions({ aiCourseSlug: courseSlug }).queryKey,
+          {
+            ...aiCourse,
+            data: rawData,
+          },
+        );
+      },
+      onLoadingChange: setIsRegenerating,
       onError: setError,
       isForce: true,
     });
@@ -74,7 +86,7 @@ export function GetAICourse(props: GetAICourseProps) {
         modules: aiCourse?.course.modules || [],
         difficulty: aiCourse?.difficulty || 'Easy',
       }}
-      isLoading={isLoading}
+      isLoading={isLoading || isRegenerating}
       courseSlug={courseSlug}
       error={error}
       onRegenerateOutline={handleRegenerateCourse}

src/components/GenerateCourse/RegenerateOutline.tsx

@@ -16,7 +16,7 @@ export function RegenerateOutline(props: RegenerateOutlineProps) {
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
-  const isPaidUser = useIsPaidUser();
+  const { isPaidUser } = useIsPaidUser();
 
   useOutsideClick(ref, () => setIsDropdownVisible(false));
 

src/components/GenerateCourse/UserCoursesList.tsx

@@ -10,7 +10,7 @@ import { Gift, Loader2, Search, User2 } from 'lucide-react';
 import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
 import { cn } from '../../lib/classname';
-import { billingDetailsOptions } from '../../queries/billing';
+import { useIsPaidUser } from '../../queries/billing';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 
 type UserCoursesListProps = {};
@@ -20,17 +20,13 @@ export function UserCoursesList(props: UserCoursesListProps) {
   const [isInitialLoading, setIsInitialLoading] = useState(true);
   const [showUpgradePopup, setShowUpgradePopup] = useState(false);
 
-  const { data: limits, isLoading } = useQuery(
+  const { data: limits, isLoading: isLimitsLoading } = useQuery(
     getAiCourseLimitOptions(),
     queryClient,
   );
 
   const { used, limit } = limits ?? { used: 0, limit: 0 };
-
-  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
-    useQuery(billingDetailsOptions(), queryClient);
-
-  const isPaidUser = userBillingDetails?.status !== 'active';
+  const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();
 
   const { data: userAiCourses, isFetching: isUserAiCoursesLoading } = useQuery(
     listUserAiCoursesOptions(),
@@ -55,13 +51,6 @@ export function UserCoursesList(props: UserCoursesListProps) {
   });
 
   const isAuthenticated = isLoggedIn();
-
-  const canSearch =
-    !isInitialLoading &&
-    !isUserAiCoursesLoading &&
-    isAuthenticated &&
-    userAiCourses?.length !== 0;
-
   const limitUsedPercentage = Math.round((used / limit) * 100);
 
   return (
@@ -72,11 +61,12 @@ export function UserCoursesList(props: UserCoursesListProps) {
       <div className="mb-3 flex min-h-[35px] items-center justify-between max-sm:mb-1">
         <div className="flex items-center gap-2">
           <h2 className="text-lg font-semibold">
-            <span className='max-md:hidden'>Your </span>Courses
+            <span className="max-md:hidden">Your </span>Courses
           </h2>
         </div>
 
         <div className="flex items-center gap-2">
+          {used > 0 && limit > 0 && !isPaidUserLoading && (
             <div
               className={cn(
                 'flex items-center gap-2 opacity-0 transition-opacity',
@@ -103,6 +93,7 @@ export function UserCoursesList(props: UserCoursesListProps) {
                 </button>
               </p>
             </div>
+          )}
 
           <div className={cn('relative w-64 max-sm:hidden', {})}>
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">

src/helper/generate-ai-course.ts

@@ -9,10 +9,11 @@ import { getAiCourseLimitOptions } from '../queries/ai-course';
 type GenerateCourseOptions = {
   term: string;
   difficulty: string;
+  slug?: string;
   isForce?: boolean;
   onCourseIdChange?: (courseId: string) => void;
   onCourseSlugChange?: (courseSlug: string) => void;
-  onCourseChange?: (course: AiCourse) => void;
+  onCourseChange?: (course: AiCourse, rawData: string) => void;
   onLoadingChange?: (isLoading: boolean) => void;
   onError?: (error: string) => void;
 };
@@ -20,6 +21,7 @@ type GenerateCourseOptions = {
 export async function generateCourse(options: GenerateCourseOptions) {
   const {
     term,
+    slug,
     difficulty,
     onCourseIdChange,
     onCourseSlugChange,
@@ -30,15 +32,32 @@ export async function generateCourse(options: GenerateCourseOptions) {
   } = options;
 
   onLoadingChange?.(true);
-  onCourseChange?.({
+  onCourseChange?.(
+    {
       title: '',
       modules: [],
       difficulty: '',
-  });
+    },
+    '',
+  );
   onError?.('');
 
   try {
-    const response = await fetch(
+    let response = null;
+
+    if (slug && isForce) {
+      response = await fetch(
+        `${import.meta.env.PUBLIC_API_URL}/v1-regenerate-ai-course/${slug}`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+        },
+      );
+    } else {
+      response = await fetch(
         `${import.meta.env.PUBLIC_API_URL}/v1-generate-ai-course`,
         {
           method: 'POST',
@@ -53,6 +72,7 @@ export async function generateCourse(options: GenerateCourseOptions) {
           credentials: 'include',
         },
       );
+    }
 
     if (!response.ok) {
       const data = await response.json();
@@ -108,10 +128,13 @@ export async function generateCourse(options: GenerateCourseOptions) {
 
         try {
           const aiCourse = generateAiCourseStructure(result);
-          onCourseChange?.({
+          onCourseChange?.(
+            {
               ...aiCourse,
               difficulty: difficulty || '',
-          });
+            },
+            result,
+          );
         } catch (e) {
           console.error('Error parsing streamed course content:', e);
         }

src/helper/number.ts

@@ -1,12 +0,0 @@
-export function getPercentage(portion: number, total: number): number {
-  if (portion <= 0 || total <= 0) {
-    return 0;
-  }
-
-  if (portion >= total) {
-    return 100;
-  }
-
-  const percentage = (portion / total) * 100;
-  return Math.round(percentage);
-}

src/helper/read-stream.ts

@@ -1,29 +0,0 @@
-const NEW_LINE = '\n'.charCodeAt(0);
-
-export async function readAICourseLessonStream(
-  reader: ReadableStreamDefaultReader<Uint8Array>,
-  {
-    onStream,
-    onStreamEnd,
-  }: {
-    onStream?: (lesson: string) => void;
-    onStreamEnd?: (lesson: string) => void;
-  },
-) {
-  const decoder = new TextDecoder('utf-8');
-  let result = '';
-
-  while (true) {
-    const { value, done } = await reader.read();
-    if (done) {
-      break;
-    }
-
-    result += decoder.decode(value);
-    onStream?.(result);
-  }
-
-  onStream?.(result);
-  onStreamEnd?.(result);
-  reader.releaseLock();
-}

src/queries/billing.ts

@@ -55,7 +55,7 @@ export function billingDetailsOptions() {
 }
 
 export function useIsPaidUser() {
-  const { data } = useQuery(
+  const { data, isLoading } = useQuery(
     {
       queryKey: ['billing-details'],
       queryFn: async () => {
@@ -67,7 +67,10 @@ export function useIsPaidUser() {
     queryClient,
   );
 
-  return data ?? false;
+  return {
+    isPaidUser: data ?? false,
+    isLoading,
+  };
 }
 
 type CoursePriceParams = {