first wokring prototype

src/features/campaigns/context/UnsavedChangesContext.tsx

@@ -0,0 +1,177 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+import Button from "../../../components/Button";
+
+type NavigationAction = () => void;
+
+type UnsavedChangesRegistration = {
+  title?: string;
+  message?: string;
+  onSave: () => boolean | Promise<boolean>;
+  onDiscard?: () => void;
+};
+
+type UnsavedChangesContextValue = {
+  hasUnsavedChanges: boolean;
+  registerUnsavedChanges: (registration: UnsavedChangesRegistration | null) => () => void;
+  requestNavigation: (action: NavigationAction) => void;
+};
+
+const UnsavedChangesContext = createContext<UnsavedChangesContextValue | null>(null);
+
+export function CampaignUnsavedChangesProvider({ children }: { children: ReactNode }) {
+  const navigate = useNavigate();
+  const [registration, setRegistration] = useState<UnsavedChangesRegistration | null>(null);
+  const [pendingAction, setPendingAction] = useState<NavigationAction | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState("");
+  const registrationRef = useRef<UnsavedChangesRegistration | null>(null);
+
+  useEffect(() => {
+    registrationRef.current = registration;
+  }, [registration]);
+
+  const hasUnsavedChanges = Boolean(registration);
+
+  const registerUnsavedChanges = useCallback((next: UnsavedChangesRegistration | null) => {
+    setRegistration(next);
+    return () => {
+      setRegistration((current) => current === next ? null : current);
+    };
+  }, []);
+
+  const proceed = useCallback((action: NavigationAction) => {
+    setPendingAction(null);
+    setSaveError("");
+    action();
+  }, []);
+
+  const requestNavigation = useCallback((action: NavigationAction) => {
+    const active = registrationRef.current;
+    if (!active) {
+      action();
+      return;
+    }
+    setSaveError("");
+    setPendingAction(() => action);
+  }, []);
+
+  useEffect(() => {
+    function onBeforeUnload(event: BeforeUnloadEvent) {
+      if (!registrationRef.current) return;
+      event.preventDefault();
+      event.returnValue = "";
+    }
+
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, []);
+
+  useEffect(() => {
+    function onDocumentClick(event: MouseEvent) {
+      if (!registrationRef.current) return;
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) return;
+
+      const target = event.target as Element | null;
+      const anchor = target?.closest?.("a[href]") as HTMLAnchorElement | null;
+      if (!anchor) return;
+      if (anchor.target && anchor.target !== "_self") return;
+      if (anchor.hasAttribute("download")) return;
+      if (anchor.getAttribute("href")?.startsWith("#")) return;
+
+      const destination = new URL(anchor.href, window.location.href);
+      const current = new URL(window.location.href);
+      if (destination.href === current.href) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      requestNavigation(() => {
+        if (destination.origin === current.origin) {
+          navigate(`${destination.pathname}${destination.search}${destination.hash}`);
+        } else {
+          window.location.assign(destination.href);
+        }
+      });
+    }
+
+    document.addEventListener("click", onDocumentClick, true);
+    return () => document.removeEventListener("click", onDocumentClick, true);
+  }, [navigate, requestNavigation]);
+
+  async function handleSaveAndLeave() {
+    const action = pendingAction;
+    const active = registrationRef.current;
+    if (!action || !active) return;
+
+    setSaving(true);
+    setSaveError("");
+    try {
+      const ok = await active.onSave();
+      if (!ok) {
+        setSaveError("The changes could not be saved. Please review the page message and try again.");
+        return;
+      }
+      proceed(action);
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function handleDiscardAndLeave() {
+    const action = pendingAction;
+    const active = registrationRef.current;
+    if (!action) return;
+    active?.onDiscard?.();
+    proceed(action);
+  }
+
+  const value = useMemo<UnsavedChangesContextValue>(() => ({
+    hasUnsavedChanges,
+    registerUnsavedChanges,
+    requestNavigation
+  }), [hasUnsavedChanges, registerUnsavedChanges, requestNavigation]);
+
+  return (
+    <UnsavedChangesContext.Provider value={value}>
+      {children}
+      {pendingAction && registration && (
+        <div className="overlay-backdrop" role="dialog" aria-modal="true">
+          <div className="modal-panel unsaved-changes-dialog">
+            <header className="modal-header">
+              <h2>{registration.title ?? "Unsaved campaign changes"}</h2>
+              <button className="modal-close" onClick={() => setPendingAction(null)} disabled={saving}>×</button>
+            </header>
+            <div className="modal-body">
+              <p>{registration.message ?? "This campaign page has unsaved changes. Save them before leaving, or discard the changes and continue."}</p>
+              {saveError && <div className="alert danger">{saveError}</div>}
+            </div>
+            <footer className="modal-footer unsaved-changes-actions">
+              <Button onClick={() => setPendingAction(null)} disabled={saving}>Cancel</Button>
+              <Button onClick={handleDiscardAndLeave} disabled={saving}>Discard</Button>
+              <Button variant="primary" onClick={handleSaveAndLeave} disabled={saving}>{saving ? "Saving…" : "Save and leave"}</Button>
+            </footer>
+          </div>
+        </div>
+      )}
+    </UnsavedChangesContext.Provider>
+  );
+}
+
+export function useCampaignUnsavedChanges() {
+  const context = useContext(UnsavedChangesContext);
+  if (!context) {
+    throw new Error("useCampaignUnsavedChanges must be used inside CampaignUnsavedChangesProvider");
+  }
+  return context;
+}
+
+export function useRegisterCampaignUnsavedChanges(registration: UnsavedChangesRegistration | null) {
+  const { registerUnsavedChanges } = useCampaignUnsavedChanges();
+
+  useEffect(() => {
+    return registerUnsavedChanges(registration);
+  }, [registerUnsavedChanges, registration]);
+}