github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
feat/ai-courses
Arik Chakma 2 months ago
parent 03838ae888
commit 54738929a9
8 changed files with 267 additions and 102 deletions
Split View
  1. 13
      src/api/ai-roadmap.ts
  2. 136
      src/components/GenerateCourse/AICourseContent.tsx
  3. 101
      src/components/GenerateCourse/AICourseModuleList.tsx
  4. 22
      src/components/GenerateCourse/AICourseModuleView.tsx
  5. 1
      src/components/GenerateCourse/GenerateAICourse.tsx
  6. 58
      src/components/GenerateCourse/GetAICourse.tsx
  7. 4
      src/pages/ai-tutor/[courseSlug].astro
  8. 34
      src/queries/ai-course.ts

13
src/api/ai-roadmap.ts
Unescape View File

@ -18,3 +18,16 @@ export function aiRoadmapApi(context: APIContext) {
},
};
}
export interface AICourseDocument {
_id: string;
userId: string;
title: string;
slug?: string;
keyword: string;
difficulty: string;
data: string;
viewCount: number;
createdAt: Date;
updatedAt: Date;
}

136
src/components/GenerateCourse/AICourseContent.tsx
Unescape View File

@ -1,4 +1,11 @@
import { ArrowLeft, BookOpenCheck, Loader2, Menu, X } from 'lucide-react';
import {
ArrowLeft,
BookOpenCheck,
CheckCircleIcon,
Loader2,
Menu,
X,
} from 'lucide-react';
import { useState } from 'react';
import { cn } from '../../lib/classname';
import { ErrorIcon } from '../ReactIcons/ErrorIcon';
@ -8,6 +15,8 @@ import { useQuery } from '@tanstack/react-query';
import { queryClient } from '../../stores/query-client';
import { AICourseModuleList } from './AICourseModuleList';
import { AICourseModuleView } from './AICourseModuleView';
import { slugify } from '../../lib/slugger';
import { CheckIcon } from '../ReactIcons/CheckIcon';
type Lesson = string;
@ -26,28 +35,26 @@ type AICourseContentProps = {
courseSlug?: string;
course: AiCourse;
isLoading: boolean;
error?: string;
};
export function AICourseContent(props: AICourseContentProps) {
const { course, courseSlug, isLoading } = props;
const [courseId, setCourseId] = useState('');
const [error, setError] = useState<string | null>(null);
const { course, courseSlug, isLoading, error } = props;
const [activeModuleIndex, setActiveModuleIndex] = useState(0);
const [activeLessonIndex, setActiveLessonIndex] = useState(0);
const [sidebarOpen, setSidebarOpen] = useState(true);
const [viewMode, setViewMode] = useState<'module' | 'full'>('full');
const [expandedModules, setExpandedModules] = useState<
Record<number, boolean>
>({});
const { data: aiCourseProgress } = useQuery(
getAiCourseProgressOptions({ aiCourseSlug: courseSlug || '' }),
queryClient,
);
const [expandedModules, setExpandedModules] = useState<
Record<number, boolean>
>({});
// Navigation helpers
const goToNextModule = () => {
if (activeModuleIndex < course.modules.length - 1) {
@ -192,6 +199,7 @@ export function AICourseContent(props: AICourseContentProps) {
<AICourseModuleList
course={course}
courseSlug={courseSlug}
activeModuleIndex={activeModuleIndex}
setActiveModuleIndex={setActiveModuleIndex}
activeLessonIndex={activeLessonIndex}
@ -235,52 +243,72 @@ export function AICourseContent(props: AICourseContentProps) {
</div>
{course.title ? (
<div className="flex flex-col">
{course.modules.map((module, moduleIdx) => (
<div
key={moduleIdx}
className="mb-5 pb-4 last:border-0 last:pb-0"
>
<h2 className="mb-2 text-xl font-bold text-gray-800">
{module.title}
</h2>
<div className="ml-2 space-y-1">
{module.lessons.map((lesson, lessonIdx) => (
<div
key={lessonIdx}
className="flex cursor-pointer items-start rounded-md border border-gray-100 p-2 transition-colors hover:border-gray-300 hover:bg-blue-50"
onClick={() => {
setActiveModuleIndex(moduleIdx);
setActiveLessonIndex(lessonIdx);
// Expand only this module in the sidebar
setExpandedModules((prev) => {
const newState: Record<number, boolean> = {};
// Set all modules to collapsed
course.modules.forEach((_, idx) => {
newState[idx] = false;
});
// Expand only the current module
newState[moduleIdx] = true;
return newState;
});
// Ensure sidebar is visible on mobile
setSidebarOpen(true);
setViewMode('module');
}}
>
<span className="mr-2 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700">
{lessonIdx + 1}
</span>
<p className="flex-1 pt-0.5 text-gray-700">
{lesson}
</p>
<span className="text-sm font-medium text-blue-600">
View →
</span>
</div>
))}
{course.modules.map((module, moduleIdx) => {
return (
<div
key={moduleIdx}
className="mb-5 pb-4 last:border-0 last:pb-0"
>
<h2 className="mb-2 text-xl font-bold text-gray-800">
{module.title}
</h2>
<div className="ml-2 space-y-1">
{module.lessons.map((lesson, lessonIdx) => {
const key = `${slugify(module.title)}__${slugify(lesson)}`;
const isCompleted =
aiCourseProgress?.done.includes(key);
return (
<div
key={key}
className="flex cursor-pointer items-start rounded-md border border-gray-100 p-2 transition-colors hover:border-gray-300 hover:bg-blue-50"
onClick={() => {
setActiveModuleIndex(moduleIdx);
setActiveLessonIndex(lessonIdx);
// Expand only this module in the sidebar
setExpandedModules((prev) => {
const newState: Record<number, boolean> =
{};
// Set all modules to collapsed
course.modules.forEach((_, idx) => {
newState[idx] = false;
});
// Expand only the current module
newState[moduleIdx] = true;
return newState;
});
// Ensure sidebar is visible on mobile
setSidebarOpen(true);
setViewMode('module');
}}
>
{!isCompleted && (
<span
className={cn(
'mr-2 mt-0.5 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700',
)}
>
{lessonIdx + 1}
</span>
)}
{isCompleted && (
<CheckIcon additionalClasses="size-6 mt-0.5 mr-2 flex-shrink-0 text-green-500" />
)}
<p className="flex-1 pt-0.5 text-gray-700">
{lesson}
</p>
<span className="text-sm font-medium text-blue-600">
View →
</span>
</div>
);
})}
</div>
</div>
</div>
))}
);
})}
</div>
) : (
<div className="flex h-64 items-center justify-center">

101
src/components/GenerateCourse/AICourseModuleList.tsx
Unescape View File

@ -1,10 +1,20 @@
import { type Dispatch, type SetStateAction, useState } from 'react';
import type { AiCourse } from '../../lib/ai';
import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
import {
CheckCircleIcon,
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';
type AICourseModuleListProps = {
course: AiCourse;
courseSlug?: string;
activeModuleIndex: number;
setActiveModuleIndex: (index: number) => void;
activeLessonIndex: number;
@ -22,6 +32,7 @@ type AICourseModuleListProps = {
export function AICourseModuleList(props: AICourseModuleListProps) {
const {
course,
courseSlug,
activeModuleIndex,
setActiveModuleIndex,
activeLessonIndex,
@ -32,6 +43,11 @@ export function AICourseModuleList(props: AICourseModuleListProps) {
setExpandedModules,
} = props;
const { data: aiCourseProgress } = useQuery(
getAiCourseProgressOptions({ aiCourseSlug: courseSlug || '' }),
queryClient,
);
const toggleModule = (index: number) => {
setExpandedModules((prev) => {
// If this module is already expanded, collapse it
@ -54,6 +70,8 @@ export function AICourseModuleList(props: AICourseModuleListProps) {
});
};
const { done = [] } = aiCourseProgress || {};
return (
<nav className="space-y-1 px-2">
{course.modules.map((module, moduleIdx) => (
@ -85,43 +103,52 @@ export function AICourseModuleList(props: AICourseModuleListProps) {
{/* Lessons */}
{expandedModules[moduleIdx] && (
<div className="ml-8 mt-1 space-y-1">
{module.lessons.map((lesson, lessonIdx) => (
<button
key={lessonIdx}
onClick={() => {
setActiveModuleIndex(moduleIdx);
setActiveLessonIndex(lessonIdx);
// Expand only this module in the sidebar
setExpandedModules((prev) => {
const newState: Record<number, boolean> = {};
// Set all modules to collapsed
course.modules.forEach((_, idx) => {
newState[idx] = false;
{module.lessons.map((lesson, lessonIdx) => {
const key = `${slugify(module.title)}__${slugify(lesson)}`;
const isCompleted = done.includes(key);
return (
<button
key={key}
onClick={() => {
setActiveModuleIndex(moduleIdx);
setActiveLessonIndex(lessonIdx);
// Expand only this module in the sidebar
setExpandedModules((prev) => {
const newState: Record<number, boolean> = {};
// Set all modules to collapsed
course.modules.forEach((_, idx) => {
newState[idx] = false;
});
// Expand only the current module
newState[moduleIdx] = true;
return newState;
});
// Expand only the current module
newState[moduleIdx] = true;
return newState;
});
// Ensure sidebar is visible on mobile
setSidebarOpen(true);
setViewMode('module');
}}
className={cn(
'flex w-full items-start rounded-md px-3 py-2 text-left text-sm',
activeModuleIndex === moduleIdx &&
activeLessonIndex === lessonIdx
? 'bg-gray-800 text-white'
: 'text-gray-600 hover:bg-gray-50',
)}
>
<span className="relative top-[2px] mr-2 flex-shrink-0 text-xs">
{lessonIdx + 1}.
</span>
<span className="break-words">
{lesson?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
</span>
</button>
))}
// Ensure sidebar is visible on mobile
setSidebarOpen(true);
setViewMode('module');
}}
className={cn(
'flex w-full items-start rounded-md px-3 py-2 text-left text-sm',
activeModuleIndex === moduleIdx &&
activeLessonIndex === lessonIdx
? 'bg-gray-800 text-white'
: 'text-gray-600 hover:bg-gray-50',
)}
>
{isCompleted ? (
<CheckIcon additionalClasses="size-3.5 relative top-[2px] mr-2 flex-shrink-0 text-green-500" />
) : (
<span className="relative top-[2px] mr-2 flex-shrink-0 text-xs">
{lessonIdx + 1}.
</span>
)}
<span className="break-words">
{lesson?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
</span>
</button>
);
})}
</div>
)}
</div>

22
src/components/GenerateCourse/AICourseModuleView.tsx
Unescape View File

@ -4,10 +4,11 @@ import { useEffect, useState } from 'react';
import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
import { readAICourseLessonStream } from '../../helper/read-stream';
import { markdownToHtml } from '../../lib/markdown';
import { useMutation } from '@tanstack/react-query';
import { useMutation, useQuery } from '@tanstack/react-query';
import { queryClient } from '../../stores/query-client';
import { httpPost } from '../../lib/query-http';
import { slugify } from '../../lib/slugger';
import { getAiCourseProgressOptions } from '../../queries/ai-course';
type AICourseModuleViewProps = {
courseSlug: string;
@ -43,6 +44,13 @@ export function AICourseModuleView(props: AICourseModuleViewProps) {
const [error, setError] = useState('');
const [lessonHtml, setLessonHtml] = useState('');
const { data: aiCourseProgress } = useQuery(
getAiCourseProgressOptions({ aiCourseSlug: courseSlug || '' }),
queryClient,
);
const lessonId = `${slugify(currentModuleTitle)}__${slugify(currentLessonTitle)}`;
const isLessonDone = aiCourseProgress?.done.includes(lessonId);
const generateAiCourseContent = async () => {
setIsLoading(true);
@ -114,13 +122,9 @@ export function AICourseModuleView(props: AICourseModuleViewProps) {
const { mutate: markAsDone, isPending: isMarkingAsDone } = useMutation(
{
mutationFn: () => {
const lessonId = `${slugify(currentModuleTitle)}__${slugify(currentLessonTitle)}`;
return httpPost(
`${import.meta.env.PUBLIC_API_URL}/v1-mark-as-done-ai-lesson/${courseSlug}`,
{
lessonId: lessonId,
},
);
return httpPost(`/v1-mark-as-done-ai-lesson/${courseSlug}`, {
lessonId,
});
},
},
queryClient,
@ -162,7 +166,7 @@ export function AICourseModuleView(props: AICourseModuleViewProps) {
</div>
)}
{!isGenerating && !isLoading && (
{!isGenerating && !isLoading && !isLessonDone && (
<button
className="rounded-md bg-blue-500 px-4 py-1 text-white hover:bg-blue-600 disabled:opacity-50"
disabled={isMarkingAsDone}

1
src/components/GenerateCourse/GenerateAICourse.tsx
Unescape View File

@ -182,6 +182,7 @@ export function GenerateAICourse(props: GenerateAICourseProps) {
courseSlug={courseSlug}
course={course}
isLoading={isLoading}
error={error}
/>
);
}

58
src/components/GenerateCourse/GetAICourse.tsx
Unescape View File

@ -0,0 +1,58 @@
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';
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,
},
queryClient,
);
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}
/>
);
}

4
src/pages/ai-tutor/[courseSlug].astro
Unescape View File

@ -1,5 +1,5 @@
---
import { AICourseContent } from '../../components/GenerateCourse/AICourseContent';
import { GetAICourse } from '../../components/GenerateCourse/GetAICourse';
import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
export const prerender = false;
@ -18,5 +18,5 @@ const { courseSlug } = Astro.params as Params;
keywords={['ai', 'tutor', 'education', 'learning']}
canonicalUrl={`/ai-tutor/${courseSlug}`}
>
<AICourseContent client:load slug={courseSlug} />
<GetAICourse client:load courseSlug={courseSlug} />
</SkeletonLayout>

34
src/queries/ai-course.ts
Unescape View File

@ -31,3 +31,37 @@ export function getAiCourseProgressOptions(params: GetAICourseProgressParams) {
enabled: !!params.aiCourseSlug && isLoggedIn(),
};
}
type GetAICourseParams = {
aiCourseSlug: string;
};
export interface AICourseDocument {
_id: string;
userId: string;
title: string;
slug?: string;
keyword: string;
difficulty: string;
data: string;
viewCount: number;
createdAt: Date;
updatedAt: Date;
}
type GetAICourseBody = {};
type GetAICourseQuery = {};
type GetAICourseResponse = AICourseDocument;
export function getAiCourseOptions(params: GetAICourseParams) {
return {
queryKey: ['ai-course', params],
queryFn: () => {
return httpGet<GetAICourseResponse>(
`/v1-get-ai-course/${params.aiCourseSlug}`,
);
},
};
}

Write Preview
Loading…
Cancel
Save