Implement beginner version of frontend roadmap

src/components/EditorRoadmap/EditorRoadmap.tsx

@@ -7,6 +7,8 @@ import { Spinner } from '../ReactIcons/Spinner';
 import type { ResourceType } from '../../lib/resource-progress';
 import { httpGet } from '../../lib/http';
 import { ProgressNudge } from '../FrameRenderer/ProgressNudge';
+import { getUrlParams } from '../../lib/browser.ts';
+import { cn } from '../../lib/classname.ts';
 
 type EditorRoadmapProps = {
   resourceId: string;
@@ -20,6 +22,7 @@ type EditorRoadmapProps = {
 export function EditorRoadmap(props: EditorRoadmapProps) {
   const { resourceId, resourceType = 'roadmap', dimensions } = props;
 
+  const [hasSwitchedRoadmap, setHasSwitchedRoadmap] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [roadmapData, setRoadmapData] = useState<
     Omit<RoadmapRendererProps, 'resourceId'> | undefined
@@ -27,9 +30,11 @@ export function EditorRoadmap(props: EditorRoadmapProps) {
 
   const loadRoadmapData = async () => {
     setIsLoading(true);
+    const { r: switchRoadmapId } = getUrlParams();
+
     const { response, error } = await httpGet<
       Omit<RoadmapRendererProps, 'resourceId'>
-    >(`/${resourceId}.json`);
+    >(`/${switchRoadmapId || resourceId}.json`);
 
     if (error) {
       console.error(error);
@@ -38,21 +43,28 @@ export function EditorRoadmap(props: EditorRoadmapProps) {
 
     setRoadmapData(response);
     setIsLoading(false);
+    setHasSwitchedRoadmap(!!switchRoadmapId);
   };
 
   useEffect(() => {
     loadRoadmapData().finally();
   }, [resourceId]);
 
+  const aspectRatio = dimensions.width / dimensions.height;
+
   if (!roadmapData || isLoading) {
     return (
       <div
         style={
-          {
+          !hasSwitchedRoadmap
-            '--aspect-ratio': dimensions.width / dimensions.height,
+            ? ({
-          } as CSSProperties
+                '--aspect-ratio': aspectRatio,
+              } as CSSProperties)
+            : undefined
+        }
+        className={
+          'flex aspect-[var(--aspect-ratio)] w-full flex-col justify-center'
         }
-        className="flex aspect-[var(--aspect-ratio)] w-full justify-center"
       >
         <div className="flex w-full justify-center">
           <Spinner
@@ -68,11 +80,13 @@ export function EditorRoadmap(props: EditorRoadmapProps) {
   return (
     <div
       style={
-        {
+        !hasSwitchedRoadmap
-          '--aspect-ratio': dimensions.width / dimensions.height,
+          ? ({
-        } as CSSProperties
+              '--aspect-ratio': aspectRatio,
+            } as CSSProperties)
+          : undefined
       }
-      className="flex aspect-[var(--aspect-ratio)] w-full justify-center"
+      className={'flex aspect-[var(--aspect-ratio)] w-full justify-center flex-col'}
     >
       <EditorRoadmapRenderer
         {...roadmapData}