Moving on

Author: garronej

src/gdpr/ConsentBannerAndConsentManagement.tsx

@@ -269,7 +269,7 @@ function createConsentManagement<
 
         const [isProcessingChanges, setIsProcessingChanges] = useState(false);
 
-        const createOnAcceptOrRefuseAll =
+        const createButtonCallback =
             (type: "grantAll" | "denyAll" | "apply local changes") => async () => {
                 setIsProcessingChanges(true);
 
@@ -310,7 +310,7 @@ function createConsentManagement<
                                     <button
                                         title={t("accept all - title")}
                                         className={fr.cx("fr-btn")}
-                                        onClick={createOnAcceptOrRefuseAll("grantAll")}
+                                        onClick={createButtonCallback("grantAll")}
                                         disabled={isProcessingChanges}
                                     >
                                         {t("accept all")}
@@ -319,7 +319,7 @@ function createConsentManagement<
                                         title={t("refuse all - title")}
                                         className={fr.cx("fr-btn", "fr-btn--secondary")}
                                         disabled={isProcessingChanges}
-                                        onClick={createOnAcceptOrRefuseAll("denyAll")}
+                                        onClick={createButtonCallback("denyAll")}
                                     >
                                         {t("refuse all")}
                                     </button>
@@ -407,7 +407,11 @@ function createConsentManagement<
                         )}
                     >
                         <li>
-                            <button className={fr.cx("fr-btn")} disabled={isProcessingChanges}>
+                            <button
+                                className={fr.cx("fr-btn")}
+                                disabled={isProcessingChanges}
+                                onClick={createButtonCallback("apply local changes")}
+                            >
                                 Confirmer mes choix
                             </button>
                         </li>

src/gdpr/createGdprApi.ts

@@ -40,13 +40,6 @@ export function createGdprApi<
         return JSON.parse(serializedFinalityConsent);
     });
 
-    $finalityConsent.subscribe(finalityConsent => {
-        if (finalityConsent === undefined) {
-            return;
-        }
-        localStorage.setItem(localStorageKey, JSON.stringify(finalityConsent));
-    });
-
     const finalities = getFinalitiesFromFinalityDescription({
         "finalityDescription":
             typeof finalityDescription === "function"
@@ -58,7 +51,11 @@ export function createGdprApi<
         callback,
         finalities,
         "getFinalityConsent": () => $finalityConsent.current,
-        "setFinalityConsent": ({ finalityConsent }) => ($finalityConsent.current = finalityConsent)
+        "setFinalityConsent": ({ finalityConsent, prAllCallbacksRun }) => {
+            localStorage.setItem(localStorageKey, JSON.stringify(finalityConsent));
+
+            prAllCallbacksRun.then(() => ($finalityConsent.current = finalityConsent));
+        }
     });
 
     function useFinalityConsent() {

src/gdpr/processConsentChanges.ts

@@ -57,7 +57,10 @@ export function finalityConsentToChanges<Finality extends string>(params: {
 export function createProcessConsentChanges<Finality extends string>(params: {
     finalities: Finality[];
     getFinalityConsent: () => FinalityConsent<Finality> | undefined;
-    setFinalityConsent: (params: { finalityConsent: FinalityConsent<Finality> }) => void;
+    setFinalityConsent: (params: {
+        finalityConsent: FinalityConsent<Finality>;
+        prAllCallbacksRun: Promise<void>;
+    }) => void;
     callback: GdprConsentCallback<Finality> | undefined;
 }) {
     const { finalities, getFinalityConsent, setFinalityConsent, callback } = params;
@@ -149,16 +152,17 @@ export function createProcessConsentChanges<Finality extends string>(params: {
             });
         }
 
-        await Promise.all(
-            callbacks.map(callback =>
-                callback({
-                    finalityConsent,
-                    finalityConsent_prev
-                })
-            )
-        );
-
-        setFinalityConsent({ finalityConsent });
+        setFinalityConsent({
+            finalityConsent,
+            "prAllCallbacksRun": Promise.all(
+                callbacks.map(callback =>
+                    callback({
+                        finalityConsent,
+                        finalityConsent_prev
+                    })
+                )
+            ).then(() => undefined)
+        });
     };
 
     return { processConsentChanges, useRegisterCallback };

test/integration/next-appdir/app/gdpr.tsx

@@ -2,7 +2,12 @@
 
 import { createGdprApi } from "@codegouvfr/react-dsfr/gdpr";
 
-export const { ConsentBannerAndConsentManagement, useGdpr, FooterConsentManagementItem, FooterPersonalDataPolicyItem } = createGdprApi({
+export const { 
+    ConsentBannerAndConsentManagement, 
+    useGdpr, 
+    FooterConsentManagementItem, 
+    FooterPersonalDataPolicyItem 
+} = createGdprApi({
     "finalityDescription": ({ lang }) => ({
         "advertising": {
             "title": "Publicité",

test/integration/next-appdir/ui/ClientComponent.tsx

@@ -5,30 +5,12 @@ import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
-import { useGdpr } from "../app/gdpr";
 import { useIsModalOpen } from "@codegouvfr/react-dsfr/Modal/useIsModalOpen";
 
 export function ClientComponent() {
 
   const { isDark } = useIsDark();
 
-  const { finalityConsent } = useGdpr(
-    async ({ finalityConsent, finalityConsent_prev }) => {
-
-
-      console.log("Callback from hook", { finalityConsent, finalityConsent_prev });
-
-      await new Promise(resolve => setTimeout(resolve, 500));
-
-      console.log("done waiting");
-
-
-
-    }
-  );
-
-  console.log("=========>", { finalityConsent });
-
   const isModalOpen = useIsModalOpen(modal);
 
   //console.log(`Modal ${modal.id} is currently: ${isModalOpen ? "open" : "closed"}`);