merge-queue: embarking main (f012bfa) and #426 together

packages/primer-app/src/App.tsx

@@ -1,20 +1,56 @@
-// TODO this is very much a placeholder
-import { TreeReactFlow, tree1, tree4 } from "@hackworthltd/primer-components";
+import { TreeReactFlow, Error } from "@hackworthltd/primer-components";
 import "@hackworthltd/primer-components/style.css";
 import { useParams } from "react-router-dom";
+import { useGetApiProgram } from "./primer-api";
 
 const App = (): JSX.Element => {
   const params = useParams();
+  const session = params["sessionId"];
+
+  if (!session) {
+    return (
+      <Error string={"No session id parameter: " + JSON.stringify(params)} />
+    );
+  }
+  // This hook is *technically* conditional.
+  // But if the condition above fails, then the app is broken anyway.
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const queryRes = useGetApiProgram({ session });
+
+  if (!queryRes.isSuccess) {
+    return (
+      <Error
+        string={
+          "Failed to get program from backend: " +
+          JSON.stringify(queryRes.error)
+        }
+      />
+    );
+  }
+  const prog = queryRes.data;
+
+  const editableModules = prog.modules.filter((m) => m.editable);
+  if (editableModules.length > 1) {
+    return (
+      <Error
+        string={"Multiple editable modules: " + JSON.stringify(editableModules)}
+      />
+    );
+  }
+  const module = editableModules[0];
+  if (!module) {
+    return <Error string="No editable modules" />;
+  }
+  const trees = module.defs.flatMap((def) => def.term || []);
 
   return (
     <div>
-      {"Session: " + params["sessionId"]}
       <TreeReactFlow
-        trees={[tree1, tree4]}
-        width={1000}
+        trees={trees}
+        width={1500}
         height={800}
-        nodeWidth={100}
-        nodeHeight={40}
+        nodeWidth={200}
+        nodeHeight={100}
       ></TreeReactFlow>
     </div>
   );

packages/primer-components/src/Error/Error.stories.tsx

@@ -0,0 +1,13 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Error } from "./Error";
+
+export default {
+  title: "Application/Component Library/Error",
+  component: Error,
+} as ComponentMeta<typeof Error>;
+
+const Template: ComponentStory<typeof Error> = () => (
+  <Error string="some error message" />
+);
+
+export const Default = Template.bind({});

packages/primer-components/src/Error/Error.tsx

@@ -0,0 +1,9 @@
+import "@/index.css";
+
+export type ErrorProps = {
+  string: string;
+};
+
+export const Error = (p: ErrorProps): JSX.Element => (
+  <p className="mx-4">Error: {p.string}</p>
+);

packages/primer-components/src/Error/index.tsx

@@ -0,0 +1,3 @@
+import { Error } from "./Error";
+
+export default Error;

packages/primer-components/src/index.ts

@@ -2,6 +2,7 @@ export { default as ActionButton } from "@/ActionButton";
 export { default as ActionButtonList } from "@/ActionButtonList";
 export { default as Avatar } from "@/Avatar";
 export { default as BinaryTreePlaceholder } from "@/BinaryTreePlaceholder";
+export { default as Error } from "@/Error";
 export { default as FloatingToolbar } from "@/FloatingToolbar";
 export { default as GroupedButtonList } from "@/GroupedButtonList";
 export { default as NoMatch } from "@/NoMatch";