Merge pull request #25 from tnamdevnote/fix/revalidate-on-submit

Fix/Revalidate Appointment List on Submit
tnamdevnote · May 10, 2024 · 95038f0 · 95038f0
2 parents ce0d5f8 + 04aa5f0
commit 95038f0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git 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
@@ -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!",

diff --git a/lib/sanity/client.ts b/lib/sanity/client.ts
@@ -96,9 +96,6 @@ export const getAppointments = async (userId = "") => {
         stylist->{"id": _id, firstName, lastName}
       }
     `,
-    {},
-    // this will let next js trigger revalidation when revalidate function is called
-    { next: { tags: ["appointments"] } },
   );
 
   return res;