Added polling station provider

kiesraad · Jul 17, 2024 · ff4eead · ff4eead
1 parent dc7b335
commit ff4eead
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 74 deletions.
diff --git a/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx b/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx
@@ -1,8 +1,9 @@
 import { Badge, BottomBar, Button } from "@kiesraad/ui";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { IconChevronRight } from "@kiesraad/icon";
-import { usePollingStationListRequest } from "@kiesraad/api";
+import { PollingStation, PollingStationsContext } from "@kiesraad/api";
 import { PollingStationSelector } from "./PollingStationSelector";
+import { useContext } from "react";
 
 interface FormElements extends HTMLFormControlsCollection {
   number: HTMLInputElement;
@@ -13,13 +14,10 @@ interface PollingStationChoiceFormElement extends HTMLFormElement {
 }
 
 export function PollingStationChoiceForm() {
-  const { id } = useParams();
   const navigate = useNavigate();
-  const pollingStations = usePollingStationListRequest({
-    //election_id: parseInt(id || ""),
-    election_id: 1, // TODO
-  });
-
+
+  const { pollingStations, pollingStationsLoading } = useContext(PollingStationsContext);
+
   const handleRowClick = (pollingStationNumber: number) => () => {
     navigate(`./${pollingStationNumber}`);
   };
@@ -31,7 +29,7 @@ export function PollingStationChoiceForm() {
   return (
     <form onSubmit={handleSubmit}>
       <h2 className="form_title">Welk stembureau ga je invoeren?</h2>
-      <PollingStationSelector />      
+      <PollingStationSelector />
       <p className="md">
         Klopt de naam van het stembureau met de naam op je papieren proces verbaal?
         <br />
@@ -54,33 +52,39 @@ export function PollingStationChoiceForm() {
           </p>
         </summary>
         <h2 className="form_title table_title">Kies het stembureau</h2>
-        <table id="polling_station_list" className="overview_table">
-          <thead>
-            <tr>
-              <th className="align-center">Nummer</th>
-              <th>Stembureau</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            {pollingStations.data?.polling_stations.map((pollingStation: any) => (
-              <tr onClick={handleRowClick(pollingStation.number)} key={pollingStation.number}>
-                <td width="6.5rem" className="number">
-                  {pollingStation.number}
-                </td>
-                <td>
-                  <span>{pollingStation.name}</span>
-                  <Badge type="first_entry" />
-                </td>
-                <td width="5rem">
-                  <div className="link">
-                    <IconChevronRight />
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        {pollingStationsLoading ? (
+          <div>aan het zoeken …</div>
+        ) : (
+          <>
+            <table id="polling_station_list" className="overview_table">
+              <thead>
+                <tr>
+                  <th className="align-center">Nummer</th>
+                  <th>Stembureau</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {pollingStations.map((pollingStation: PollingStation) => (
+                  <tr onClick={handleRowClick(pollingStation.number)} key={pollingStation.number}>
+                    <td width="6.5rem" className="number">
+                      {pollingStation.number}
+                    </td>
+                    <td>
+                      <span>{pollingStation.name}</span>
+                      <Badge type="first_entry" />
+                    </td>
+                    <td width="5rem">
+                      <div className="link">
+                        <IconChevronRight />
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </>
+        )}
       </details>
     </form>
   );

diff --git a/frontend/app/component/form/polling_station_choice/PollingStationSelector.tsx b/frontend/app/component/form/polling_station_choice/PollingStationSelector.tsx
@@ -1,23 +1,20 @@
-import { PollingStation, usePollingStationListRequest } from "@kiesraad/api";
+import { PollingStation, PollingStationsContext } from "@kiesraad/api";
 import { InputField } from "@kiesraad/ui";
-import { useMemo, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 
 export function PollingStationSelector() {
   const [pollingStationNumber, setPollingStationNumber] = useState<string>("");
-  const pollingStations = usePollingStationListRequest({
-    //election_id: parseInt(id || ""),
-    election_id: 1, // TODO
-  });
+  const { pollingStations, pollingStationsLoading } = useContext(PollingStationsContext);
 
   const currentPollingStation = useMemo(() => {
     const parsedInt = parseInt(pollingStationNumber, 10);
     if (Number.isNaN(parsedInt)) {
       return undefined;
     }
-    
-    return pollingStations.data?.polling_stations
-      .find((pollingStation: PollingStation) => pollingStation.number === parsedInt);
-
+
+    return pollingStations.find(
+      (pollingStation: PollingStation) => pollingStation.number === parsedInt,
+    );
   }, [pollingStationNumber, pollingStations]);
 
   return (
@@ -32,29 +29,19 @@ export function PollingStationSelector() {
         pattern="\d+"
         title="Alleen positieve nummers toegestaan"
         maxLength={6}
-        onChange={(e) => setPollingStationNumber(e.target.value)}
+        onChange={(e) => {
+          setPollingStationNumber(e.target.value);
+        }}
       />
       {(() => {
-        if (pollingStationNumber === "") {
+        if (pollingStationNumber.trim() === "") {
           return null;
-        } else if (pollingStations.loading) {
-          return (
-            <div>
-              aan het zoeken …
-            </div>
-          );
+        } else if (pollingStationsLoading) {
+          return <div>aan het zoeken …</div>;
         } else if (currentPollingStation) {
-          return (
-            <div>
-              {currentPollingStation.name}
-            </div>
-          )
-        } else if (currentPollingStation === undefined) {
-          return (
-            <div>
-              Geen stembureau gevonden met nummer {pollingStationNumber}
-            </div>
-          );
+          return <div>{currentPollingStation.name}</div>;
+        } else {
+          return <div>Geen stembureau gevonden met nummer {pollingStationNumber}</div>;
         }
       })()}
     </div>

diff --git a/frontend/app/module/input/InputLayout.tsx b/frontend/app/module/input/InputLayout.tsx
@@ -1,14 +1,18 @@
 import { Footer } from "app/component/footer/Footer";
-import { Outlet } from "react-router-dom";
+import { PollingStationProvider } from "@kiesraad/api";
+import { Outlet, useParams } from "react-router-dom";
 
 export function InputLayout() {
+  const { electionId } = useParams();
   return (
-    <div className="app-layout">
-      <nav>Hello world</nav>
+    <PollingStationProvider electionId={parseInt(electionId ?? "", 10)}>
+      <div className="app-layout">
+        <nav>Hello world</nav>
 
-      <Outlet />
+        <Outlet />
 
-      <Footer />
-    </div>
+        <Footer />
+      </div>
+    </PollingStationProvider>
   );
 }
diff --git a/frontend/lib/api/PollingStationProvider.tsx b/frontend/lib/api/PollingStationProvider.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+import { PollingStation } from "./gen/openapi";
+import { usePollingStationListRequest } from "./usePollingStation";
+
+export interface iPollingStationsContext {
+  pollingStationsLoading: boolean;
+  pollingStations: PollingStation[];
+}
+
+export const PollingStationsContext = React.createContext<iPollingStationsContext>({
+  pollingStationsLoading: true,
+  pollingStations: [],
+});
+
+export interface PollingStationProviderProps {
+  electionId: number | undefined;
+  children: React.ReactNode;
+}
+
+export function PollingStationProvider({ electionId, children }: PollingStationProviderProps) {
+  const { data, loading } = usePollingStationListRequest({ election_id: electionId as number });
+
+  return (
+    <PollingStationsContext.Provider
+      value={{
+        pollingStationsLoading: loading,
+        pollingStations: data?.polling_stations ?? [],
+      }}
+    >
+      {children}
+    </PollingStationsContext.Provider>
+  );
+}
diff --git a/frontend/lib/api/gen/openapi.ts b/frontend/lib/api/gen/openapi.ts
@@ -16,8 +16,7 @@ export type ELECTION_DETAILS_REQUEST_PATH = `/api/elections/${number}`;
 export interface POLLING_STATION_LIST_REQUEST_PARAMS {
   election_id: number;
 }
-export type POLLING_STATION_LIST_REQUEST_PATH =
-  `/api/polling_stations/${number}`;
+export type POLLING_STATION_LIST_REQUEST_PATH = `/api/polling_stations/${number}`;
 
 // /api/polling_stations/{polling_station_id}/data_entries/{entry_number}
 export interface POLLING_STATION_DATA_ENTRY_REQUEST_PARAMS {

diff --git a/frontend/lib/api/index.ts b/frontend/lib/api/index.ts
@@ -3,6 +3,7 @@ export * from "./gen/openapi";
 export type * from "./api.d.ts";
 export * from "./ApiClient";
 export * from "./ApiProvider";
+export * from "./PollingStationProvider";
 export * from "./useApiGetRequest";
 export * from "./useApiPostRequest";
 export * from "./useElectionDataRequest";

diff --git a/frontend/lib/api/usePollingStation.ts b/frontend/lib/api/usePollingStation.ts
@@ -2,5 +2,7 @@ import { useApiGetRequest } from "./useApiGetRequest";
 import { POLLING_STATION_LIST_REQUEST_PARAMS, PollingStationListResponse } from "./gen/openapi";
 
 export function usePollingStationListRequest(params: POLLING_STATION_LIST_REQUEST_PARAMS) {
-  return useApiGetRequest<PollingStationListResponse>(`/api/polling_stations/${params.election_id}`);
+  return useApiGetRequest<PollingStationListResponse>(
+    `/api/polling_stations/${params.election_id}`,
+  );
 }