Working TOC

frontend/src/App.tsx

@@ -1,11 +1,12 @@
 import { useState } from "react";
 import Panel from "./components/Panel";
 
-import { useQuery } from "@tanstack/react-query";
+import { useQueries } from "@tanstack/react-query";
 import "./App.css";
 import ArticleSelector from "./components/ArticleSelector";
 import CelexSelector from "./components/CelexSelector";
-import { getArticleIds } from "./lib/api";
+import TOC from "./components/TOC";
+import { getArticleIds, getToc } from "./lib/api";
 import { Language } from "./lib/types";
 
 function App() {
@@ -16,21 +17,28 @@ function App() {
     null
   );
 
-  const {
-    data: articleIds,
-    isPending,
-    error,
-  } = useQuery({
-    queryKey: ["articleIds", celexId],
-    queryFn: () => getArticleIds(celexId),
-    enabled: !!celexId,
+  const results = useQueries({
+    queries: [
+      {
+        queryKey: ["articleIds", celexId],
+        queryFn: () => getArticleIds(celexId),
+        enabled: !!celexId,
+      },
+      {
+        queryKey: ["toc", celexId],
+        queryFn: () => getToc(celexId, Language.ENG),
+        enabled: !!celexId,
+      },
+    ],
   });
+  const isPending = results.some((result) => result.isPending);
+  const error = results.find((result) => result.isError);
 
   if (isPending) {
     return <div>Loading...</div>;
   }
   if (error) {
-    return <div>Error: {error.message}</div>;
+    return <div>Error: {error.error?.message}</div>;
   }
 
   const examples = [
@@ -62,7 +70,7 @@ function App() {
         </div>
         <CelexSelector defaultId={celexId} onSelected={setCelexId} />
         <ArticleSelector
-          articleIds={articleIds}
+          articleIds={results[0].data!}
           selectedId={selectedArticle}
           onSelected={setSelectedArticle}
         />
@@ -71,6 +79,11 @@ function App() {
         </button>
       </div>
       <div className="panel-container">
+        <TOC
+          toc={results[1].data!}
+          selectedArticleId={selectedArticle}
+          onArticleSelected={setSelectedArticle}
+        />
         {Array.from({ length: numPanels }, (_, index) => (
           <Panel
             key={index}