Chromium doesn't warn on tab close / navigate if unsaved

[bates64]

Fixing will mitigate #743

[ConorBobbleHat]

I'm not entirely sure if this is behind the bug that motivated #743, but it looks like useWarnBeforeUnload stopped being able to cancel internal navigation with the move to the app directory in 4cf3e416.

relevant docs / migration notes:

• https://nextjs.org/docs/app/api-reference/functions/use-router#router-events
• https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#step-5-migrating-routing-hooks

[bates64]

ty @ConorBobbleHat, see also https://jasonwatmore.com/nextjs-router-listen-to-route-location-change-with-userouter

[bates64]

I think we want to do const router = useRouter() before here https://github.com/decompme/decomp.me/blob/796a5f4746992714607a378f857129bf324a6f6a/frontend/src/lib/hooks.ts#L64 instead of using the global Router which is pages dir only

[ConorBobbleHat]

I tried patching that in - I think next completely changed the router API between pages and app (without throwing a deprecation notice or any kind of warning if you try and use the wrong one :|)

From the first link above:

Migrating from the pages directory: [...] router.events is not currently supported. See below.

below being:

You can listen for page changes by composing other client component hooks like usePathname and useSearchParams.

I haven't poked around a lot with it, but I'm not entirely sure how to use an effect bound to usePathname to get the old URL in order to cancel a navigation?

[ethteck]

https://discord.com/channels/897066363951128586/897066363951128590/1149802881608855552

[bismurphy]

Bismurphy from that screenshot here commenting - this was in Firefox. Clicking New seems to consistently go back to homepage. I haven't been able to get a warning to pop up when clicking New, but the warning does pop up when attempting to close the tab.

[mkst]

Generally navigating within the site doesn't prompt to save changes which means you'll instantly lose them if you click on:

• ~~New (toolbar)~~ FIXED via https://github.com/decompme/decomp.me/pull/1708
• Platform Icon (toolbar)
• Your Profile (toolbar)
• Dashboard (sidebar)
• New Scratch (sidebar)
• Settings (sidebar)

A few hacks but no official word: https://github.com/vercel/next.js/discussions/47020