diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx index 5369254cc6..74a27bdc0c 100644 --- a/apps/web/modules/event-types/views/event-types-listing-view.tsx +++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx @@ -5,7 +5,7 @@ import { Trans } from "next-i18next"; import Link from "next/link"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; import type { FC } from "react"; -import { memo, useEffect, useState, useMemo } from "react"; +import { memo, useEffect, useState } from "react"; import { z } from "zod"; import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider"; @@ -903,24 +903,6 @@ const InfiniteScrollMain = ({ const { data } = useTypedQuery(querySchema); const orgBranding = useOrgBranding(); - const tabs = useMemo(() => { - return ( - eventTypeGroups?.map((item, index) => { - let href = item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types?noTeam"; - // If it's the first tab and no teamId is in the URL, set href to just /event-types - if (index === 0 && searchParams && !searchParams.has("teamId") && !searchParams.has("noTeam")) { - href = "/event-types"; - } - return { - name: item.profile.name ?? "", - href, - avatar: item.profile.image, - "data-testid": item.profile.name ?? "", - }; - }) ?? [] - ); - }, [eventTypeGroups, searchParams]); - if (status === "error") { return ; } @@ -929,6 +911,14 @@ const InfiniteScrollMain = ({ return ; } + const tabs = eventTypeGroups.map((item) => ({ + name: item.profile.name ?? "", + href: item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types", + avatar: item.profile.image, + "data-testid": item.profile.name ?? "", + matchFullPath: true, + })); + const activeEventTypeGroup = eventTypeGroups.filter((item) => item.teamId === data.teamId) ?? eventTypeGroups[0]; diff --git a/packages/lib/hooks/useUrlMatchesCurrentUrl.ts b/packages/lib/hooks/useUrlMatchesCurrentUrl.ts index f022561350..b399212496 100644 --- a/packages/lib/hooks/useUrlMatchesCurrentUrl.ts +++ b/packages/lib/hooks/useUrlMatchesCurrentUrl.ts @@ -4,7 +4,7 @@ import { usePathname } from "next/navigation"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; -export const useUrlMatchesCurrentUrl = (url: string) => { +export const useUrlMatchesCurrentUrl = (url: string, matchFullPath?: boolean) => { // I don't know why usePathname ReturnType doesn't include null. // It can certainly have null value https://nextjs.org/docs/app/api-reference/functions/use-pathname#:~:text=usePathname%20can%20return%20null%20when%20a%20fallback%20route%20is%20being%20rendered%20or%20when%20a%20pages%20directory%20page%20has%20been%20automatically%20statically%20optimized%20by%20Next.js%20and%20the%20router%20is%20not%20ready. const pathname = usePathname() as null | string; @@ -16,6 +16,9 @@ export const useUrlMatchesCurrentUrl = (url: string) => { } else { pathnameWithQuery = pathname; } + if (matchFullPath) { + return pathnameWithQuery ? pathnameWithQuery === url : false; + } // TODO: It should actually re-order the params before comparing ?a=1&b=2 should match with ?b=2&a=1 return pathnameWithQuery ? pathnameWithQuery.includes(url) : false; }; diff --git a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx index 7ebc79a03f..2cca8a64fa 100644 --- a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx +++ b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx @@ -20,6 +20,7 @@ export type HorizontalTabItemProps = { onClick?: (name: string) => void; isActive?: boolean; "data-testid"?: string; + matchFullPath?: boolean; }; const HorizontalTabItem = function ({ @@ -28,9 +29,10 @@ const HorizontalTabItem = function ({ linkShallow, linkScroll, avatar, + matchFullPath, ...props }: HorizontalTabItemProps) { - const isCurrent = useUrlMatchesCurrentUrl(href) || props?.isActive; + const isCurrent = useUrlMatchesCurrentUrl(href, matchFullPath) || props?.isActive; return (