diff --git a/src/components/Dashboard/PersonalDashboard.tsx b/src/components/Dashboard/PersonalDashboard.tsx index f3d0ad556..038d12aa1 100644 --- a/src/components/Dashboard/PersonalDashboard.tsx +++ b/src/components/Dashboard/PersonalDashboard.tsx @@ -7,8 +7,9 @@ import { ProjectProgress } from '../Activity/ProjectProgress'; import type { PageType } from '../CommandMenu/CommandMenu'; import { useToast } from '../../hooks/use-toast'; import { LoadingProgress } from './LoadingProgress'; -import { ArrowUpRight, Pencil } from 'lucide-react'; +import { ArrowUpRight, Pencil, Plus } from 'lucide-react'; import { MarkFavorite } from '../FeaturedItems/MarkFavorite'; +import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; type UserDashboardResponse = { name: string; @@ -43,6 +44,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) { const toast = useToast(); const [isLoading, setIsLoading] = useState(true); + const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false); const [projectDetails, setProjectDetails] = useState([]); const [personalDashboardDetails, setPersonalDashboardDetails] = useState(); @@ -98,22 +100,30 @@ export function PersonalDashboard(props: PersonalDashboardProps) { return () => window.removeEventListener('refresh-favorites', loadProgress); }, []); - const learningRoadmapsToShow = ( - personalDashboardDetails?.progresses || [] - ).sort((a, b) => { - const updatedAtA = new Date(a.updatedAt); - const updatedAtB = new Date(b.updatedAt); + const learningRoadmapsToShow = (personalDashboardDetails?.progresses || []) + .filter((progress) => !progress.isCustomResource) + .sort((a, b) => { + const updatedAtA = new Date(a.updatedAt); + const updatedAtB = new Date(b.updatedAt); - if (a.isFavorite && !b.isFavorite) { - return -1; - } + if (a.isFavorite && !b.isFavorite) { + return -1; + } - if (!a.isFavorite && b.isFavorite) { - return 1; - } + if (!a.isFavorite && b.isFavorite) { + return 1; + } - return updatedAtB.getTime() - updatedAtA.getTime(); - }); + return updatedAtB.getTime() - updatedAtA.getTime(); + }); + + const customRoadmaps = (personalDashboardDetails?.progresses || []) + .filter((progress) => progress.isCustomResource) + .sort((a, b) => { + const updatedAtA = new Date(a.updatedAt); + const updatedAtB = new Date(b.updatedAt); + return updatedAtB.getTime() - updatedAtA.getTime(); + }); const enrichedProjects = personalDashboardDetails?.projects @@ -150,6 +160,14 @@ export function PersonalDashboard(props: PersonalDashboardProps) { return (
+ {isCreatingRoadmap && ( + { + setIsCreatingRoadmap(false); + }} + /> + )} + {isLoading && (
)} @@ -225,6 +243,68 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
)} +

+ Custom Roadmaps +

+ {isLoading && } + {!isLoading && customRoadmaps.length > 0 && ( +
+ {customRoadmaps.map((roadmap) => { + const learningCount = roadmap.learning || 0; + const doneCount = roadmap.done || 0; + const totalCount = roadmap.total || 0; + const skippedCount = roadmap.skipped || 0; + + return ( + totalCount ? totalCount : doneCount} + learningCount={ + learningCount > totalCount ? totalCount : learningCount + } + totalCount={totalCount} + skippedCount={skippedCount} + resourceId={roadmap.resourceId} + resourceType={roadmap.resourceType} + updatedAt={roadmap.updatedAt} + title={roadmap.resourceTitle} + showActions={true} + roadmapSlug={roadmap.roadmapSlug} + /> + ); + })} + + +
+ )} +{!isLoading && customRoadmaps.length === 0 && ( +
+ No custom roadmaps found. + + Start  + + . + +
+ )} + +

My Projects

{isLoading && } {!isLoading && enrichedProjects.length > 0 && (