import { useFetch } from 'use-http'; import { useEffect, useRef, useState } from 'react'; import { Box, Container } from '@chakra-ui/react'; import { GlobalHeader } from '../../components/global-header'; import { OpensourceBanner } from '../../components/opensource-banner'; import { UpdatesBanner } from '../../components/updates-banner'; import { Footer } from '../../components/footer'; import { getAllRoadmaps, getRoadmapById, RoadmapType } from '../../lib/roadmap'; import Helmet from '../../components/helmet'; import { wireframeJSONToSVG } from '../../lib/renderer'; import { RoadmapPageHeader } from '../../components/roadmap/roadmap-page-header'; import { ContentDrawer } from '../../components/roadmap/content-drawer'; import { RoadmapError } from '../../components/roadmap/roadmap-error'; import { RoadmapLoader } from '../../components/roadmap/roadmap-loader'; type RoadmapProps = { roadmap: RoadmapType; }; function RoadmapRenderer(props: RoadmapProps) { const { roadmap } = props; const { loading: isLoading, error: hasErrorLoading, get } = useFetch(); const roadmapRef = useRef(null); const [isRendering, setIsRendering] = useState(true); const [roadmapJson, setRoadmapJson] = useState(null); const [groupId, setGroupId] = useState(''); const [hasErrorRendering, setHasErrorRendering] = useState(false); useEffect(() => { get(roadmap.jsonUrl) .then((roadmapJson) => { setRoadmapJson(roadmapJson); }) .catch((err) => { console.error(err); setHasErrorRendering(true); }); }, [get, roadmap.id, roadmap.jsonUrl]); // Event bindings for the roadmap interactivity useEffect(() => { function keydownListener(event: KeyboardEvent) { if (event.key.toLowerCase() === 'escape') { setGroupId(''); } } function clickListener(event: MouseEvent) { const targetGroup = (event?.target as HTMLElement)?.closest('g'); const groupId = targetGroup?.dataset?.groupId; if (!targetGroup || !groupId) { return; } if (groupId.startsWith('ext_link:')) { window.open(`https://${groupId.replace('ext_link:', '')}`); return; } // e.g. 100-internet:how-does-the-internet-work // will be translated to `internet:how-does-the-internet-work` setGroupId(groupId.replace(/^\d+-/, '')); } window.addEventListener('keydown', keydownListener); window.addEventListener('click', clickListener); return () => { window.removeEventListener('keydown', keydownListener); window.removeEventListener('click', clickListener); }; }, []); useEffect(() => { if (!roadmapJson) { return; } setIsRendering(true); wireframeJSONToSVG(roadmapJson) .then((svgElement) => { const container: HTMLElement = roadmapRef.current!; if (!container) { return; } if (container.firstChild) { container.removeChild(container.firstChild); } container.appendChild(svgElement); }) .catch((err) => { setHasErrorRendering(true); }) .finally(() => { setIsRendering(false); }); }, [roadmapJson]); if (hasErrorLoading || hasErrorRendering) { return } return ( {(isLoading || isRendering) && } setGroupId('')} />
); } export default function InteractiveRoadmap(props: RoadmapProps) { const { roadmap } = props; return (