use cache instead of atom, but does not rerender when updating cache

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<StadspasActiefByID>({
-  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 };
+      },
+    }
   );
 }

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 <Spinner></Spinner>;
   }
@@ -272,12 +276,12 @@ function BlockStadspas({ stadspas }: { stadspas: StadspasFrontend }) {
       >
         Blokeer deze Stadspas
       </Button>
-      {error && (
+      {showError && (
         <Alert
           className={styles.ErrorAlert}
           heading="Fout bij het blokeren van de pas"
           closeable={true}
-          onClose={() => {}}
+          onClose={() => setShowError(false)}
           severity="error"
         >
           Probeer het later nog eens. Als dit niet lukt bel dan naar{' '}

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;
     },
   });