diff --git a/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx b/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx
index 17fff4e89..98a6e5d41 100644
--- 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 (
);
diff --git a/frontend/app/component/form/polling_station_choice/PollingStationSelector.tsx b/frontend/app/component/form/polling_station_choice/PollingStationSelector.tsx
index 7a7a993a6..30885a8af 100644
--- 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("");
- 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 (
-
- aan het zoeken …
-
- );
+ } else if (pollingStationsLoading) {
+ return aan het zoeken …
;
} else if (currentPollingStation) {
- return (
-
- {currentPollingStation.name}
-
- )
- } else if (currentPollingStation === undefined) {
- return (
-
- Geen stembureau gevonden met nummer {pollingStationNumber}
-
- );
+ return {currentPollingStation.name}
;
+ } else {
+ return Geen stembureau gevonden met nummer {pollingStationNumber}
;
}
})()}
diff --git a/frontend/app/module/input/InputLayout.tsx b/frontend/app/module/input/InputLayout.tsx
index 0077ffe59..1ef545386 100644
--- 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 (
-
-
+
+
+
-
+
-
-
+
+
+
);
}
diff --git a/frontend/lib/api/PollingStationProvider.tsx b/frontend/lib/api/PollingStationProvider.tsx
new file mode 100644
index 000000000..eadc00ac2
--- /dev/null
+++ 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({
+ pollingStationsLoading: true,
+ pollingStations: [],
+});
+
+export interface PollingStationProviderProps {
+ electionId: number;
+ children: React.ReactNode;
+}
+
+export function PollingStationProvider({ electionId, children }: PollingStationProviderProps) {
+ const { data, loading } = usePollingStationListRequest({ election_id: electionId });
+
+ return (
+
+ {children}
+
+ );
+}
diff --git a/frontend/lib/api/gen/openapi.ts b/frontend/lib/api/gen/openapi.ts
index 9b04592da..eda106204 100644
--- 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
index 6d475422f..d42907d27 100644
--- 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
index de00e8a1b..9f1cd0e2f 100644
--- 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(`/api/polling_stations/${params.election_id}`);
+ return useApiGetRequest(
+ `/api/polling_stations/${params.election_id}`,
+ );
}