[CAL-1008] Fix 'All Bookings' filter not getting selected after coming from 'Your Bookings' (#8902)
* [CAL-1008] Fix 'All Bookings' filter not getting selected after coming from 'Your Bookings' * Remove optional param from removeAllQueryParams function * Remove setQuery from the extraction --------- Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: alannnc <alannnc@gmail.com>pull/8282/head^2
parent
cd4882429d
commit
1b8ecbe449
|
@ -11,7 +11,7 @@ import { useFilterQuery } from "../lib/useFilterQuery";
|
||||||
export const TeamsMemberFilter = () => {
|
export const TeamsMemberFilter = () => {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
const session = useSession();
|
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 { data } = trpc.viewer.teams.list.useQuery();
|
||||||
const [dropdownTitle, setDropdownTitle] = useState<string>(t("all_bookings_filter_label"));
|
const [dropdownTitle, setDropdownTitle] = useState<string>(t("all_bookings_filter_label"));
|
||||||
|
|
||||||
|
@ -38,7 +38,7 @@ export const TeamsMemberFilter = () => {
|
||||||
checked={!query.teamIds && !query.userIds?.includes(session.data?.user.id || 0)}
|
checked={!query.teamIds && !query.userIds?.includes(session.data?.user.id || 0)}
|
||||||
onChange={() => {
|
onChange={() => {
|
||||||
setDropdownTitle(t("all_bookings_filter_label"));
|
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 "
|
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"
|
id="yourBookings"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
disabled={session.status === "loading"}
|
disabled={session.status === "loading"}
|
||||||
checked={query.userIds?.includes(session.data?.user.id || 0)}
|
checked={!!query.userIds?.includes(session.data?.user.id || 0)}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setDropdownTitle(t("your_bookings_filter_label"));
|
setDropdownTitle(t("your_bookings_filter_label"));
|
||||||
if (e.target.checked) {
|
if (e.target.checked) {
|
||||||
|
|
|
@ -86,5 +86,19 @@ export function useTypedQuery<T extends z.AnyZodObject>(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,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue