file renaming and some tweaks

rajku-dev · Dec 27, 2024 · c297b92 · c297b92
1 parent 79afe4e
commit c297b92
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 58 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -46,7 +46,7 @@ const App = () => {
             <HistoryAPIProvider>
               <AuthUserProvider
                 unauthorized={<Routers.SessionRouter />}
-                otpAuthorized={<Routers.OTPPatientRouter />}
+                otpAuthorized={<Routers.PatientRouter />}
               >
                 <FeatureFlagsProvider>
                   <Routers.AppRouter />

diff --git a/src/Routers/OTPPatientRouter.tsx → src/Routers/PatientRouter.tsx b/src/Routers/OTPPatientRouter.tsx → src/Routers/PatientRouter.tsx
@@ -5,10 +5,10 @@ import { createContext, useEffect, useState } from "react";
 
 import ErrorBoundary from "@/components/Common/ErrorBoundary";
 import {
-  OTPPatientDesktopSidebar,
-  OTPPatientMobileSidebar,
+  PatientDesktopSidebar,
+  PatientMobileSidebar,
   SIDEBAR_SHRINK_PREFERENCE_KEY,
-} from "@/components/Common/Sidebar/OTPPatientSidebar";
+} from "@/components/Common/Sidebar/PatientSidebar";
 import { SidebarShrinkContext } from "@/components/Common/Sidebar/Sidebar";
 import ErrorPage from "@/components/ErrorPages/DefaultErrorPage";
 
@@ -18,25 +18,25 @@ import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import { AppointmentSuccess } from "@/pages/Appoinments/Success";
 import { AppointmentPatient } from "@/pages/Patient/Utils";
-import OTPPatientHome from "@/pages/Patient/index";
+import PatientHome from "@/pages/Patient/index";
 import { TokenData } from "@/types/auth/otpToken";
 
 import SessionRouter from "./SessionRouter";
 
