[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
Anwar Sadath 2023-05-20 04:20:57 +05:30 committed by GitHub
parent cd4882429d
commit 1b8ecbe449
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 4 deletions

View File

@ -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) {

View File

@ -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,
};
} }