How to sync the zustand store with URL back and forth

[suryaashish-tyke]

I am clear until initialising the store with the validated search params from Tanstack router,

But my question is how to sync the subsequent updates of the store to the URL.

[tigawanna]

The initial loading is where I struggled with something similar the most but it was before i found this
https://tkdodo.eu/blog/working-with-zustand

[schiller-manuel]

why would you want to sync with zustand? what's the use case here?

[suryaashish-tyke]

later i will be using the complete page as widget in some other place, where there is no need to store the state of that widget.

[suryaashish-tyke]

why would you want to sync with zustand? what's the use case here?

and also one quick question, I am not getting type safety on my search params for the below setup

import {
	createFileRoute,
	Link,
	Navigate,
	Outlet,
	redirect,
	retainSearchParams,
	useLocation,
	useNavigate,
	useRouter,
	useSearch,
} from "@tanstack/react-router";
import dayjs from "dayjs";
import { pick } from "lodash";
import { Loader2 } from "lucide-react";
import { useEffect } from "react";
import { z } from "zod";
import { AppHeader } from "../components/app-header";
import { FooterProfile } from "../components/footer-profile";
import {
	Sidebar,
	SidebarContent,
	SidebarFooter,
	SidebarGroup,
	SidebarHeader,
	SidebarInset,
	SidebarMenu,
	SidebarMenuButton,
	SidebarMenuItem,
	SidebarProvider,
} from "../components/ui/sidebar";
import { SIDE_BAR_ITEMS } from "../config/sidebar";
import type { FileRouteTypes } from "../routeTree.gen";
import { useAuthStore } from "../stores/providers/auth";
import { useTimeStoreActions } from "../stores/time-store";

export const AppLayoutSearchSchema = z.object({
	timeFrame: z
		.enum(["", "Last 15 Minutes", "Last 30 Minutes"])
		.catch("Last 15 Minutes"),
	start: z.iso.datetime().catch(""),
	end: z.iso.datetime().catch(""),
});

export const Route = createFileRoute("/_appLayout")({
	component: RouteComponent,
	beforeLoad: async ({ context }) => {
		const authStore = context.authStore;
		if (!authStore.getState().user) {
			throw redirect({
				to: "/login",
			});
		}
	},
	errorComponent: () => <Navigate to="/login" replace />,
	pendingComponent: () => (
		<div className="flex h-[100dvh] w-[100dvw] items-center justify-center">
			<div className="flex flex-col gap-4">
				<Loader2 className="animate-spin" />
				<p>Authenticating user.....</p>
			</div>
		</div>
	),
	validateSearch: (
		search,
	): { timeFrame: string; start: string; end: string } => {
		const timeFrame = z
			.enum(["", "Last 15 Minutes", "Last 30 Minutes"])
			.catch("Last 15 Minutes")
			.parse(search.timeFrame);

		let start = z.iso.datetime().catch("").parse(search.start);
		let end = z.iso.datetime().catch("").parse(search.end);

		if (start === "" || end === "") {
			start = "";
			end = "";

			return {
				timeFrame,
				start,
				end,
			};
		} else {
			if (
				timeFrame === "" &&
				(dayjs(start).isSame(end, "seconds") || dayjs(start).isAfter(end))
			) {
				start = dayjs(start).subtract(1, "minutes").toISOString();
			}

			return {
				timeFrame,
				start,
				end,
			};
		}
	},
	search: {
		middlewares: [retainSearchParams(true)],
	},
});

function RouteComponent() {
	const authStore = useAuthStore();
	const router = useRouter();
	const location = useLocation();
	const user = authStore.getState().user;
	const navigate = useNavigate();
	const search = useSearch({ from: "/_appLayout" });
	//    ^? search: {}
	const timeStoreActions = useTimeStoreActions();

	return (
		....
	);
}