diff --git a/components/integrations/CalendarListContainer.tsx b/components/integrations/CalendarListContainer.tsx index cbab1c94b5..f07b769e09 100644 --- a/components/integrations/CalendarListContainer.tsx +++ b/components/integrations/CalendarListContainer.tsx @@ -1,5 +1,6 @@ -import React, { Fragment } from "react"; +import React, { Fragment, useState } from "react"; import { useMutation } from "react-query"; +import Select from "react-select"; import { QueryCell } from "@lib/QueryCell"; import { useLocale } from "@lib/hooks/useLocale"; @@ -98,59 +99,124 @@ function ConnectedCalendarsList(props: Props) { null} - success={({ data }) => ( - - {data.map((item) => ( - - {item.calendars ? ( - ( - - )} - onOpenChange={props.onChanged} - /> - }> -
    - {item.calendars.map((cal) => ( - { + if (!data.connectedCalendars.length) { + return null; + } + return ( + + {data.connectedCalendars.map((item) => ( + + {item.calendars ? ( + ( + + )} + onOpenChange={props.onChanged} /> - ))} -
-
- ) : ( - ( - - )} - onOpenChange={() => props.onChanged()} - /> - } - /> - )} -
- ))} -
- )} + }> + + + ) : ( + ( + + )} + onOpenChange={() => props.onChanged()} + /> + } + /> + )} + + ))} + + ); + }} + /> + ); +} + +function PrimaryCalendarSelector() { + const query = trpc.useQuery(["viewer.connectedCalendars"], { + suspense: true, + }); + const [selectedOption, setSelectedOption] = useState(() => { + const selected = query.data?.connectedCalendars + .map((connected) => connected.calendars ?? []) + .flat() + .find((cal) => cal.externalId === query.data.destinationCalendar?.externalId); + + if (!selected) { + return null; + } + + return { + value: `${selected.integration}:${selected.externalId}`, + label: selected.name, + }; + }); + + const mutation = trpc.useMutation("viewer.setUserDestinationCalendar"); + + 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 ?? []).map((cal) => ({ + label: cal.name || "", + value: `${cal.integration}:${cal.externalId}`, + })), + })) ?? []; + return ( +