leaflet.pub
a tool for shared writing and social publishing
reset ui state on route change
awarm.space
+33
-1
+3
-1
app/layout.tsx
+3
-1
app/layout.tsx
···
8
import { IdentityProviderServer } from "components/IdentityProviderServer";
9
import { headers } from "next/headers";
10
import { IPLocationProvider } from "components/Providers/IPLocationProvider";
11
12
export const metadata = {
13
title: "Leaflet",
···
48
}) {
49
let ipLocation = headers().get("X-Vercel-IP-Country");
50
return (
51
-
<html lang="en" className={`${quattro.variable}`}>
52
<body>
53
<script
54
dangerouslySetInnerHTML={{
···
70
<IdentityProviderServer>
71
<IPLocationProvider country={ipLocation}>
72
<ViewportSizeLayout>{children}</ViewportSizeLayout>
73
</IPLocationProvider>
74
</IdentityProviderServer>
75
</PopUpProvider>
···
8
import { IdentityProviderServer } from "components/IdentityProviderServer";
9
import { headers } from "next/headers";
10
import { IPLocationProvider } from "components/Providers/IPLocationProvider";
11
+
import { RouteUIStateManager } from "components/RouteUIStateManger";
12
13
export const metadata = {
14
title: "Leaflet",
···
49
}) {
50
let ipLocation = headers().get("X-Vercel-IP-Country");
51
return (
52
+
<html suppressHydrationWarning lang="en" className={`${quattro.variable}`}>
53
<body>
54
<script
55
dangerouslySetInnerHTML={{
···
71
<IdentityProviderServer>
72
<IPLocationProvider country={ipLocation}>
73
<ViewportSizeLayout>{children}</ViewportSizeLayout>
74
+
<RouteUIStateManager />
75
</IPLocationProvider>
76
</IdentityProviderServer>
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
+
};