diff --git a/packages/frontend/app/routes/_authenticated/admin_/index.tsx b/packages/frontend/app/routes/_authenticated/admin_/index.tsx index 31b710c78..316fdb3e7 100644 --- a/packages/frontend/app/routes/_authenticated/admin_/index.tsx +++ b/packages/frontend/app/routes/_authenticated/admin_/index.tsx @@ -12,7 +12,7 @@ import { TextField, } from "@mui/material"; import { useSuspenseInfiniteQuery } from "@tanstack/react-query"; -import { createFileRoute } from "@tanstack/react-router"; +import { createFileRoute, stripSearchParams } from "@tanstack/react-router"; import { createColumnHelper } from "@tanstack/react-table"; import type { UserSchema } from "@/server/schema"; import { useMemo } from "react"; @@ -41,12 +41,20 @@ const columns = [ }), ]; +const defaultValues = { + query: "", +} + const searchSchema = z.object({ - query: fallback(z.string(), "").default(""), + query: z.string().default(defaultValues.query), }); + export const Route = createFileRoute("/_authenticated/admin_/")({ validateSearch: searchSchema, + search: { + middlewares: [stripSearchParams(defaultValues)], + }, loaderDeps: ({ search }) => ({ search }), loader: async ({ context: { queryClient }, deps: { search } }) => queryClient.prefetchInfiniteQuery( diff --git a/packages/frontend/app/routes/_authenticated/events.tsx b/packages/frontend/app/routes/_authenticated/events.tsx index 41be2e593..cc808e75f 100644 --- a/packages/frontend/app/routes/_authenticated/events.tsx +++ b/packages/frontend/app/routes/_authenticated/events.tsx @@ -22,34 +22,40 @@ import { useSuspenseInfiniteQuery, useSuspenseQuery, } from "@tanstack/react-query"; -import { createFileRoute } from "@tanstack/react-router"; +import { createFileRoute, stripSearchParams } from "@tanstack/react-router"; import { EventTypeSchema } from "@/server/schema"; import { DateTime } from "luxon"; import { z } from "zod"; import { fallback } from "@tanstack/zod-adapter"; import { useCallback } from "react"; -const defaultTo = DateTime.now().plus({ month: 1 }).toISODate(); -const defaultFrom = DateTime.now().toISODate(); -const defaultLimit = 5; +const defaultValues = { + from: DateTime.now().toISODate(), + to: DateTime.now().plus({ month: 1 }).toISODate(), + type: undefined, + limit: 5, +} const eventsSearchSchema = z.object({ - from: fallback(z.string().date(), defaultFrom).default(defaultFrom), - to: fallback(z.string().date(), defaultTo).default(defaultTo), - type: fallback(EventTypeSchema.optional(), undefined), - limit: fallback(z.number().optional(), defaultLimit).default(defaultLimit), + from: z.string().default(defaultValues.from), + to: z.string().date().default(defaultValues.to), + type: EventTypeSchema.optional(), + limit: z.number().default(defaultValues.limit), }); export const Route = createFileRoute("/_authenticated/events")({ component: Component, validateSearch: eventsSearchSchema, + search: { + middlewares: [stripSearchParams(defaultValues)] + }, loaderDeps: ({ search }) => search, head: () => ({ meta: [{ title: "Events" }], }), loader: async ({ context: { queryClient }, - deps: { from = defaultFrom, to = defaultTo, type, limit = defaultLimit }, + deps: { from, to, type, limit }, }) => { await queryClient.prefetchQuery(authQueryOptions.status()); @@ -96,7 +102,7 @@ function Component() { (date: DateTime | DateTime | null) => { const iso = date?.toISODate(); navigate({ - search: (prev) => ({ ...prev, from: iso ? iso : defaultFrom }), + search: (prev) => ({ ...prev, from: iso ? iso : defaultValues.from }), }); }, [navigate], @@ -106,7 +112,7 @@ function Component() { (date: DateTime | DateTime | null) => { const iso = date?.toISODate(); navigate({ - search: (prev) => ({ ...prev, to: iso ? iso : defaultTo }), + search: (prev) => ({ ...prev, to: iso ? iso : defaultValues.to }), }); }, [navigate], @@ -168,12 +174,12 @@ function Component() {