From 1b8ecbe44948d7ddda1ffbd75b40a84e6b1cbc66 Mon Sep 17 00:00:00 2001
From: Anwar Sadath <37188392+asadath1395@users.noreply.github.com>
Date: Sat, 20 May 2023 04:20:57 +0530
Subject: [PATCH] [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>
---
 .../features/bookings/components/TeamFilter.tsx  |  6 +++---
 packages/lib/hooks/useTypedQuery.ts              | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

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<string>(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<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,
+  };
 }