diff --git a/src/components/TeamProgress/MemberProgressModal.tsx b/src/components/TeamProgress/MemberProgressModal.tsx index 09ff67389..4c09974ac 100644 --- a/src/components/TeamProgress/MemberProgressModal.tsx +++ b/src/components/TeamProgress/MemberProgressModal.tsx @@ -18,6 +18,9 @@ import { pageProgressMessage } from '../../stores/page'; import { MemberProgressModalHeader } from './MemberProgressModalHeader'; import { replaceChildren } from '../../lib/dom.ts'; import { XIcon } from 'lucide-react'; +import type { PageType } from '../CommandMenu/CommandMenu.tsx'; +import { renderFlowJSON } from '../../../editor/renderer/renderer.ts'; +import { getResourceMeta } from '../../lib/roadmap.ts'; export type ProgressMapProps = { member: TeamMember; @@ -88,14 +91,24 @@ export function MemberProgressModal(props: ProgressMapProps) { } async function renderResource(jsonUrl: string) { + const page = await getResourceMeta(resourceType, resourceId); + if (!page) { + toast.error('Resource not found'); + return; + } + + const renderer = page.renderer || 'balsamiq'; + const res = await fetch(jsonUrl, {}); const json = await res.json(); - const svg: SVGElement | null = await wireframeJSONToSVG(json, { - fontURL: '/fonts/balsamiq.woff2', - }); + const svg = + renderer === 'editor' + ? await renderFlowJSON(json as any) + : await wireframeJSONToSVG(json, { + fontURL: '/fonts/balsamiq.woff2', + }); replaceChildren(containerEl.current!, svg); - // containerEl.current?.replaceChildren(svg); } useKeydown('Escape', () => { @@ -136,10 +149,10 @@ export function MemberProgressModal(props: ProgressMapProps) { skipped = [], } = memberProgress; - done.forEach((id: string) => renderTopicProgress(id, 'done')); - learning.forEach((id: string) => renderTopicProgress(id, 'learning')); - skipped.forEach((id: string) => renderTopicProgress(id, 'skipped')); - removed.forEach((id: string) => renderTopicProgress(id, 'removed')); + done.forEach((id) => renderTopicProgress(id, 'done')); + learning.forEach((id) => renderTopicProgress(id, 'learning')); + skipped.forEach((id) => renderTopicProgress(id, 'skipped')); + removed.forEach((id) => renderTopicProgress(id, 'removed')); }) .catch((err) => { console.error(err); diff --git a/src/components/UserProgress/UserProgressModal.tsx b/src/components/UserProgress/UserProgressModal.tsx index e91bd34bb..6fd1eeba0 100644 --- a/src/components/UserProgress/UserProgressModal.tsx +++ b/src/components/UserProgress/UserProgressModal.tsx @@ -11,7 +11,6 @@ import { useAuth } from '../../hooks/use-auth'; import { ModalLoader } from './ModalLoader.tsx'; import { UserProgressModalHeader } from './UserProgressModalHeader'; import { X } from 'lucide-react'; -import type { PageType } from '../CommandMenu/CommandMenu.tsx'; import type { AllowedRoadmapRenderer } from '../../lib/roadmap.ts'; import { renderFlowJSON } from '../../../editor/renderer/renderer.ts'; diff --git a/src/lib/roadmap.ts b/src/lib/roadmap.ts index bac7dfefc..34b1d66ed 100644 --- a/src/lib/roadmap.ts +++ b/src/lib/roadmap.ts @@ -1,4 +1,7 @@ +import type { PageType } from '../components/CommandMenu/CommandMenu'; import type { MarkdownFileType } from './file'; +import { httpGet } from './http'; +import type { ResourceType } from './resource-progress'; export function resourceTitleFromId(id: string): string { if (id === 'devops') { @@ -150,3 +153,29 @@ export async function getRoadmapFaqsById(roadmapId: string): Promise { return faqs || []; } + +export async function getResourceMeta( + resourceType: ResourceType, + resourceId: string, +) { + const { error, response } = await httpGet(`/pages.json`); + if (error || !response) { + return null; + } + + const page = response.find((page) => { + if (resourceType === 'roadmap') { + return page.url === `/${resourceId}`; + } else if (resourceType === 'best-practice') { + return page.url === `/best-practices/${resourceId}`; + } + + return false; + }); + + if (!page) { + return null; + } + + return page; +}