refresh route upon submitting form or deleting appointment

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",

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!",