calcom/components/integrations/CalendarSwitch.tsx
Omar López 85d7122e43
Fixes Apple Calendar onboarding and type fixes (#988)
* Type fixes

* Type fixes

* Attemp to prevent unknown error in prod

* Type fixes

* Type fixes for onboarding

* Extracts ConnectIntegration

* Extracts IntegrationListItem

* Extracts CalendarsList

* Uses CalendarList on onboarding

* Removes deprecated Alert

* Extracts DisconnectIntegration

* Extracts CalendarSwitch

* Extracts ConnectedCalendarsList

* Extracted connectedCalendar logic for reuse

* Extracted SubHeadingTitleWithConnections

* Type fixes

* Fetched connected calendars in onboarding

* Refreshes data on when adding/removing calendars on onboarding

* Removed testing code

* Type fixes

* Feedback

* Moved integration helpers

* I was sleepy

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2021-10-20 15:42:40 +00:00

75 lines
1.7 KiB
TypeScript

import { useMutation } from "react-query";
import showToast from "@lib/notification";
import { trpc } from "@lib/trpc";
import Switch from "@components/ui/Switch";
export default function CalendarSwitch(props: {
type: string;
externalId: string;
title: string;
defaultSelected: boolean;
}) {
const utils = trpc.useContext();
const mutation = useMutation<
unknown,
unknown,
{
isOn: boolean;
}
>(
async ({ isOn }) => {
const body = {
integration: props.type,
externalId: props.externalId,
};
if (isOn) {
const res = await fetch("/api/availability/calendar", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
});
if (!res.ok) {
throw new Error("Something went wrong");
}
} else {
const res = await fetch("/api/availability/calendar", {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(body),
});
if (!res.ok) {
throw new Error("Something went wrong");
}
}
},
{
async onSettled() {
await utils.invalidateQueries(["viewer.integrations"]);
},
onError() {
showToast(`Something went wrong when toggling "${props.title}""`, "error");
},
}
);
return (
<div className="py-1">
<Switch
key={props.externalId}
name="enabled"
label={props.title}
defaultChecked={props.defaultSelected}
onCheckedChange={(isOn: boolean) => {
mutation.mutate({ isOn });
}}
/>
</div>
);
}