a tool for shared writing and social publishing

reset ui state on route change

Changed files
+33 -1
app
components
+3 -1
app/layout.tsx
··· 8 8 import { IdentityProviderServer } from "components/IdentityProviderServer"; 9 9 import { headers } from "next/headers"; 10 10 import { IPLocationProvider } from "components/Providers/IPLocationProvider"; 11 + import { RouteUIStateManager } from "components/RouteUIStateManger"; 11 12 12 13 export const metadata = { 13 14 title: "Leaflet", ··· 48 49 }) { 49 50 let ipLocation = headers().get("X-Vercel-IP-Country"); 50 51 return ( 51 - <html lang="en" className={`${quattro.variable}`}> 52 + <html suppressHydrationWarning lang="en" className={`${quattro.variable}`}> 52 53 <body> 53 54 <script 54 55 dangerouslySetInnerHTML={{ ··· 70 71 <IdentityProviderServer> 71 72 <IPLocationProvider country={ipLocation}> 72 73 <ViewportSizeLayout>{children}</ViewportSizeLayout> 74 + <RouteUIStateManager /> 73 75 </IPLocationProvider> 74 76 </IdentityProviderServer> 75 77 </PopUpProvider>
+30
components/RouteUIStateManger.tsx
··· 1 + "use client"; 2 + import { useUIState } from "src/useUIState"; 3 + import { useEffect } from "react"; 4 + import { usePathname } from "next/navigation"; 5 + 6 + const routeOpenPages = new Map<string, string[]>(); 7 + let previousPathname = null as null | string; 8 + export const RouteUIStateManager = () => { 9 + const pathname = usePathname(); 10 + useEffect(() => { 11 + routeOpenPages.set( 12 + previousPathname || pathname, 13 + useUIState.getState().openPages, 14 + ); 15 + previousPathname = pathname; 16 + 17 + // Restore open pages for new route if we have them 18 + const savedOpenPages = routeOpenPages.get(pathname) || []; 19 + 20 + useUIState.setState({ 21 + focusedEntity: null, 22 + selectedBlocks: [], 23 + foldedBlocks: [], 24 + openPages: savedOpenPages, 25 + lastUsedHighlight: "1", 26 + }); 27 + }, [pathname]); 28 + 29 + return null; 30 + };