Merge pull request #916 from ToposInstitute/kb/fix-help-links

Fix help links in descriptions not navigating correctly

Author: epatters

packages/frontend/src/help/guide.tsx

@@ -1,5 +1,5 @@
 import { useParams } from "@solidjs/router";
-import { lazy } from "solid-js";
+import { createResource, Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
 
 import { guidesList } from "./guides";
@@ -14,19 +14,27 @@ export default function GuideHelpPage() {
 export function GuideHelp(props: { id?: string }) {
     // Note that guide should never be undefined, due to existingGuideFilter
     // in routes.ts
-    const guide = guidesList.find((item) => item.id === props.id);
+    const guide = () => guidesList.find((item) => item.id === props.id);
+
+    const [content] = createResource(
+        () => props.id,
+        async (guideId) => {
+            if (!guideId) {
+                return null;
+            }
+            return await import(`./guide/${guideId}.mdx`);
+        },
+    );
 
     return (
         <>
             <h1>
-                <a href="/help/guides/">Guides</a> / {guide?.title}
+                <a href="/help/guides/">Guides</a> / {guide()?.title}
             </h1>
             <p>
-                <i>{guide?.description}</i>
+                <i>{guide()?.description}</i>
             </p>
-            <Dynamic component={helpGuideContent(props.id)} />
+            <Show when={content()}>{(module) => <Dynamic component={module().default} />}</Show>
         </>
     );
 }
-
-const helpGuideContent = (id?: string) => lazy(() => import(`./guide/${id}.mdx`));

packages/frontend/src/help/logic_help_detail.tsx

@@ -22,13 +22,16 @@ export default function LogicHelpPage() {
 }
 
 function LogicHelpDetail(props: { theory: Theory }) {
-    const Content = lazy(async () => {
-        try {
-            return await import(`./logics/${props.theory.id}.mdx`);
-        } catch {
-            return { default: LogicHelpNotFound };
-        }
-    });
+    const [content] = createResource(
+        () => props.theory.id,
+        async (theoryId) => {
+            try {
+                return await import(`./logics/${theoryId}.mdx`);
+            } catch {
+                return { default: LogicHelpNotFound };
+            }
+        },
+    );
 
     return (
         <>
@@ -73,7 +76,9 @@ function LogicHelpDetail(props: { theory: Theory }) {
                     </Show>
                 </div>
             </Show>
-            <Content theory={props.theory} />
+            <Show when={content()}>
+                {(module) => <Dynamic component={module().default} theory={props.theory} />}
+            </Show>
         </>
     );
 }