diff --git a/packages/features/bookings/components/TeamFilter.tsx b/packages/features/bookings/components/TeamFilter.tsx index e36f2351f3..6a96691187 100644 --- a/packages/features/bookings/components/TeamFilter.tsx +++ b/packages/features/bookings/components/TeamFilter.tsx @@ -11,7 +11,7 @@ import { useFilterQuery } from "../lib/useFilterQuery"; export const TeamsMemberFilter = () => { const { t } = useLocale(); const session = useSession(); - const { data: query, pushItemToKey, removeItemByKeyAndValue, removeByKey } = useFilterQuery(); + const { data: query, pushItemToKey, removeItemByKeyAndValue, removeByKey, removeAllQueryParams } = useFilterQuery(); const { data } = trpc.viewer.teams.list.useQuery(); const [dropdownTitle, setDropdownTitle] = useState(t("all_bookings_filter_label")); @@ -38,7 +38,7 @@ export const TeamsMemberFilter = () => { checked={!query.teamIds && !query.userIds?.includes(session.data?.user.id || 0)} onChange={() => { setDropdownTitle(t("all_bookings_filter_label")); - removeByKey("teamIds"); // Always clear on toggle or not toggle (seems weird but when you know the behviour it works well ) + removeAllQueryParams(); }} className="text-primary-600 focus:ring-primary-500 border-default inline-flex h-4 w-4 place-self-center justify-self-end rounded " /> @@ -57,7 +57,7 @@ export const TeamsMemberFilter = () => { id="yourBookings" type="checkbox" disabled={session.status === "loading"} - checked={query.userIds?.includes(session.data?.user.id || 0)} + checked={!!query.userIds?.includes(session.data?.user.id || 0)} onChange={(e) => { setDropdownTitle(t("your_bookings_filter_label")); if (e.target.checked) { diff --git a/packages/lib/hooks/useTypedQuery.ts b/packages/lib/hooks/useTypedQuery.ts index 47f5d38e72..44e3a6b074 100644 --- a/packages/lib/hooks/useTypedQuery.ts +++ b/packages/lib/hooks/useTypedQuery.ts @@ -86,5 +86,19 @@ export function useTypedQuery(schema: T) { } } - return { data: parsedQuery, setQuery, removeByKey, pushItemToKey, removeItemByKeyAndValue }; + // Remove all query params from the URL + function removeAllQueryParams() { + const { asPath } = router; + const newPath = asPath.split("?")[0]; + router.replace(newPath, undefined, { shallow: true }); + } + + return { + data: parsedQuery, + setQuery, + removeByKey, + pushItemToKey, + removeItemByKeyAndValue, + removeAllQueryParams, + }; }