From 6dd54c4a22f90576f83c7b96e40639ff042478ab Mon Sep 17 00:00:00 2001
From: Taek Been Nam <taekbeen93@gmail.com>
Date: Thu, 9 May 2024 20:43:43 -0400
Subject: [PATCH] refresh route upon submitting form or deleting appointment

---
 .../components/appointmentForm/appointmentForm.tsx             | 3 +++
 .../my-appointments/components/cancelDialog/cancelDialog.tsx   | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/app/(protected)/my-appointments/components/appointmentForm/appointmentForm.tsx b/app/(protected)/my-appointments/components/appointmentForm/appointmentForm.tsx
index bb43eea..5fcb89f 100644
--- a/app/(protected)/my-appointments/components/appointmentForm/appointmentForm.tsx
+++ b/app/(protected)/my-appointments/components/appointmentForm/appointmentForm.tsx
@@ -20,6 +20,7 @@ import { cn, formatToDisplayDate, formatToDisplayTime } from "@/lib/utils";
 import AppointmentDateTimePicker from "../appointmentDateTimePicker/appointmentDateTimePicker";
 import { APPOINTMENT_QUERYResult } from "@/lib/sanity/sanity.types";
 import { SplitContainer } from "@/components/templates/container";
+import { useRouter } from "next/navigation";
 
 /**
  * Extracted async calls into its own functions to manage them separate from rendering logic.
@@ -97,6 +98,7 @@ export const AppointmentForm = ({
 }: AppointmentFormProps) => {
   const submitBtnLabel = (mode === "create" ? "Book" : "Edit") + " Appointment";
   const { toast } = useToast();
+  const router = useRouter();
   const form = useForm<z.infer<typeof FormSchema>>({
     defaultValues:
       mode === "edit" && !!appointment
@@ -125,6 +127,7 @@ export const AppointmentForm = ({
       await sendEmail(values);
 
       onClose ? onClose() : null;
+      router.refresh();
       toast({
         title: `Your appointment has been successfully ${mode === "create" ? "booked" : "updated"}!`,
         intent: "success",
diff --git a/app/(protected)/my-appointments/components/cancelDialog/cancelDialog.tsx b/app/(protected)/my-appointments/components/cancelDialog/cancelDialog.tsx
index d0d8dc7..5172912 100644
--- a/app/(protected)/my-appointments/components/cancelDialog/cancelDialog.tsx
+++ b/app/(protected)/my-appointments/components/cancelDialog/cancelDialog.tsx
@@ -16,6 +16,7 @@ import {
 import { useToast } from "@/components/molecules/toast";
 import { Button } from "@/components/atoms/button";
 import cancel_img from "./cancel_img.svg";
+import { useRouter } from "next/navigation";
 
 const cancelAppointment = async (
   url: string,
@@ -45,6 +46,7 @@ export default function CancelDialog({
 }: CancelDialogProps) {
   const { toast } = useToast();
   const [open, setOpen] = useState(false);
+  const router = useRouter();
   const { trigger: swrTrigger, isMutating } = useSWRMutation(
     "/api/my-appointments",
     cancelAppointment,
@@ -54,6 +56,7 @@ export default function CancelDialog({
     try {
       await swrTrigger({ appointmentId });
       if (!isMutating) {
+        router.refresh();
         setOpen(false);
         toast({
           title: "Your appointment has been cancelled!",