pages-cms · ryangittings · Mar 12, 2025 · Mar 17, 2025 · Apr 8, 2025 · hunvreus
diff --git a/components/entry/entry-form.tsx b/components/entry/entry-form.tsx
@@ -62,9 +62,11 @@ import {
   restrictToParentElement
 } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
+import { Blocker } from "@/components/navigation-block";
 import { ChevronLeft, GripVertical, Loader, Plus, Trash2, Ellipsis } from "lucide-react";
 import { useConfig } from "@/contexts/config-context";
 import { toast } from "sonner";
+
 const SortableItem = ({
   id,
   type,
@@ -532,6 +534,7 @@ const EntryForm = ({
 
   return (
     <Form {...form}>
+      {isDirty && <Blocker />}
       <form onSubmit={form.handleSubmit(handleSubmit, handleError)}>
         <div className="max-w-screen-xl mx-auto flex w-full gap-x-8">
           <div className="flex-1 w-0">

diff --git a/components/link.tsx b/components/link.tsx
@@ -0,0 +1,44 @@
+'use client';
+import { startTransition } from 'react';
+import NextLink from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useIsBlocked } from './navigation-block';
+
+/**
+ * A custom Link component that wraps Next.js's next/link component.
+ */
+export function Link({
+  href,
+  children,
+  replace,
+  ...rest
+}: Parameters<typeof NextLink>[0]) {
+  const router = useRouter();
+  const isBlocked = useIsBlocked();
+
+  return (
+    <NextLink
+      href={href}
+      onClick={(e) => {
+        e.preventDefault();
+
+        // Cancel navigation
+        if (isBlocked && !window.confirm('Do you really want to leave?')) {
+          return;
+        }
+
+        startTransition(() => {
+          const url = href.toString();
+          if (replace) {
+            router.replace(url);
+          } else {
+            router.push(url);
+          }
+        });
+      }}
+      {...rest}
+    >
+      {children}
+    </NextLink>
+  );
+}
diff --git a/components/navigation-block.tsx b/components/navigation-block.tsx
@@ -0,0 +1,68 @@
+// components/navigation-block.tsx
+'use client';
+
+import {
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+
+const NavigationBlockerContext = createContext<
+  [isBlocked: boolean, setBlocked: Dispatch<SetStateAction<boolean>>]
+>([false, () => { }]);
+
+export function NavigationBlockerProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // [isBlocked, setBlocked]
+  const state = useState(false);
+  return (
+    <NavigationBlockerContext.Provider value={state}>
+      {children}
+    </NavigationBlockerContext.Provider>
+  );
+}
+
+export function useIsBlocked() {
+  const [isBlocked] = useContext(NavigationBlockerContext);
+  return isBlocked;
+}
+
+export function Blocker() {
+  const [isBlocked, setBlocked] = useContext(NavigationBlockerContext);
+  useEffect(() => {
+    setBlocked(() => {
+      return true;
+    });
+    return () => {
+      setBlocked(() => {
+        return false;
+      });
+    };
+  }, [isBlocked, setBlocked]);
+  return null;
+}
+
+export function BlockBrowserNavigation() {
+  const isBlocked = useIsBlocked();
+  useEffect(() => {
+    console.log({ isBlocked });
+    if (isBlocked) {
+      const showModal = (event: BeforeUnloadEvent) => {
+        event.preventDefault();
+      };
+
+      window.addEventListener('beforeunload', showModal);
+      return () => {
+        window.removeEventListener('beforeunload', showModal);
+      };
+    }
+  }, [isBlocked]);
+
+  return null;
+}
diff --git a/components/providers.tsx b/components/providers.tsx
@@ -4,20 +4,23 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { UserProvider } from "@/contexts/user-context";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { User } from "@/types/user";
+import { NavigationBlockerProvider, BlockBrowserNavigation } from "./navigation-block";
 
 export function Providers({ children, user }: { children: React.ReactNode, user: User | null }) {
   return (
-    <ThemeProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
-    >
-      <UserProvider user={user}>
-        <TooltipProvider>
-          {children}
-        </TooltipProvider>
-      </UserProvider>
-    </ThemeProvider>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <UserProvider user={user}>
+          <TooltipProvider>
+            <NavigationBlockerProvider>
+              {children}
+            </NavigationBlockerProvider>
+          </TooltipProvider>
+        </UserProvider>
+      </ThemeProvider>
   );
 }