-const OTPPatientRoutes = {
+const PatientRoutes = {
   "/facility/:facilityId/appointments/:appointmentId/success": ({
     appointmentId,
   }: {
     appointmentId: string;
   }) => <AppointmentSuccess appointmentId={appointmentId} />,
-  "/patient/home": () => <OTPPatientHome />,
+  "/patient/home": () => <PatientHome />,
 };
 
 const tokenData: TokenData = JSON.parse(
   localStorage.getItem(CarePatientTokenKey) || "{}",
 );
 
-export const OTPPatientUserContext = createContext<{
+export const PatientUserContext = createContext<{
   users?: AppointmentPatient[];
   selectedUser: AppointmentPatient | null;
   setSelectedUser: (user: AppointmentPatient) => void;
@@ -48,8 +48,8 @@ export const OTPPatientUserContext = createContext<{
   tokenData: tokenData,
 });
 
-export default function OTPPatientRouter() {
-  const pages = useRoutes(OTPPatientRoutes);
+export default function PatientRouter() {
+  const pages = useRoutes(PatientRoutes);
 
   const path = usePath();
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -97,20 +97,20 @@ export default function OTPPatientRouter() {
   }
 
   return (
-    <OTPPatientUserContext.Provider
+    <PatientUserContext.Provider
       value={{ users, selectedUser, setSelectedUser, tokenData }}
     >
       <SidebarShrinkContext.Provider value={{ shrinked, setShrinked }}>
         <div className="flex h-screen overflow-hidden bg-secondary-100 print:overflow-visible">
           <>
             <div className="block md:hidden">
-              <OTPPatientMobileSidebar
+              <PatientMobileSidebar
                 open={sidebarOpen}
                 setOpen={setSidebarOpen}
               />{" "}
             </div>
             <div className="hidden md:block">
-              <OTPPatientDesktopSidebar />
+              <PatientDesktopSidebar />
             </div>
           </>
 
@@ -165,6 +165,6 @@ export default function OTPPatientRouter() {
           </div>
         </div>
       </SidebarShrinkContext.Provider>
-    </OTPPatientUserContext.Provider>
+    </PatientUserContext.Provider>
   );
 }
diff --git a/src/Routers/SessionRouter.tsx b/src/Routers/SessionRouter.tsx
@@ -9,7 +9,7 @@ import SessionExpired from "@/components/ErrorPages/SessionExpired";
 import { PatientRegistration } from "@/pages/Appoinments/PatientRegistration";
 import PatientSelect from "@/pages/Appoinments/PatientSelect";
 import { ScheduleAppointment } from "@/pages/Appoinments/Schedule";
-import OTP from "@/pages/Appoinments/auth/OTP";
+import PatientLogin from "@/pages/Appoinments/auth/PatientLogin";
 import { FacilitiesPage } from "@/pages/Facility/FacilitiesPage";
 import { FacilityDetailsPage } from "@/pages/Facility/FacilityDetailsPage";
 import { LandingPage } from "@/pages/Landing/LandingPage";
@@ -29,7 +29,11 @@ export const routes = {
     staffUsername: string;
     page: string;
   }) => (
-    <OTP facilityId={facilityId} staffUsername={staffUsername} page={page} />
+    <PatientLogin
+      facilityId={facilityId}
+      staffUsername={staffUsername}
+      page={page}
+    />
   ),
   "/facility/:facilityId/appointments/:staffExternalId/book-appointment": ({
     facilityId,

diff --git a/src/Routers/index.tsx b/src/Routers/index.tsx
@@ -1,7 +1,7 @@
 import AppRouter from "@/Routers/AppRouter";
-import OTPPatientRouter from "@/Routers/OTPPatientRouter";
+import PatientRouter from "@/Routers/PatientRouter";
 import SessionRouter from "@/Routers/SessionRouter";
 
-const routers = { OTPPatientRouter, SessionRouter, AppRouter };
+const routers = { PatientRouter, SessionRouter, AppRouter };
 
 export default routers;
diff --git a/...ents/Common/Sidebar/OTPPatientSidebar.tsx → ...ponents/Common/Sidebar/PatientSidebar.tsx b/...ents/Common/Sidebar/OTPPatientSidebar.tsx → ...ponents/Common/Sidebar/PatientSidebar.tsx
@@ -27,12 +27,12 @@ import {
 
 import useActiveLink from "@/hooks/useActiveLink";
 
-import { OTPPatientUserContext } from "@/Routers/OTPPatientRouter";
+import { PatientUserContext } from "@/Routers/PatientRouter";
 import { classNames } from "@/Utils/utils";
 import { AppointmentPatient } from "@/pages/Patient/Utils";
 
 import { Avatar } from "../Avatar";
-import OTPPatientSidebarUserCard from "./OTPPatientSidebarUserCard";
+import PatientSidebarUserCard from "./PatientSidebarUserCard";
 
 export const SIDEBAR_SHRINK_PREFERENCE_KEY = "sidebarShrinkPreference";
 
@@ -62,10 +62,10 @@ const GetNavItems = (selectedUser: AppointmentPatient | null) => {
   return BaseNavItems;
 };
 
-export const OTPPatientDesktopSidebar = () => {
+export const PatientDesktopSidebar = () => {
   const { shrinked, setShrinked } = useContext(SidebarShrinkContext);
   return (
-    <OTPPatientStatelessSidebar
+    <PatientStatelessSidebar
       shrinked={shrinked}
       setShrinked={setShrinked}
       shrinkable
@@ -78,10 +78,10 @@ interface MobileSidebarProps {
   setOpen: (state: boolean) => void;
 }
 
-export const OTPPatientMobileSidebar = (props: MobileSidebarProps) => {
+export const PatientMobileSidebar = (props: MobileSidebarProps) => {
   return (
     <SlideOver {...props} slideFrom="left" onlyChild>
-      <OTPPatientStatelessSidebar onItemClick={props.setOpen} />
+      <PatientStatelessSidebar onItemClick={props.setOpen} />
     </SlideOver>
   );
 };
@@ -100,7 +100,7 @@ type StatelessSidebarProps =
       onItemClick: (open: boolean) => void;
     };
 
-export const OTPPatientStatelessSidebar = ({
+export const PatientStatelessSidebar = ({
   shrinked = false,
   setShrinked,
   onItemClick,
@@ -122,7 +122,7 @@ export const OTPPatientStatelessSidebar = ({
     users?: AppointmentPatient[] | undefined;
     selectedUser: AppointmentPatient | null;
     setSelectedUser: (user: AppointmentPatient) => void;
-  } = useContext(OTPPatientUserContext);
+  } = useContext(PatientUserContext);
 
   const NavItems = GetNavItems(selectedUser);
 
@@ -279,7 +279,7 @@ export const OTPPatientStatelessSidebar = ({
           })}
         </div>
         <div className="hidden md:block md:flex-1" />
-        <OTPPatientSidebarUserCard shrinked={shrinked} />
+        <PatientSidebarUserCard shrinked={shrinked} />
       </div>
     </nav>
   );

diff --git a/...mon/Sidebar/OTPPatientSidebarUserCard.tsx → ...Common/Sidebar/PatientSidebarUserCard.tsx b/...mon/Sidebar/OTPPatientSidebarUserCard.tsx → ...Common/Sidebar/PatientSidebarUserCard.tsx
@@ -13,20 +13,20 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 
-import { OTPPatientUserContext } from "@/Routers/OTPPatientRouter";
+import { PatientUserContext } from "@/Routers/PatientRouter";
 
 import { useSignOut } from "./Utils";
 
 interface SidebarUserCardProps {
   shrinked: boolean;
 }
 
-const OTPPatientSidebarUserCard: React.FC<SidebarUserCardProps> = ({
+const PatientSidebarUserCard: React.FC<SidebarUserCardProps> = ({
   shrinked,
 }) => {
   const { t } = useTranslation();
 
-  const { selectedUser, tokenData } = useContext(OTPPatientUserContext);
+  const { selectedUser, tokenData } = useContext(PatientUserContext);
 
   const signOut = useSignOut();
 
@@ -80,4 +80,4 @@ const OTPPatientSidebarUserCard: React.FC<SidebarUserCardProps> = ({
   );
 };
 
-export default OTPPatientSidebarUserCard;
+export default PatientSidebarUserCard;
diff --git a/src/pages/Appoinments/PatientRegistration.tsx b/src/pages/Appoinments/PatientRegistration.tsx
@@ -152,12 +152,15 @@ export function PatientRegistration(props: PatientRegistrationProps) {
       queryClient.invalidateQueries({
         queryKey: ["patients", tokenData.phoneNumber],
       });
-      setTimeout(() => {
-        navigate(
-          `/facility/${props.facilityId}/appointments/${data.id}/success`,
-          { replace: true },
-        );
-      }, 100);
+      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 },
+        },
+      );
     },
     onError: (error) => {
       Notification.Error({

diff --git a/src/pages/Appoinments/PatientSelect.tsx b/src/pages/Appoinments/PatientSelect.tsx
@@ -8,6 +8,7 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
 
+import Loading from "@/components/Common/Loading";
 import {
   Appointment,
   AppointmentCreate,
@@ -54,18 +55,18 @@ export default function PatientSelect({
     );
   }
 
-  const { data: patientData } = useQuery<PaginatedResponse<AppointmentPatient>>(
-    {
-      queryKey: ["otp-patient"],
-      queryFn: query(routes.otp.getPatient, {
-        headers: {
-          Authorization: `Bearer ${tokenData.token}`,
-          "Content-Type": "application/json",
-        },
-      }),
-      enabled: !!tokenData.token,
-    },
-  );
+  const { data: patientData, isLoading } = useQuery<
+    PaginatedResponse<AppointmentPatient>
+  >({
+    queryKey: ["otp-patient"],
+    queryFn: query(routes.otp.getPatient, {
+      headers: {
+        Authorization: `Bearer ${tokenData.token}`,
+        "Content-Type": "application/json",
+      },
+    }),
+    enabled: !!tokenData.token,
+  });
 
   const { mutate: createAppointment } = useMutation({
     mutationFn: (body: AppointmentCreate) =>
@@ -78,7 +79,12 @@ export default function PatientSelect({
       })(body),
     onSuccess: (data: Appointment) => {
       Notification.Success({ msg: t("appointment_created_success") });
-      navigate(`/facility/${facilityId}/appointments/${data.id}/success`);
+      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) => {
       Notification.Error({
@@ -204,9 +210,15 @@ export default function PatientSelect({
       </div>
       <div className="flex flex-col justify-center space-y-4 bg-white rounded-lg shadow-md p-8">
         <h3 className="text-lg font-medium">{t("select_register_patient")}</h3>
-        {(patients?.length ?? 0) > 0
-          ? renderPatientList()
-          : renderNoPatientFound()}
+        {isLoading ? (
+          <div className="flex justify-center items-center">
+            <Loading />
+          </div>
+        ) : (patients?.length ?? 0) > 0 ? (
+          renderPatientList()
+        ) : (
+          renderNoPatientFound()
+        )}
         <Button
           variant="primary_gradient"
           className="w-1/2 self-center"

diff --git a/src/pages/Appoinments/auth/OTP.tsx → src/pages/Appoinments/auth/PatientLogin.tsx b/src/pages/Appoinments/auth/OTP.tsx → src/pages/Appoinments/auth/PatientLogin.tsx
@@ -45,7 +45,7 @@ const FormSchema = z.object({
   }),
 });
 
-export default function OTP({
+export default function PatientLogin({
   facilityId,
   staffUsername,
   page,

diff --git a/src/pages/Patient/index.tsx b/src/pages/Patient/index.tsx
@@ -14,22 +14,22 @@ import { Appointment } from "@/components/Schedule/types";
 
 import { CarePatientTokenKey } from "@/common/constants";
 
-import { OTPPatientUserContext } from "@/Routers/OTPPatientRouter";
+import { PatientUserContext } from "@/Routers/PatientRouter";
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import { formatName } from "@/Utils/utils";
 import { TokenData } from "@/types/auth/otpToken";
 
 import { AppointmentPatient } from "./Utils";
 
-function OTPPatientHome() {
+function PatientHome() {
   const { t } = useTranslation();
   const tokenData: TokenData = JSON.parse(
     localStorage.getItem(CarePatientTokenKey) || "{}",
   );
 
   const { selectedUser }: { selectedUser: AppointmentPatient | null } =
-    useContext(OTPPatientUserContext);
+    useContext(PatientUserContext);
 
   if (!tokenData) {
     navigate("/login");
@@ -178,4 +178,4 @@ function OTPPatientHome() {
   );
 }
 
-export default OTPPatientHome;
+export default PatientHome;