Bug/checkbox calendar sync state (#8677)

* switch wip

* Implement calendar switch component

* Checked default

* Add spinner to improve UX

* Add connected calendar reivaluate

* Remove local state

* Move back to middleware

* Fix spacing issue

* fix: spacing

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

apps/web/components/apps/CalendarListContainer.tsx

@@ -1,9 +1,9 @@
-import { useMutation } from "@tanstack/react-query";
 import Link from "next/link";
 import { Fragment } from "react";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
+import { CalendarSwitch } from "@calcom/features/calendars/CalendarSwitch";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -12,12 +12,10 @@ import {
   Button,
   EmptyScreen,
   List,
-  showToast,
   AppSkeletonLoader as SkeletonLoader,
-  Switch,
   ShellSubHeading,
 } from "@calcom/ui";
-import { ArrowLeft, Calendar, Plus } from "@calcom/ui/components/icon";
+import { Calendar, Plus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -31,83 +29,6 @@ type Props = {
   destinationCalendarId?: string;
 };
 
-function CalendarSwitch(props: {
-  type: string;
-  externalId: string;
-  title: string;
-  defaultSelected: boolean;
-  destination?: boolean;
-}) {
-  const { t } = useLocale();
-  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.viewer.integrations.invalidate();
-      },
-      onError() {
-        showToast(`Something went wrong when toggling "${props.title}""`, "error");
-      },
-    }
-  );
-  return (
-    <div className="flex flex-col py-1 sm:flex-row">
-      <Switch
-        key={props.externalId}
-        name="enabled"
-        label={props.title}
-        defaultChecked={props.defaultSelected}
-        onCheckedChange={(isOn: boolean) => {
-          mutation.mutate({ isOn });
-        }}
-      />
-      {!!props.destination && (
-        <span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
-          <ArrowLeft className="h-4 w-4" />
-          {t("adding_events_to")}
-        </span>
-      )}
-    </div>
-  );
-}
-
 function CalendarList(props: Props) {
   const { t } = useLocale();
   const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
@@ -185,14 +106,15 @@ function ConnectedCalendarsList(props: Props) {
                       {!fromOnboarding && (
                         <>
                           <p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
-                          <ul className="space-y-2 px-5 py-4">
+                          <ul className="space-y-4 px-5 py-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
                                 key={cal.externalId}
                                 externalId={cal.externalId}
                                 title={cal.name || "Nameless calendar"}
+                                name={cal.name || "Nameless calendar"}
                                 type={item.integration.type}
-                                defaultSelected={cal.isSelected}
+                                isChecked={cal.isSelected}
                                 destination={cal.externalId === props.destinationCalendarId}
                               />
                             ))}

apps/web/components/getting-started/components/ConnectedCalendarItem.tsx

@@ -1,4 +1,4 @@
-import { CalendarSwitch } from "./CalendarSwitch";
+import { CalendarSwitch } from "@calcom/features/calendars/CalendarSwitch";
 
 interface IConnectedCalendarItem {
   name: string;

apps/web/components/settings/CalendarSwitch.tsx

@@ -1,85 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { Badge, showToast, Switch } from "@calcom/ui";
-import { ArrowLeft } from "@calcom/ui/components/icon";
-
-export function CalendarSwitch(props: {
-  type: string;
-  externalId: string;
-  title: string;
-  defaultSelected: boolean;
-  isSelected: boolean;
-}) {
-  const { t } = useLocale();
-
-  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.viewer.integrations.invalidate();
-      },
-      onError() {
-        showToast(`Something went wrong when toggling "${props.title}""`, "error");
-      },
-    }
-  );
-  return (
-    <div className="flex space-x-2 py-1 rtl:space-x-reverse">
-      <Switch
-        key={props.externalId}
-        name="enabled"
-        label={props.title}
-        defaultChecked={props.isSelected}
-        onCheckedChange={(isOn: boolean) => {
-          mutation.mutate({ isOn });
-        }}
-      />
-      {props.defaultSelected && (
-        <Badge variant="gray">
-          <div className="flex items-center">
-            <ArrowLeft className="text-default mr-1 h-4 w-4" /> {t("adding_events_to")}
-          </div>
-        </Badge>
-      )}
-    </div>
-  );
-}

