a tool for shared writing and social publishing
reset ui state on route change
Jared Pereira
(Jan 8, 2025, 5:20 PM EST)
deb9e370
4db95b10
+33
-1
+3
-1
app/layout.tsx
+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
+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
+
};