From ff4eead3cba3dfddc7a1963bafc5457b285ea49b Mon Sep 17 00:00:00 2001 From: cikzh Date: Wed, 10 Jul 2024 17:05:51 +0200 Subject: [PATCH] Added polling station provider --- .../PollingStationChoiceForm.tsx | 76 ++++++++++--------- .../PollingStationSelector.tsx | 45 ++++------- frontend/app/module/input/InputLayout.tsx | 16 ++-- frontend/lib/api/PollingStationProvider.tsx | 33 ++++++++ frontend/lib/api/gen/openapi.ts | 3 +- frontend/lib/api/index.ts | 1 + frontend/lib/api/usePollingStation.ts | 4 +- 7 files changed, 104 insertions(+), 74 deletions(-) create mode 100644 frontend/lib/api/PollingStationProvider.tsx 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 (

Welk stembureau ga je invoeren?

- +

Klopt de naam van het stembureau met de naam op je papieren proces verbaal?
@@ -54,33 +52,39 @@ export function PollingStationChoiceForm() {

Kies het stembureau

- - - - - - - - - - {pollingStations.data?.polling_stations.map((pollingStation: any) => ( - - - - - - ))} - -
NummerStembureau
- {pollingStation.number} - - {pollingStation.name} - - -
- -
-
+ {pollingStationsLoading ? ( +
aan het zoeken …
+ ) : ( + <> + + + + + + + + + + {pollingStations.map((pollingStation: PollingStation) => ( + + + + + + ))} + +
NummerStembureau
+ {pollingStation.number} + + {pollingStation.name} + + +
+ +
+
+ + )} ); 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..c884c0a8f 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..8da6398c8 --- /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 | undefined; + children: React.ReactNode; +} + +export function PollingStationProvider({ electionId, children }: PollingStationProviderProps) { + const { data, loading } = usePollingStationListRequest({ election_id: electionId as number }); + + 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}`, + ); }