diff --git a/src/client/pages/HLI/HLI.hooks.tsx b/src/client/pages/HLI/HLI.hooks.tsx index f01aba485..3fa603c3c 100644 --- a/src/client/pages/HLI/HLI.hooks.tsx +++ b/src/client/pages/HLI/HLI.hooks.tsx @@ -1,39 +1,31 @@ -import { atom, useRecoilState } from 'recoil'; -import useSWRMutation from 'swr/dist/mutation'; +import { HttpStatusCode } from 'axios'; +import { useSWRConfig } from 'swr'; +import useSWRMutation from 'swr/mutation'; -import { StadspasFrontend } from '../../../server/services/hli/stadspas-types'; import { useAppStateGetter } from '../../hooks/useAppState'; -type StadspasActiefByID = { - [id: string]: boolean; -}; - -const stadspasActiefAtom = atom({ - key: 'stadspasActief', - default: {}, -}); - export function useStadspassen() { const { HLI } = useAppStateGetter(); - const [stadspasActief, setStadspassenActiefStatus] = - useRecoilState(stadspasActiefAtom); - - const stadspassen: StadspasFrontend[] = (HLI.content?.stadspas || []).map( - (pas) => { - const stadspas = { - ...pas, - actief: stadspasActief[pas.id] ?? true, - }; - return stadspas; + const { cache } = useSWRConfig(); + + const stadspassen = (HLI.content?.stadspas || []).map((pas) => { + let cachedPas; + if (pas.blockPassURL) { + cachedPas = cache.get(pas.blockPassURL); } - ); - return [stadspassen, setStadspassenActiefStatus] as const; -} + const stadspas = { + ...pas, + actief: cachedPas?.data?.actief ?? pas.actief, + }; -export function useBlockStadspas(url: string | null, stadspasId: string) { - const setStadspassenActiefStatus = useStadspassen()[1]; + return stadspas; + }); + return [stadspassen] as const; +} + +export function useBlockStadspas(url: string | null) { return useSWRMutation( url, async (url) => { @@ -42,16 +34,17 @@ export function useBlockStadspas(url: string | null, stadspasId: string) { credentials: 'include', }); - if (!response.ok) { + if (response.status !== HttpStatusCode.Ok) { throw new Error('Request returned with an error'); } - setStadspassenActiefStatus((stadspasActiefState) => { - return { ...stadspasActiefState, [stadspasId]: false }; - }); - - return response; + return response.json(); }, - { revalidate: false, populateCache: false } + { + revalidate: false, + populateCache: (updatedStadspasResponse, stadspassen) => { + return { ...stadspassen, ...updatedStadspasResponse.content }; + }, + } ); } diff --git a/src/client/pages/HLI/HLIStadspas.tsx b/src/client/pages/HLI/HLIStadspas.tsx index 59ab5c136..955e31462 100644 --- a/src/client/pages/HLI/HLIStadspas.tsx +++ b/src/client/pages/HLI/HLIStadspas.tsx @@ -252,12 +252,16 @@ function BlockStadspas({ stadspas }: { stadspas: StadspasFrontend }) { } const [isModalOpen, setIsModalOpen] = useState(false); + const [showError, setShowError] = useState(false); const { error, isMutating, trigger } = useBlockStadspas( - stadspas.blockPassURL, - stadspas.id + stadspas.blockPassURL ); + if (error) { + setShowError(true); + } + if (isMutating) { return ; } @@ -272,12 +276,12 @@ function BlockStadspas({ stadspas }: { stadspas: StadspasFrontend }) { > Blokeer deze Stadspas - {error && ( + {showError && ( {}} + onClose={() => setShowError(false)} severity="error" > Probeer het later nog eens. Als dit niet lukt bel dan naar{' '} diff --git a/src/server/services/hli/stadspas-gpass-service.ts b/src/server/services/hli/stadspas-gpass-service.ts index 39f28a691..ca6ccf233 100644 --- a/src/server/services/hli/stadspas-gpass-service.ts +++ b/src/server/services/hli/stadspas-gpass-service.ts @@ -386,7 +386,7 @@ async function blockStadspas_( if (pas.actief) { throw Error('City pass is still active after trying to block it.'); } - return null; + return pas; }, });