Bugfix/amend schedule reload (#2254)

* Invalidate onSuccess delete instead of reload

* Added schedule name to availability update + fix update invalidation

Co-authored-by: Omar López <zomars@me.com>

apps/web/pages/availability/[schedule].tsx

@@ -5,6 +5,7 @@ import { Controller, useForm } from "react-hook-form";
 import TimezoneSelect from "react-timezone-select";
 
 import { DEFAULT_SCHEDULE, availabilityAsString } from "@calcom/lib/availability";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import Button from "@calcom/ui/Button";
 import Switch from "@calcom/ui/Switch";
@@ -12,7 +13,6 @@ import { Form } from "@calcom/ui/form/fields";
 
 import { QueryCell } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
-import { useLocale } from "@lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import Shell from "@components/Shell";
@@ -22,6 +22,7 @@ import EditableHeading from "@components/ui/EditableHeading";
 export function AvailabilityForm(props: inferQueryOutput<"viewer.availability.schedule">) {
   const { t } = useLocale();
   const router = useRouter();
+  const utils = trpc.useContext();
 
   const form = useForm({
     defaultValues: {
@@ -32,10 +33,15 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability.sc
   });
 
   const updateMutation = trpc.useMutation("viewer.availability.schedule.update", {
-    onSuccess: async () => {
+    onSuccess: async ({ schedule }) => {
+      await utils.invalidateQueries(["viewer.availability.schedule"]);
       await router.push("/availability");
-      window.location.reload();
-      showToast(t("availability_updated_successfully"), "success");
+      showToast(
+        t("availability_updated_successfully", {
+          scheduleName: schedule.name,
+        }),
+        "success"
+      );
     },
     onError: (err) => {
       if (err instanceof HttpError) {
@@ -137,10 +143,10 @@ export default function Availability() {
             <Shell
               heading={<EditableHeading title={data.schedule.name} onChange={setName} />}
               subtitle={data.schedule.availability.map((availability) => (
-                <>
+                <span key={availability.id}>
                   {availabilityAsString(availability, i18n.language)}
                   <br />
-                </>
+                </span>
               ))}>
               <AvailabilityForm
                 {...{ ...data, schedule: { ...data.schedule, name: name || data.schedule.name } }}

apps/web/pages/availability/index.tsx

@@ -19,10 +19,11 @@ import { NewScheduleButton } from "@components/availability/NewScheduleButton";
 
 export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availability.list">) {
   const { t, i18n } = useLocale();
+  const utils = trpc.useContext();
   const deleteMutation = trpc.useMutation("viewer.availability.schedule.delete", {
     onSuccess: async () => {
+      await utils.invalidateQueries(["viewer.availability.list"]);
       showToast(t("schedule_deleted_successfully"), "success");
-      window.location.reload();
     },
     onError: (err) => {
       if (err instanceof HttpError) {

apps/web/public/static/locales/en/common.json

@@ -547,7 +547,6 @@
   "billing": "Billing",
   "manage_your_billing_info": "Manage your billing information and cancel your subscription.",
   "availability": "Availability",
-  "availability_updated_successfully": "Availability updated successfully",
   "configure_availability": "Configure times when you are available for bookings.",
   "change_weekly_schedule": "Change your weekly schedule",
   "logo": "Logo",
@@ -698,6 +697,7 @@
   "add_new_schedule": "Add a new schedule",
   "delete_schedule": "Delete schedule",
   "schedule_created_successfully": "{{scheduleName}} schedule created successfully",
+  "availability_updated_successfully": "{{scheduleName}} schedule updated successfully",
   "schedule_deleted_successfully": "Schedule deleted successfully",
   "default_schedule_name": "Working Hours",
   "new_schedule_heading": "Create an availability schedule",

apps/web/server/routers/viewer/availability.tsx

@@ -191,7 +191,7 @@ export const availabilityRouter = createProtectedRouter()
         });
       }
 
-      await prisma.schedule.update({
+      const schedule = await prisma.schedule.update({
         where: {
           id: input.scheduleId,
         },
@@ -214,5 +214,9 @@ export const availabilityRouter = createProtectedRouter()
           },
         },
       });
+
+      return {
+        schedule,
+      };
     },
   });