From c052c66abc1f7904628d91753f225367628e4dea Mon Sep 17 00:00:00 2001 From: Vicolas Akoh <46172140+Vicolas11@users.noreply.github.com> Date: Fri, 31 Mar 2023 22:21:00 +0100 Subject: [PATCH] chore: removed duplicate destination calendar selector components (#7880) * Deleted DestinationCalendarSelector * Renamed to DestinationCalendarSelectorComp * Delete DestinationCalendarSelectorComp instead of rename * Add DestinationCalendarSelect to CreateEventsOnCalendar --------- Co-authored-by: Peer Richelsen Co-authored-by: Alex van Andel --- .../DestinationCalendarSelector.tsx | 137 ----------------- .../apps/DestinationCalendarSelector.tsx | 139 ------------------ .../CreateEventsOnCalendarSelect.tsx | 3 +- 3 files changed, 1 insertion(+), 278 deletions(-) delete mode 100644 apps/web/components/DestinationCalendarSelector.tsx delete mode 100644 apps/web/components/apps/DestinationCalendarSelector.tsx diff --git a/apps/web/components/DestinationCalendarSelector.tsx b/apps/web/components/DestinationCalendarSelector.tsx deleted file mode 100644 index f8b817d391..0000000000 --- a/apps/web/components/DestinationCalendarSelector.tsx +++ /dev/null @@ -1,137 +0,0 @@ -import classNames from "classnames"; -import React, { useEffect, useState } from "react"; -import Select from "react-select"; - -import { useLocale } from "@calcom/lib/hooks/useLocale"; -import type { DestinationCalendar } from "@calcom/prisma/client"; -import { trpc } from "@calcom/trpc/react"; - -interface Props { - onChange: (value: { externalId: string; integration: string }) => void; - isLoading?: boolean; - hidePlaceholder?: boolean; - /** The external Id of the connected calendar */ - value: string | undefined; - destinationCalendar?: DestinationCalendar | null; -} - -const DestinationCalendarSelector = ({ - onChange, - isLoading, - value, - hidePlaceholder, - destinationCalendar, -}: Props): JSX.Element | null => { - const { t } = useLocale(); - const query = trpc.viewer.connectedCalendars.useQuery(); - const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null); - - // Extra styles to show prefixed text in react-select - const content = (hidePlaceholder = false) => { - if (!hidePlaceholder) { - return { - alignItems: "center", - display: "flex", - ":before": { - content: `'${t("select_destination_calendar")}:'`, - display: "block", - marginRight: 8, - }, - }; - } - return {}; - }; - - useEffect(() => { - const selected = query.data?.connectedCalendars - .map((connected) => connected.calendars ?? []) - .flat() - .find((cal) => cal.externalId === value); - - if (selected) { - setSelectedOption({ - value: `${selected.integration}:${selected.externalId}`, - label: selected.name || "", - }); - } - }, [query.data?.connectedCalendars, value]); - - if (!query.data?.connectedCalendars.length) { - return null; - } - const options = - query.data.connectedCalendars.map((selectedCalendar) => ({ - key: selectedCalendar.credentialId, - label: `${selectedCalendar.integration.title} (${selectedCalendar.primary?.name})`, - options: (selectedCalendar.calendars ?? []) - .filter((cal) => cal.readOnly === false) - .map((cal) => ({ - label: cal.name || "", - value: `${cal.integration}:${cal.externalId}`, - })), - })) ?? []; - const defaultCalendarSelectedString = destinationCalendar?.externalId - ? `(${ - destinationCalendar.externalId.length > 15 - ? destinationCalendar.externalId.substring(0, 15) + "..." - : destinationCalendar.externalId - })` - : ""; - return ( -
- - {t("default_calendar_selected")} {defaultCalendarSelectedString} - - ) - } - options={options} - styles={{ - placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }), - singleValue: (styles) => ({ ...styles, ...content(hidePlaceholder) }), - control: (defaultStyles) => { - return { - ...defaultStyles, - borderRadius: "6px", - "@media only screen and (min-width: 640px)": { - ...(defaultStyles["@media only screen and (min-width: 640px)"] as object), - width: "100%", - }, - }; - }, - }} - isSearchable={false} - className={classNames( - "block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm", - !hidePlaceholder && "font-medium" - )} - onChange={(option) => { - setSelectedOption(option); - if (!option) { - return; - } - - /* Split only the first `:`, since Apple uses the full URL as externalId */ - const [integration, externalId] = option.value.split(/:(.+)/); - - onChange({ - integration, - externalId, - }); - }} - isLoading={isLoading} - value={selectedOption} - components={{ - IndicatorSeparator: () => null, - }} - /> -
- ); -}; - -export default DestinationCalendarSelector; diff --git a/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx b/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx index 5aa3edffa3..1e1cdba104 100644 --- a/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx +++ b/apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx @@ -1,9 +1,8 @@ +import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { RouterInputs } from "@calcom/trpc/react"; import { trpc } from "@calcom/trpc/react"; -import DestinationCalendarSelector from "@components/DestinationCalendarSelector"; - interface ICreateEventsOnCalendarSelectProps { calendar?: RouterInputs["viewer"]["setDestinationCalendar"] | null; }