diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx index ddc2075fbb..604891a43b 100644 --- a/apps/web/components/AppListCard.tsx +++ b/apps/web/components/AppListCard.tsx @@ -1,4 +1,4 @@ -import { useRouter } from "next/router"; +import { usePathname, useRouter, useSearchParams } from "next/navigation"; import type { ReactNode } from "react"; import { useEffect, useRef, useState } from "react"; import { z } from "zod"; @@ -10,7 +10,15 @@ import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery"; import { Badge, ListItemText, Avatar } from "@calcom/ui"; import { AlertCircle } from "@calcom/ui/components/icon"; -type ShouldHighlight = { slug: string; shouldHighlight: true } | { shouldHighlight?: never; slug?: never }; +type ShouldHighlight = + | { + slug: string; + shouldHighlight: true; + } + | { + shouldHighlight?: never; + slug?: never; + }; type AppListCardProps = { logo?: string; @@ -47,14 +55,16 @@ export default function AppListCard(props: AppListCardProps) { const router = useRouter(); const [highlight, setHighlight] = useState(shouldHighlight && hl === slug); const timeoutRef = useRef(null); + const searchParams = useSearchParams(); + const pathname = usePathname(); useEffect(() => { if (shouldHighlight && highlight) { const timer = setTimeout(() => { setHighlight(false); - const url = new URL(window.location.href); - url.searchParams.delete("hl"); - router.replace(url.pathname, undefined, { shallow: true }); + const _searchParams = new URLSearchParams(searchParams); + _searchParams.delete("hl"); + router.replace(`${pathname}?${_searchParams.toString()}`); }, 3000); timeoutRef.current = timer; } diff --git a/apps/web/components/AppsShell.tsx b/apps/web/components/AppsShell.tsx deleted file mode 100644 index 1c6230eaf3..0000000000 --- a/apps/web/components/AppsShell.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { useSession } from "next-auth/react"; -import React from "react"; - -import NavTabs from "./NavTabs"; - -const tabs = [ - { - name: "app_store", - href: "/apps", - }, - { - name: "installed_apps", - href: "/apps/installed", - }, -]; - -export default function AppsShell({ children }: { children: React.ReactNode }) { - const { status } = useSession(); - - return ( - <> -
{status === "authenticated" && }
-
{children}
- - ); -} diff --git a/apps/web/components/BookingsShell.tsx b/apps/web/components/BookingsShell.tsx deleted file mode 100644 index 5382c98aac..0000000000 --- a/apps/web/components/BookingsShell.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; - -import NavTabs from "./NavTabs"; - -const tabs = [ - { - name: "upcoming", - href: "/bookings/upcoming", - }, - { - name: "recurring", - href: "/bookings/recurring", - }, - { - name: "past", - href: "/bookings/past", - }, - { - name: "cancelled", - href: "/bookings/cancelled", - }, -]; - -export default function BookingsShell({ children }: { children: React.ReactNode }) { - return ( - <> - -
{children}
- - ); -} diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx index cee32c4ad7..8372db4ec6 100644 --- a/apps/web/components/Embed.tsx +++ b/apps/web/components/Embed.tsx @@ -2,8 +2,7 @@ import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible"; import classNames from "classnames"; import { useSession } from "next-auth/react"; import type { TFunction } from "next-i18next"; -import type { NextRouter } from "next/router"; -import { useRouter } from "next/router"; +import { usePathname, useRouter, useSearchParams } from "next/navigation"; import type { MutableRefObject, RefObject } from "react"; import { createRef, forwardRef, useRef, useState } from "react"; import type { ControlProps } from "react-select"; @@ -13,7 +12,7 @@ import { shallow } from "zustand/shallow"; import type { Dayjs } from "@calcom/dayjs"; import dayjs from "@calcom/dayjs"; import { AvailableTimes } from "@calcom/features/bookings"; -import { useInitializeBookerStore, useBookerStore } from "@calcom/features/bookings/Booker/store"; +import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store"; import type { BookerLayout } from "@calcom/features/bookings/Booker/types"; import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event"; import { useTimePreferences } from "@calcom/features/bookings/lib/timePreferences"; @@ -21,30 +20,29 @@ import DatePicker from "@calcom/features/calendars/DatePicker"; import { useFlagMap } from "@calcom/features/flags/context/provider"; import { useNonEmptyScheduleDays } from "@calcom/features/schedules"; import { useSlotsForDate } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate"; -import { CAL_URL } from "@calcom/lib/constants"; -import { APP_NAME, EMBED_LIB_URL, IS_SELF_HOSTED, WEBAPP_URL } from "@calcom/lib/constants"; +import { APP_NAME, CAL_URL, EMBED_LIB_URL, IS_SELF_HOSTED, WEBAPP_URL } from "@calcom/lib/constants"; import { weekdayToWeekIndex } from "@calcom/lib/date-fns"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { BookerLayouts } from "@calcom/prisma/zod-utils"; import type { RouterOutputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; -import { TimezoneSelect } from "@calcom/ui"; import { Button, + ColorPicker, Dialog, DialogClose, - DialogFooter, DialogContent, + DialogFooter, HorizontalTabs, Label, + Select, showToast, Switch, TextArea, TextField, - ColorPicker, - Select, + TimezoneSelect, } from "@calcom/ui"; -import { Code, Trello, Sun, ArrowLeft, ArrowDown, ArrowUp } from "@calcom/ui/components/icon"; +import { ArrowDown, ArrowLeft, ArrowUp, Code, Sun, Trello } from "@calcom/ui/components/icon"; type EventType = RouterOutputs["viewer"]["eventTypes"]["get"]["eventType"] | undefined; type EmbedType = "inline" | "floating-popup" | "element-click" | "email"; @@ -87,25 +85,31 @@ const getDimension = (dimension: string) => { return dimension; }; -const goto = (router: NextRouter, searchParams: Record) => { - const newQuery = new URLSearchParams(router.asPath.split("?")[1]); - Object.keys(searchParams).forEach((key) => { - newQuery.set(key, searchParams[key]); - }); - router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`, undefined, { - shallow: true, - }); -}; +function useRouterHelpers() { + const router = useRouter(); + const searchParams = useSearchParams(); + const pathname = usePathname(); -const removeQueryParams = (router: NextRouter, queryParams: string[]) => { - const params = new URLSearchParams(window.location.search); + const goto = (newSearchParams: Record) => { + const newQuery = new URLSearchParams(searchParams); + Object.keys(newSearchParams).forEach((key) => { + newQuery.set(key, newSearchParams[key]); + }); + router.push(`${pathname}?${newQuery.toString()}`); + }; - queryParams.forEach((param) => { - params.delete(param); - }); + const removeQueryParams = (queryParams: string[]) => { + const params = new URLSearchParams(searchParams); - router.push(`${router.asPath.split("?")[0]}?${params.toString()}`); -}; + queryParams.forEach((param) => { + params.delete(param); + }); + + router.push(`${pathname}?${params.toString()}`); + }; + + return { goto, removeQueryParams }; +} const getQueryParam = (queryParam: string) => { const params = new URLSearchParams(window.location.search); @@ -325,6 +329,8 @@ ${uiInstructionCode}`; }, }; +type EmbedCommonProps = { embedType: EmbedType; calLink: string; previewState: PreviewState }; + const getEmbedTypeSpecificString = ({ embedFramework, embedType, @@ -332,10 +338,7 @@ const getEmbedTypeSpecificString = ({ previewState, }: { embedFramework: EmbedFramework; - embedType: EmbedType; - calLink: string; - previewState: PreviewState; -}) => { +} & EmbedCommonProps) => { const frameworkCodes = Codes[embedFramework]; if (!frameworkCodes) { throw new Error(`No code available for the framework:${embedFramework}`); @@ -823,77 +826,74 @@ const tabs = [ href: "embedTabName=embed-code", icon: Code, type: "code", - Component: forwardRef< - HTMLTextAreaElement | HTMLIFrameElement | null, - { embedType: EmbedType; calLink: string; previewState: PreviewState } - >(function EmbedHtml({ embedType, calLink, previewState }, ref) { - const { t } = useLocale(); - if (ref instanceof Function || !ref) { - return null; - } - if (ref.current && !(ref.current instanceof HTMLTextAreaElement)) { - return null; - } - return ( - <> -
- - {t("place_where_cal_widget_appear", { appName: APP_NAME })} - -
-