apps/web/pages/settings/my-account/calendars.tsx

@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
 import { Fragment } from "react";
 
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
+import { CalendarSwitch } from "@calcom/features/calendars/CalendarSwitch";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { classNames } from "@calcom/lib";
@@ -29,7 +30,6 @@ import { Plus, Calendar } from "@calcom/ui/components/icon";
 import { QueryCell } from "@lib/QueryCell";
 
 import PageWrapper from "@components/PageWrapper";
-import { CalendarSwitch } from "@components/settings/CalendarSwitch";
 
 const SkeletonLoader = () => {
   return (
@@ -178,15 +178,17 @@ const CalendarsView = () => {
                         </div>
                         <div className="border-subtle w-full border-t">
                           <p className="text-subtle px-2 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
-                          <ul className="space-y-2 p-4">
+                          <ul className="space-y-4 p-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
                                 key={cal.externalId}
                                 externalId={cal.externalId}
                                 title={cal.name || "Nameless calendar"}
+                                name={cal.name || "Nameless calendar"}
                                 type={item.integration.type}
-                                isSelected={cal.isSelected}
-                                defaultSelected={cal.externalId === data?.destinationCalendar?.externalId}
+                                isChecked={
+                                  cal.isSelected || cal.externalId === data?.destinationCalendar?.externalId
+                                }
                               />
                             ))}
                           </ul>

packages/features/calendars/CalendarSwitch.tsx

@@ -1,9 +1,11 @@
 import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
 
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { showToast, Switch } from "@calcom/ui";
-
-import classNames from "@lib/classNames";
+import { ArrowLeft, RotateCcw } from "@calcom/ui/components/icon";
 
 interface ICalendarSwitchProps {
   title: string;
@@ -12,10 +14,13 @@ interface ICalendarSwitchProps {
   isChecked: boolean;
   name: string;
   isLastItemInList?: boolean;
+  destination?: boolean;
 }
 const CalendarSwitch = (props: ICalendarSwitchProps) => {
   const { title, externalId, type, isChecked, name, isLastItemInList = false } = props;
+  const [checkedInternal, setCheckedInternal] = useState(isChecked);
   const utils = trpc.useContext();
+  const { t } = useLocale();
   const mutation = useMutation<
     unknown,
     unknown,
@@ -58,19 +63,22 @@ const CalendarSwitch = (props: ICalendarSwitchProps) => {
     {
       async onSettled() {
         await utils.viewer.integrations.invalidate();
+        await utils.viewer.connectedCalendars.invalidate();
       },
       onError() {
+        setCheckedInternal(false);
         showToast(`Something went wrong when toggling "${title}""`, "error");
       },
     }
   );
   return (
-    <div className={classNames("flex flex-row items-center", !isLastItemInList ? "mb-4" : "")}>
+    <div className={classNames("flex flex-row items-center")}>
       <div className="flex pl-2">
         <Switch
           id={externalId}
-          defaultChecked={isChecked}
+          checked={checkedInternal}
           onCheckedChange={(isOn: boolean) => {
+            setCheckedInternal(isOn);
             mutation.mutate({ isOn });
           }}
         />
@@ -78,6 +86,13 @@ const CalendarSwitch = (props: ICalendarSwitchProps) => {
       <label className="ml-3 text-sm font-medium leading-5" htmlFor={externalId}>
         {name}
       </label>
+      {!!props.destination && (
+        <span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
+          <ArrowLeft className="h-4 w-4" />
+          {t("adding_events_to")}
+        </span>
+      )}
+      {mutation.isLoading && <RotateCcw className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />}
     </div>
   );
 };