From e4a9060911ece72363bd6ab2a0882ac06620e8bd Mon Sep 17 00:00:00 2001
From: Jacobjohnjeevan <mail@jacobjeevan.me>
Date: Fri, 27 Dec 2024 15:30:02 +0530
Subject: [PATCH] minor fixes/tweaks

---
 src/pages/Appoinments/PatientRegistration.tsx |  8 ++++----
 src/pages/Appoinments/PatientSelect.tsx       | 13 ++++++++----
 src/pages/Appoinments/Success.tsx             | 20 +++++++++++--------
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/pages/Appoinments/PatientRegistration.tsx b/src/pages/Appoinments/PatientRegistration.tsx
index 079478a4923..580dfb3c0e4 100644
--- a/src/pages/Appoinments/PatientRegistration.tsx
+++ b/src/pages/Appoinments/PatientRegistration.tsx
@@ -150,15 +150,15 @@ export function PatientRegistration(props: PatientRegistrationProps) {
     onSuccess: (data: Appointment) => {
       Notification.Success({ msg: t("appointment_created_success") });
       queryClient.invalidateQueries({
-        queryKey: ["patients", tokenData.phoneNumber],
+        queryKey: [
+          ["patients", tokenData.phoneNumber],
+          ["appointment", tokenData.phoneNumber],
+        ],
       });
       navigate(
         `/facility/${props.facilityId}/appointments/${data.id}/success`,
         {
           replace: true,
-          // Added to ensure navigate only triggers once data is loaded
-          // Resulted in ErrorBoundary without it
-          state: { appointment: data },
         },
       );
     },
diff --git a/src/pages/Appoinments/PatientSelect.tsx b/src/pages/Appoinments/PatientSelect.tsx
index efb4e2d9a30..8506130ea67 100644
--- a/src/pages/Appoinments/PatientSelect.tsx
+++ b/src/pages/Appoinments/PatientSelect.tsx
@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { navigate } from "raviger";
 import { useState } from "react";
@@ -42,6 +42,8 @@ export default function PatientSelect({
   );
   const [selectedPatient, setSelectedPatient] = useState<string | null>(null);
 
+  const queryClient = useQueryClient();
+
   if (!staffUsername) {
     Notification.Error({ msg: "Staff Username Not Found" });
     navigate(`/facility/${facilityId}/`);
@@ -79,11 +81,14 @@ export default function PatientSelect({
       })(body),
     onSuccess: (data: Appointment) => {
       Notification.Success({ msg: t("appointment_created_success") });
+      queryClient.invalidateQueries({
+        queryKey: [
+          ["patients", tokenData.phoneNumber],
+          ["appointment", tokenData.phoneNumber],
+        ],
+      });
       navigate(`/facility/${facilityId}/appointments/${data.id}/success`, {
         replace: true,
-        // Added to ensure navigate only triggers once data is loaded
-        // Sometimes resulted in ErrorBoundary without it
-        state: { appointment: data },
       });
     },
     onError: (error) => {
diff --git a/src/pages/Appoinments/Success.tsx b/src/pages/Appoinments/Success.tsx
index e3c5e0a3f9c..618e39d61da 100644
--- a/src/pages/Appoinments/Success.tsx
+++ b/src/pages/Appoinments/Success.tsx
@@ -77,10 +77,12 @@ export function AppointmentSuccess(props: { appointmentId: string }) {
             {t("date")}:
           </h2>
           <p className="text-lg font-medium">
-            {format(
-              new Date(appointmentData?.token_slot.start_datetime ?? ""),
-              "do MMMM",
-            )}
+            {appointmentData?.token_slot.start_datetime
+              ? format(
+                  new Date(appointmentData?.token_slot.start_datetime),
+                  "do MMMM",
+                )
+              : ""}
           </p>
         </div>
 
@@ -89,10 +91,12 @@ export function AppointmentSuccess(props: { appointmentId: string }) {
             {t("time")}:
           </h2>
           <p className="text-lg font-medium">
-            {format(
-              new Date(appointmentData?.token_slot.start_datetime ?? ""),
-              "hh:mm a",
-            )}
+            {appointmentData?.token_slot.start_datetime
+              ? format(
+                  new Date(appointmentData?.token_slot.start_datetime),
+                  "hh:mm a",
+                )
+              : ""}
           </p>
         </div>
       </div>