import React, { useState, useEffect } from 'react'; import { ProgressBar } from 'primereact/progressbar'; import { Accordion, AccordionTab } from 'primereact/accordion'; import { useSession } from 'next-auth/react'; const UserProgress = () => { const [progress, setProgress] = useState(0); const [currentTier, setCurrentTier] = useState('Pleb'); const [expanded, setExpanded] = useState(null); const [completedCourses, setCompletedCourses] = useState([]); const [tasks, setTasks] = useState([]); const { data: session } = useSession(); useEffect(() => { if (session?.user) { const user = session.user; const ids = user?.userCourses.map(course => course?.completed ? course.courseId : null).filter(id => id !== null); setCompletedCourses(ids); generateTasks(ids); } }, [session]); const generateTasks = (completedCourseIds) => { const allTasks = [ { status: 'Create Account', completed: true, tier: 'Pleb', courseId: null }, { status: 'Complete PlebDevs Starter', completed: false, tier: 'New Dev', courseId: null, subTasks: [ { status: 'Connect GitHub', completed: false }, { status: 'Create First GitHub Repo', completed: false }, { status: 'Push Commit', completed: false } ] }, { status: 'Complete PlebDevs Course 1', completed: false, tier: 'Junior Dev', courseId: 'd20e2e9b-5123-4a91-b27f-d75ea1d5811e' }, { status: 'Complete PlebDevs Course 2', completed: false, tier: 'Plebdev', courseId: 'aa3b1641-ad2b-4ef4-9f0f-38951ae307b7' }, ]; const updatedTasks = allTasks.map(task => ({ ...task, completed: task.courseId === null || completedCourseIds.includes(task.courseId), subTasks: task.subTasks ? task.subTasks.map(subTask => ({ ...subTask, completed: completedCourseIds.includes(task.courseId) })) : undefined })); setTasks(updatedTasks); }; const getProgress = async () => { return 10; }; const getCurrentTier = async () => { return 'Pleb'; }; useEffect(() => { const fetchProgress = async () => { const progress = await getProgress(); const currentTier = await getCurrentTier(); setProgress(progress); setCurrentTier(currentTier); }; fetchProgress(); }, []); return (

Your Dev Journey

Track your progress from Pleb to Plebdev

Progress {progress}%
Current Tier: {currentTier}
} > ) : (
{task.completed ? (
) : (
{index + 1}
)} {task.status}
{task.tier}
)} ))} ); }; export default UserProgress;