Use elections api in frontend (#171)

kiesraad · Jul 24, 2024 · c653745 · c653745
1 parent 401f34b
commit c653745
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 87 deletions.
diff --git a/frontend/app/main.tsx b/frontend/app/main.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-import { ApiProvider, ElectionListProvider, ElectionProvider } from "@kiesraad/api";
+import { ApiProvider, ElectionListProvider } from "@kiesraad/api";
 
 // ignore in prod
 import { startMockAPI } from "./msw-mock-api.ts";
@@ -24,9 +24,7 @@ function render() {
     <StrictMode>
       <ApiProvider host={process.env.API_HOST || ""}>
         <ElectionListProvider>
-          <ElectionProvider>
-            <RouterProvider router={router} />
-          </ElectionProvider>
+          <RouterProvider router={router} />
         </ElectionListProvider>
       </ApiProvider>
     </StrictMode>,

diff --git a/frontend/app/module/ElectionLayout.tsx b/frontend/app/module/ElectionLayout.tsx
@@ -0,0 +1,12 @@
+import { Outlet, useParams } from "react-router-dom";
+
+import { ElectionProvider } from "@kiesraad/api";
+
+export function ElectionLayout() {
+  const { electionId } = useParams();
+  return (
+    <ElectionProvider electionId={parseInt(electionId ?? "", 10)}>
+      <Outlet />
+    </ElectionProvider>
+  );
+}
diff --git a/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx b/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx
@@ -10,7 +10,7 @@ describe("PollingStationLayout", () => {
   test("Enter form field values", () => {
     render(
       <ElectionListProvider>
-        <ElectionProvider>
+        <ElectionProvider electionId={1}>
           <PollingStationLayout />
         </ElectionProvider>
       </ElectionListProvider>,

diff --git a/frontend/app/module/overview/page/OverviewPage.tsx b/frontend/app/module/overview/page/OverviewPage.tsx
@@ -1,19 +1,17 @@
 import { useNavigate } from "react-router-dom";
 
-import {
-  IconCheckHeart,
-  IconCheckVerified,
-  IconChevronRight,
-  IconClock,
-  IconHourglass,
-} from "@kiesraad/icon";
+import { Election, useElectionList } from "@kiesraad/api";
+import { IconCheckHeart, IconChevronRight } from "@kiesraad/icon";
 import { WorkStationNumber } from "@kiesraad/ui";
 
 export function OverviewPage() {
   const navigate = useNavigate();
-  const handleRowClick = () => {
-    navigate(`/1/input`);
+  const handleRowClick = (election: Election) => {
+    return () => {
+      navigate(`/${election.id}/input`);
+    };
   };
+  const { electionList } = useElectionList();
 
   return (
     <>
@@ -37,66 +35,29 @@ export function OverviewPage() {
               </tr>
             </thead>
             <tbody>
-              <tr onClick={handleRowClick}>
-                <td>Provinciale Statenverkiezingen 2026</td>
-                <td>GSB - Juinen (045)</td>
-                <td>
-                  <div className="flex_overview">
-                    <IconHourglass />
-                    <span>Invoer opgeschort</span>
-                  </div>
-                </td>
-                <td className="link">
-                  <div className="link">
-                    <IconChevronRight />
-                  </div>
-                </td>
-              </tr>
-              <tr onClick={handleRowClick}>
-                <td>Waterschap Zeegraslanden 2026</td>
-                <td></td>
-                <td>
-                  <div className="flex_overview">
-                    <IconClock />
-                    <span>Wachten op coördinator</span>
-                  </div>
-                </td>
-                <td className="link">
-                  <div className="link">
-                    <IconChevronRight />
-                  </div>
-                </td>
-              </tr>
-              <tr onClick={handleRowClick}>
-                <td>Waterschap De Watervenen 2026</td>
-                <td></td>
-                <td>
-                  <div className="flex_overview">
-                    <IconCheckHeart />
-                    <span>Invoerders bezig</span>
-                  </div>
-                </td>
-                <td className="link">
-                  <div className="link">
-                    <IconChevronRight />
-                  </div>
-                </td>
-              </tr>
-              <tr onClick={handleRowClick}>
-                <td>Gemeenteraadsverkiezing 2026</td>
-                <td></td>
-                <td>
-                  <div className="flex_overview">
-                    <IconCheckVerified />
-                    <span>Steminvoer voltooid</span>
-                  </div>
-                </td>
-                <td className="link">
-                  <div className="link">
-                    <IconChevronRight />
-                  </div>
-                </td>
-              </tr>
+              {electionList.map((election) => (
+                <tr onClick={handleRowClick(election)} key={election.id}>
+                  <td>{election.name}</td>
+                  <td></td>
+                  <td>
+                    <div className="flex_overview">
+                      <IconCheckHeart />
+                      <span>Invoerders bezig</span>
+                      {/* TODO <IconHourglass />
+                      <span>Invoer opgeschort</span>
+                      <IconClock />
+                      <span>Wachten op coördinator</span>
+                      <IconCheckVerified />
+                      <span>Steminvoer voltooid</span> */}
+                    </div>
+                  </td>
+                  <td className="link">
+                    <div className="link">
+                      <IconChevronRight />
+                    </div>
+                  </td>
+                </tr>
+              ))}
             </tbody>
           </table>
         </article>

diff --git a/frontend/app/routes.tsx b/frontend/app/routes.tsx
@@ -1,5 +1,6 @@
 import { createRoutesFromElements, Route } from "react-router-dom";
 
+import { ElectionLayout } from "./module/ElectionLayout";
 import { HomePage } from "./module/HomePage";
 import {
   CandidatesVotesPage,
@@ -26,14 +27,16 @@ export const routes = createRoutesFromElements(
     <Route path="overview" element={<OverviewLayout />}>
       <Route index element={<OverviewPage />} />
     </Route>
-    <Route path=":electionId/input" element={<InputLayout />}>
-      <Route index element={<InputHomePage />} />
-      <Route path=":pollingStationId/" element={<PollingStationLayout />}>
-        <Route index path="recounted" element={<RecountedPage />} />
-        <Route path="numbers" element={<VotersAndVotesPage />} />
-        <Route path="differences" element={<DifferencesPage />} />
-        <Route path="list/:listNumber" element={<CandidatesVotesPage />} />
-        <Route path="save" element={<div>Placeholder Check and Save Page</div>} />
+    <Route path=":electionId" element={<ElectionLayout />}>
+      <Route path="input" element={<InputLayout />}>
+        <Route index element={<InputHomePage />} />
+        <Route path=":pollingStationId/" element={<PollingStationLayout />}>
+          <Route index path="recounted" element={<RecountedPage />} />
+          <Route path="numbers" element={<VotersAndVotesPage />} />
+          <Route path="differences" element={<DifferencesPage />} />
+          <Route path="list/:listNumber" element={<CandidatesVotesPage />} />
+          <Route path="save" element={<div>Placeholder Check and Save Page</div>} />
+        </Route>
       </Route>
     </Route>
   </Route>,

diff --git a/frontend/lib/api/election/ElectionProvider.tsx b/frontend/lib/api/election/ElectionProvider.tsx
@@ -2,7 +2,6 @@ import * as React from "react";
 
 import { Election } from "../gen/openapi";
 import { useElectionDataRequest } from "../useElectionDataRequest";
-import { useElectionList } from "./useElectionList";
 
 export interface iElectionProviderContext {
   election: Required<Election>;
@@ -14,13 +13,12 @@ export const ElectionProviderContext = React.createContext<iElectionProviderCont
 
 export interface ElectionProviderProps {
   children: React.ReactNode;
+  electionId: number;
 }
 
-export function ElectionProvider({ children }: ElectionProviderProps) {
-  const { electionList } = useElectionList();
-
+export function ElectionProvider({ children, electionId }: ElectionProviderProps) {
   const { data, loading } = useElectionDataRequest({
-    election_id: electionList.length && electionList[0] ? electionList[0].id : 0,
+    election_id: electionId,
   });
 
   if (loading) {