From 098221b47d70fdbe3c126549ac3a5484e2626a5c Mon Sep 17 00:00:00 2001
From: Joe Shajan <joeshajan1551@gmail.com>
Date: Wed, 8 Feb 2023 18:13:45 +0530
Subject: [PATCH] fix: dropdown title in bookings page (#6924)

---
 packages/features/bookings/components/PeopleFilter.tsx | 8 ++++++--
 packages/features/bookings/components/TeamFilter.tsx   | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/features/bookings/components/PeopleFilter.tsx b/packages/features/bookings/components/PeopleFilter.tsx
index 4e0073471c..d63e332a88 100644
--- a/packages/features/bookings/components/PeopleFilter.tsx
+++ b/packages/features/bookings/components/PeopleFilter.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { AnimatedPopover, Avatar } from "@calcom/ui";
@@ -9,6 +11,7 @@ export const PeopleFilter = () => {
   const { t } = useLocale();
   const { data: query, pushItemToKey, removeItemByKeyAndValue, removeByKey } = useFilterQuery();
   const { data } = trpc.viewer.teams.listMembers.useQuery({});
+  const [dropdownTitle, setDropdownTitle] = useState<string>(t("all_users_filter_label"));
 
   if (!data || !data.length) return null;
 
@@ -16,8 +19,7 @@ export const PeopleFilter = () => {
   const userNames = data?.filter((user) => query.userIds?.includes(user.id)).map((user) => user.name);
 
   return (
-    <AnimatedPopover
-      text={userNames && userNames.length > 0 ? `${userNames.join(", ")}` : t("all_users_filter_label")}>
+    <AnimatedPopover text={userNames && userNames.length > 0 ? `${userNames.join(", ")}` : dropdownTitle}>
       <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
         <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
           <FiUser className="h-5 w-5" />
@@ -31,6 +33,7 @@ export const PeopleFilter = () => {
           type="checkbox"
           checked={!query.userIds}
           onChange={() => {
+            setDropdownTitle(t("all_users_filter_label"));
             // Always clear userIds on toggle as this is the toggle box for all users. No params means we are currently selecting all users
             removeByKey("userIds");
           }}
@@ -62,6 +65,7 @@ export const PeopleFilter = () => {
               type="checkbox"
               checked={query.userIds?.includes(user.id)}
               onChange={(e) => {
+                setDropdownTitle(user.name ?? "NamelessUser");
                 if (e.target.checked) {
                   pushItemToKey("userIds", user.id);
                 } else if (!e.target.checked) {
diff --git a/packages/features/bookings/components/TeamFilter.tsx b/packages/features/bookings/components/TeamFilter.tsx
index bfc36f67e3..199d12afcf 100644
--- a/packages/features/bookings/components/TeamFilter.tsx
+++ b/packages/features/bookings/components/TeamFilter.tsx
@@ -1,4 +1,5 @@
 import { useSession } from "next-auth/react";
+import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -12,6 +13,7 @@ export const TeamsMemberFilter = () => {
   const session = useSession();
   const { data: query, pushItemToKey, removeItemByKeyAndValue, removeByKey } = useFilterQuery();
   const { data } = trpc.viewer.teams.list.useQuery();
+  const [dropdownTitle, setDropdownTitle] = useState<string>(t("all_bookings_filter_label"));
 
   if (!data || !data.length) return null;
 
@@ -19,8 +21,7 @@ export const TeamsMemberFilter = () => {
   const teamNames = data?.filter((team) => query.teamIds?.includes(team.id)).map((team) => team.name);
 
   return (
-    <AnimatedPopover
-      text={teamNames && teamNames.length > 0 ? `${teamNames.join(", ")}` : t("all_bookings_filter_label")}>
+    <AnimatedPopover text={teamNames && teamNames.length > 0 ? `${teamNames.join(", ")}` : dropdownTitle}>
       <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
         <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
           <FiLayers className="h-5 w-5" />
@@ -36,6 +37,7 @@ export const TeamsMemberFilter = () => {
           type="checkbox"
           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 )
           }}
           className="text-primary-600 focus:ring-primary-500 inline-flex h-4 w-4 place-self-center justify-self-end rounded border-gray-300 "
@@ -57,6 +59,7 @@ export const TeamsMemberFilter = () => {
           disabled={session.status === "loading"}
           checked={query.userIds?.includes(session.data?.user.id || 0)}
           onChange={(e) => {
+            setDropdownTitle(t("your_bookings_filter_label"));
             if (e.target.checked) {
               pushItemToKey("userIds", session.data?.user.id || 0);
             } else if (!e.target.checked) {
@@ -91,6 +94,7 @@ export const TeamsMemberFilter = () => {
               type="checkbox"
               checked={query.teamIds?.includes(team.id)}
               onChange={(e) => {
+                setDropdownTitle(team.name);
                 if (e.target.checked) {
                   pushItemToKey("teamIds", team.id);
                 } else if (!e.target.checked) {