feat: [US-038] - Unsaved changes warning
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Gustavo Henrique Santos Souza de Miranda
parent
815940a011
commit
b3f7a57623
|
|
@ -1,6 +1,7 @@
|
|||
'use client'
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import ReactFlow, {
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
|
|
@ -416,6 +417,10 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
|
|||
const [importConfirmDialog, setImportConfirmDialog] = useState<{
|
||||
pendingData: FlowchartData
|
||||
} | null>(null)
|
||||
const [showNavigationWarning, setShowNavigationWarning] = useState(false)
|
||||
|
||||
// Track the last saved data to determine dirty state
|
||||
const lastSavedDataRef = useRef<FlowchartData>(initialData)
|
||||
|
||||
// Ref for hidden file input
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
|
@ -473,6 +478,33 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
|
|||
}
|
||||
}, [nodes, edges, projectId, draftState.showPrompt])
|
||||
|
||||
// Calculate dirty state by comparing current data with last saved data
|
||||
const isDirty = useMemo(() => {
|
||||
const currentData: FlowchartData = {
|
||||
nodes: fromReactFlowNodes(nodes),
|
||||
edges: fromReactFlowEdges(edges),
|
||||
}
|
||||
return !flowchartDataEquals(currentData, lastSavedDataRef.current)
|
||||
}, [nodes, edges])
|
||||
|
||||
// Browser beforeunload warning when dirty
|
||||
useEffect(() => {
|
||||
const handleBeforeUnload = (event: BeforeUnloadEvent) => {
|
||||
if (isDirty) {
|
||||
event.preventDefault()
|
||||
// Modern browsers require returnValue to be set
|
||||
event.returnValue = ''
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('beforeunload', handleBeforeUnload)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('beforeunload', handleBeforeUnload)
|
||||
}
|
||||
}, [isDirty])
|
||||
|
||||
// Handle restoring draft
|
||||
const handleRestoreDraft = useCallback(() => {
|
||||
if (draftState.savedDraft) {
|
||||
|
|
@ -590,6 +622,9 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
|
|||
// Clear LocalStorage draft after successful save
|
||||
clearDraft(projectId)
|
||||
|
||||
// Update last saved data ref to mark as not dirty
|
||||
lastSavedDataRef.current = flowchartData
|
||||
|
||||
setToast({ message: 'Project saved successfully', type: 'success' })
|
||||
} catch (error) {
|
||||
console.error('Failed to save project:', error)
|
||||
|
|
@ -932,8 +967,63 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
|
|||
setConditionEditor(null)
|
||||
}, [])
|
||||
|
||||
// Router for navigation
|
||||
const router = useRouter()
|
||||
|
||||
// Handle back button click - show warning if dirty
|
||||
const handleBackClick = useCallback(() => {
|
||||
if (isDirty) {
|
||||
setShowNavigationWarning(true)
|
||||
} else {
|
||||
router.push('/dashboard')
|
||||
}
|
||||
}, [isDirty, router])
|
||||
|
||||
// Confirm navigation (discard unsaved changes)
|
||||
const handleConfirmNavigation = useCallback(() => {
|
||||
setShowNavigationWarning(false)
|
||||
router.push('/dashboard')
|
||||
}, [router])
|
||||
|
||||
// Cancel navigation
|
||||
const handleCancelNavigation = useCallback(() => {
|
||||
setShowNavigationWarning(false)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col">
|
||||
<div className="flex h-screen w-full flex-col">
|
||||
{/* Editor header with back button and project name */}
|
||||
<header className="flex items-center justify-between border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={handleBackClick}
|
||||
className="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
|
||||
aria-label="Back to dashboard"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
|
||||
{projectName}
|
||||
</h1>
|
||||
{isDirty && (
|
||||
<span className="text-sm text-zinc-500 dark:text-zinc-400">
|
||||
(unsaved changes)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Toolbar
|
||||
onAddDialogue={handleAddDialogue}
|
||||
onAddChoice={handleAddChoice}
|
||||
|
|
@ -1050,6 +1140,35 @@ function FlowchartEditorInner({ projectId, projectName, initialData }: Flowchart
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Navigation warning dialog */}
|
||||
{showNavigationWarning && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div className="w-full max-w-md rounded-lg bg-white p-6 shadow-xl dark:bg-zinc-900">
|
||||
<h2 className="mb-2 text-lg font-semibold text-zinc-900 dark:text-white">
|
||||
Unsaved Changes
|
||||
</h2>
|
||||
<p className="mb-4 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
You have unsaved changes that will be lost if you leave this page.
|
||||
Are you sure you want to leave?
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleConfirmNavigation}
|
||||
className="flex-1 rounded-md bg-red-500 px-4 py-2 text-sm font-medium text-white hover:bg-red-600"
|
||||
>
|
||||
Leave Page
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCancelNavigation}
|
||||
className="flex-1 rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700"
|
||||
>
|
||||
Stay
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hidden file input for import */}
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { createClient } from '@/lib/supabase/server'
|
||||
import { notFound } from 'next/navigation'
|
||||
import Link from 'next/link'
|
||||
import FlowchartEditor from './FlowchartEditor'
|
||||
import type { FlowchartData } from '@/types/flowchart'
|
||||
|
||||
|
|
@ -37,39 +36,10 @@ export default async function EditorPage({ params }: PageProps) {
|
|||
}) as FlowchartData
|
||||
|
||||
return (
|
||||
<div className="flex h-screen flex-col">
|
||||
<header className="flex items-center justify-between border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<h1 className="text-lg font-semibold text-zinc-900 dark:text-zinc-50">
|
||||
{project.name}
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1">
|
||||
<FlowchartEditor
|
||||
projectId={project.id}
|
||||
projectName={project.name}
|
||||
initialData={flowchartData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<FlowchartEditor
|
||||
projectId={project.id}
|
||||
projectName={project.name}
|
||||
initialData={flowchartData}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue