fix: add warning when navigating away from whiteboard with unsaved ch…

[STRANGENIKHIL]

fixes #104

Description

This Pull Request addresses the issue where users could navigate away from an active whiteboard session and silently lose unsaved progress. It adds browser-level and route-level safety checks to warn the user before leaving, along with a manual Save Board button.

What Changed

• State Management: Introduced hasUnsavedChanges state in Whiteboard.jsx to track local canvas modifications.
• Action Triggers: Canvas edits (drawing strokes/shapes, modifying elements, deleting/clearing items, undoing/redoing, and uploading images) now set hasUnsavedChanges to true.
• Navigation Safety:
  • Added a beforeunload event listener to catch browser/tab closing and reloads.
  • Implemented React Router v7 useBlocker to catch back-button presses and navbar links (internal SPA navigation).
• Save Board Button: Added a floppy disk icon button in the secondary toolbar that pulses when unsaved changes are present. Clicking it displays a "Saved Successfully!" banner and resets the warning state.
• Load State: Reset hasUnsavedChanges to false when a whiteboard successfully loads.

Why Changed

• Prevent Data Loss: Users previously lost active whiteboard drawings without any confirmation prompt when accidentally clicking the back button, navigating to the dashboard, or closing their tab.
• User Experience: A pulsing Save button and prompt alert users of unsaved changes in a way that respects their active session.

---

How to Test

1. Open a whiteboard room and draw any shape or stroke.
2. Verify that the Save Board button in the secondary toolbar begins to pulse.
3. Try clicking the Dashboard link in the header or the browser back button.
4. Verify that a confirmation dialog appears: "You have unsaved changes. Are you sure you want to leave?".
5. Dismiss the dialog to remain in the whiteboard session.
6. Click the Save Board button and verify that:
   • A "Saved Successfully!" banner appears in the top-left area.
   • The button stops pulsing.
   • You can now navigate away without any warning.

[vercel]

@STRANGENIKHIL is attempting to deploy a commit to the MINHA's projects Team on Vercel.

A member of the Team first needs to authorize it.

[KENZY004]

Thanks for the PR! The UI changes and the beforeunload logic look great.

However, there is an issue with useBlocker. Our application currently uses a traditional (in App.jsx), but useBlocker requires a Data Router (like createBrowserRouter) to function. Using it here will throw a runtime error and crash the Whiteboard page.

Could you please remove the useBlocker implementation? You can either rely solely on the beforeunload event for now, or implement a custom prompt for internal route changes. Let me know if you have any questions!

[KENZY004]

Hey @STRANGENIKHIL, thanks for migrating to createBrowserRouter to support useBlocker , that's a valid approach! However, the second commit introduced a few issues that need to be fixed before this can be merged:

1. 🔴 Wrong parameter name in useBlocker, will crash the whiteboard In Whiteboard.jsx, the blocker uses currentValue which doesn't exist in the React Router v7 API:
   ({ currentValue, nextLocation }) =>
   hasUnsavedChanges && currentValue.pathname !== nextLocation.pathname

This will throw a TypeError: Cannot read properties of undefined (reading 'pathname') and crash the page when clicking any internal link (like Dashboard) with unsaved changes. Please change it to currentLocation:

({ currentLocation, nextLocation }) =>
hasUnsavedChanges && currentLocation.pathname !== nextLocation.pathname

2. 🔴 /contact route is missing from App.jsx The /contact route was accidentally removed during the router migration. Please add it back.

3. 🔴 Terms of Service route path changed The route path was changed from /terms-of-service to /terms, which will break existing links. Please restore it to /terms-of-service.

4. ⚠️ Merge conflict This branch currently has a conflict in client/src/App.jsx. Please pull the latest main and resolve it before pushing your fixes.