feat(dashboard): Better form protection DX

novuhq · Feb 13, 2025 · 06d70fe · 06d70fe
1 parent ed827b2
commit 06d70fe
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 41 deletions.
diff --git a/apps/dashboard/src/components/subscribers/subscriber-drawer.tsx b/apps/dashboard/src/components/subscribers/subscriber-drawer.tsx
@@ -1,4 +1,3 @@
-import { FormProtection } from '@/components/form-protection';
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from '@/components/primitives/sheet';
 import { VisuallyHidden } from '@/components/primitives/visually-hidden';
 import { SubscriberTabs } from '@/components/subscribers/subscriber-tabs';
@@ -19,20 +18,11 @@ export const SubscriberDrawer = forwardRef<HTMLDivElement, SubscriberDrawerProps
   // Use the forwarded ref if it exists, otherwise use localRef
   const ref = (forwardedRef || localRef) as React.RefObject<HTMLDivElement>;
 
-  const { showAlert, setShowAlert, isFormDirty } = useFormProtection(ref);
+  const { protectedOnOpenChange, ProtectionAlert } = useFormProtection({ ref, onOpenChange });
 
   return (
     <>
-      <Sheet
-        modal={false}
-        open={open}
-        onOpenChange={(open) => {
-          if (isFormDirty) {
-            return setShowAlert(true);
-          }
-          onOpenChange(open);
-        }}
-      >
+      <Sheet modal={false} open={open} onOpenChange={protectedOnOpenChange}>
         {/* Custom overlay since SheetOverlay does not work with modal={false} */}
         <div
           className={cn('fade-in animate-in fixed inset-0 z-50 bg-black/20 transition-opacity duration-300', {
@@ -48,7 +38,7 @@ export const SubscriberDrawer = forwardRef<HTMLDivElement, SubscriberDrawerProps
         </SheetContent>
       </Sheet>
 
-      <FormProtection onClose={() => onOpenChange(false)} showAlert={showAlert} setShowAlert={setShowAlert} />
+      <ProtectionAlert />
     </>
   );
 });

diff --git a/apps/dashboard/src/components/workflow-editor/steps/step-drawer.tsx b/apps/dashboard/src/components/workflow-editor/steps/step-drawer.tsx
@@ -1,6 +1,5 @@
 import { useNavigate } from 'react-router-dom';
 
-import { FormProtection } from '@/components/form-protection';
 import { PageMeta } from '@/components/page-meta';
 import { Sheet, SheetContent, SheetDescription, SheetTitle } from '@/components/primitives/sheet';
 import { VisuallyHidden } from '@/components/primitives/visually-hidden';
@@ -29,7 +28,7 @@ export const StepDrawer = ({ children, title }: { children: React.ReactNode; tit
     },
   });
 
-  const { isFormDirty, setShowAlert, showAlert } = useFormProtection(sheetRef);
+  const { protectedOnOpenChange, ProtectionAlert } = useFormProtection({ ref: sheetRef, onOpenChange: setIsOpen });
 
   if (!workflow || !step) {
     return null;
@@ -38,16 +37,7 @@ export const StepDrawer = ({ children, title }: { children: React.ReactNode; tit
   return (
     <>
       <PageMeta title={title} />
-      <Sheet
-        modal={false}
-        open={isOpen}
-        onOpenChange={(open) => {
-          if (isFormDirty) {
-            return setShowAlert(true);
-          }
-          setIsOpen(open);
-        }}
-      >
+      <Sheet modal={false} open={isOpen} onOpenChange={protectedOnOpenChange}>
         <div
           className={cn('animate-in fade-in fixed inset-0 z-50 bg-black/20 transition-opacity duration-300', {
             'pointer-events-none opacity-0': !isOpen,
@@ -62,7 +52,7 @@ export const StepDrawer = ({ children, title }: { children: React.ReactNode; tit
         </SheetContent>
       </Sheet>
 
-      <FormProtection onClose={() => setIsOpen(false)} showAlert={showAlert} setShowAlert={setShowAlert} />
+      <ProtectionAlert />
     </>
   );
 };
diff --git a/...ashboard/src/hooks/use-form-protection.ts → ...shboard/src/hooks/use-form-protection.tsx b/...ashboard/src/hooks/use-form-protection.ts → ...shboard/src/hooks/use-form-protection.tsx
@@ -1,7 +1,14 @@
+import { FormProtection } from '@/components/form-protection';
 import { useBeforeUnload } from '@/hooks/use-before-unload';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
-export function useFormProtection(ref: React.RefObject<HTMLElement>) {
+type UseFormProtectionProps = {
+  ref: React.RefObject<HTMLElement>;
+  onOpenChange?: (open: boolean) => void; // for drawers/sheets
+  onProceed?: () => void; // for nav, i.e. navigate(-1) when closing the alert
+};
+export function useFormProtection(props: UseFormProtectionProps) {
+  const { ref, onOpenChange, onProceed } = props;
   const [isDirty, setIsDirty] = useState(false);
   const [showAlert, setShowAlert] = useState(false);
 
@@ -54,5 +61,30 @@ export function useFormProtection(ref: React.RefObject<HTMLElement>) {
     return () => observer.disconnect();
   }
 
-  return { isFormDirty: isDirty, showAlert, setShowAlert };
+  const protectedOnOpenChange = (open: boolean) => {
+    if (isDirty) {
+      setShowAlert(true);
+    } else {
+      onOpenChange?.(open);
+    }
+  };
+
+  const ProtectionAlert = useCallback(
+    () => (
+      <FormProtection
+        onClose={() => {
+          if (onProceed) {
+            onProceed();
+          } else {
+            onOpenChange?.(false);
+          }
+        }}
+        showAlert={showAlert}
+        setShowAlert={setShowAlert}
+      />
+    ),
+    [onProceed, onOpenChange, showAlert, setShowAlert]
+  );
+
+  return { isDirty, protectedOnOpenChange, ProtectionAlert };
 }
diff --git a/apps/dashboard/src/pages/create-subscriber.tsx b/apps/dashboard/src/pages/create-subscriber.tsx
@@ -1,4 +1,3 @@
-import { FormProtection } from '@/components/form-protection';
 import { Sheet, SheetContent } from '@/components/primitives/sheet';
 import { CreateSubscriberForm } from '@/components/subscribers/create-subscriber-form';
 import { useFormProtection } from '@/hooks/use-form-protection';
@@ -22,7 +21,10 @@ export function CreateSubscriberPage() {
     );
   };
 
-  const { isFormDirty, setShowAlert, showAlert } = useFormProtection(sheetRef);
+  const { protectedOnOpenChange, ProtectionAlert } = useFormProtection({
+    ref: sheetRef,
+    onOpenChange: setOpen,
+  });
 
   useOnElementUnmount({
     element: sheetRef.current,
@@ -33,15 +35,7 @@ export function CreateSubscriberPage() {
 
   return (
     <>
-      <Sheet
-        open={open}
-        onOpenChange={(open) => {
-          if (isFormDirty) {
-            return setShowAlert(true);
-          }
-          setOpen(open);
-        }}
-      >
+      <Sheet open={open} onOpenChange={protectedOnOpenChange}>
         {/* Custom overlay since SheetOverlay does not work with modal={false} */}
         <div
           className={cn('fade-in animate-in fixed inset-0 z-50 bg-black/20 transition-opacity duration-300', {
@@ -52,7 +46,8 @@ export function CreateSubscriberPage() {
           <CreateSubscriberForm onSuccess={() => navigate(-1)} />
         </SheetContent>
       </Sheet>
-      <FormProtection onClose={() => setOpen(false)} showAlert={showAlert} setShowAlert={setShowAlert} />
+
+      <ProtectionAlert />
     </>
   );
 }