more tweaks, renaming, added dialog for patient appointments

rajku-dev · Dec 27, 2024 · 317e792 · 317e792
1 parent e4a9060
commit 317e792
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 70 deletions.
diff --git a/src/Routers/PatientRouter.tsx b/src/Routers/PatientRouter.tsx
@@ -37,14 +37,14 @@ const tokenData: TokenData = JSON.parse(
 );
 
 export const PatientUserContext = createContext<{
-  users?: AppointmentPatient[];
-  selectedUser: AppointmentPatient | null;
-  setSelectedUser: (user: AppointmentPatient) => void;
+  patients?: AppointmentPatient[];
+  selectedPatient: AppointmentPatient | null;
+  setSelectedPatient: (patient: AppointmentPatient) => void;
   tokenData: TokenData;
 }>({
-  users: undefined,
-  selectedUser: null,
-  setSelectedUser: () => {},
+  patients: undefined,
+  selectedPatient: null,
+  setSelectedPatient: () => {},
   tokenData: tokenData,
 });
 
@@ -53,10 +53,9 @@ export default function PatientRouter() {
 
   const path = usePath();
   const [sidebarOpen, setSidebarOpen] = useState(false);
-  const [users, setUsers] = useState<AppointmentPatient[]>([]);
-  const [selectedUser, setSelectedUser] = useState<AppointmentPatient | null>(
-    null,
-  );
+  const [patients, setPatients] = useState<AppointmentPatient[]>([]);
+  const [selectedPatient, setSelectedPatient] =
+    useState<AppointmentPatient | null>(null);
 
   const { data: userData } = useQuery({
     queryKey: ["patients", tokenData.phoneNumber],
@@ -70,8 +69,15 @@ export default function PatientRouter() {
 
   useEffect(() => {
     if (userData) {
-      setUsers(userData.results);
-      setSelectedUser(userData.results[0]);
+      setPatients(userData.results);
+      const localPatient: AppointmentPatient | undefined = JSON.parse(
+        localStorage.getItem("selectedPatient") || "{}",
+      );
+      const selectedPatient =
+        userData.results.find((patient) => patient.id === localPatient?.id) ||
+        userData.results[0];
+      setSelectedPatient(selectedPatient);
+      localStorage.setItem("selectedPatient", JSON.stringify(selectedPatient));
     }
   }, [userData]);
 
@@ -98,7 +104,12 @@ export default function PatientRouter() {
 
   return (
     <PatientUserContext.Provider
-      value={{ users, selectedUser, setSelectedUser, tokenData }}
+      value={{
+        patients,
+        selectedPatient,
+        setSelectedPatient,
+        tokenData,
+      }}
     >
       <SidebarShrinkContext.Provider value={{ shrinked, setShrinked }}>
         <div className="flex h-screen overflow-hidden bg-secondary-100 print:overflow-visible">

diff --git a/src/components/Common/Sidebar/PatientSidebar.tsx b/src/components/Common/Sidebar/PatientSidebar.tsx
@@ -115,16 +115,16 @@ export const PatientStatelessSidebar = ({
   const [lastIndicatorPosition, setLastIndicatorPosition] = useState(0);
   const [isOverflowVisible, setOverflowVisisble] = useState(false);
   const {
-    users,
-    selectedUser,
-    setSelectedUser,
+    patients,
+    selectedPatient,
+    setSelectedPatient,
   }: {
-    users?: AppointmentPatient[] | undefined;
-    selectedUser: AppointmentPatient | null;
-    setSelectedUser: (user: AppointmentPatient) => void;
+    patients?: AppointmentPatient[] | undefined;
+    selectedPatient: AppointmentPatient | null;
+    setSelectedPatient: (patient: AppointmentPatient) => void;
   } = useContext(PatientUserContext);
 
-  const NavItems = GetNavItems(selectedUser);
+  const NavItems = GetNavItems(selectedPatient);
 
   const updateIndicator = () => {
     if (!indicatorRef.current) return;
@@ -212,12 +212,16 @@ export const PatientStatelessSidebar = ({
           )}
         >
           <Select
-            disabled={users?.length === 0}
-            value={users ? selectedUser?.id : "Book "}
+            disabled={patients?.length === 0}
+            value={patients ? selectedPatient?.id : "Book "}
             onValueChange={(value) => {
-              const user = users?.find((user) => user.id === value);
-              if (user) {
-                setSelectedUser(user);
+              const patient = patients?.find((patient) => patient.id === value);
+              if (patient) {
+                setSelectedPatient(patient);
+                localStorage.setItem(
+                  "selectedPatient",
+                  JSON.stringify(patient),
+                );
               }
             }}
           >
@@ -226,15 +230,17 @@ export const PatientStatelessSidebar = ({
                 asChild
                 placeholder={
                   !shrinked &&
-                  (users?.length === 0 ? t("no_patients") : t("select_patient"))
+                  (patients?.length === 0
+                    ? t("no_patients")
+                    : t("select_patient"))
                 }
               >
                 <div className="flex flex-row justify-between items-center gap-2 w-full text-primary-800">
-                  <Avatar name={selectedUser?.name} className="h-4 w-4" />
+                  <Avatar name={selectedPatient?.name} className="h-4 w-4" />
                   {!shrinked && (
                     <div className="flex flex-row items-center justify-between w-full gap-2">
                       <span className="font-semibold truncate max-w-32">
-                        {selectedUser?.name}
+                        {selectedPatient?.name}
                       </span>
                       <span className="text-xs text-secondary-600">
                         {t("switch")}
@@ -245,11 +251,11 @@ export const PatientStatelessSidebar = ({
               </SelectValue>
             </SelectTrigger>
             <SelectContent>
-              {users?.map((user) => (
-                <SelectItem key={user.id} value={user.id}>
+              {patients?.map((patient) => (
+                <SelectItem key={patient.id} value={patient.id}>
                   <div className="flex flex-row items-center gap-2">
-                    <Avatar name={user.name} className="h-4 w-4" />
-                    {user.name}
+                    <Avatar name={patient.name} className="h-4 w-4" />
+                    {patient.name}
                   </div>
                 </SelectItem>
               ))}

diff --git a/src/components/Common/Sidebar/PatientSidebarUserCard.tsx b/src/components/Common/Sidebar/PatientSidebarUserCard.tsx
@@ -26,7 +26,7 @@ const PatientSidebarUserCard: React.FC<SidebarUserCardProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const { selectedUser, tokenData } = useContext(PatientUserContext);
+  const { selectedPatient, tokenData } = useContext(PatientUserContext);
 
   const signOut = useSignOut();
 
@@ -49,14 +49,18 @@ const PatientSidebarUserCard: React.FC<SidebarUserCardProps> = ({
             >
               <div className="flex-none text-lg">
                 <Avatar
-                  {...(selectedUser != null && { name: selectedUser.name })}
+                  {...(selectedPatient != null && {
+                    name: selectedPatient.name,
+                  })}
                   className="h-6 w-6"
                 />
               </div>
               <div className="max-w-32">
                 {!shrinked && (
                   <p className="truncate pl-1 text-xs font-medium tracking-wide">
-                    {selectedUser ? selectedUser.name : tokenData.phoneNumber}
+                    {selectedPatient
+                      ? selectedPatient.name
+                      : tokenData.phoneNumber}
                   </p>
                 )}
               </div>

diff --git a/src/components/Common/Sidebar/Utils.tsx b/src/components/Common/Sidebar/Utils.tsx
@@ -10,6 +10,7 @@ const getRedirectURL = () => {
 export const useSignOut = () => {
   const signOut = useCallback(async () => {
     localStorage.removeItem(CarePatientTokenKey);
+    localStorage.removeItem("selectedPatient");
 
     const redirectURL = getRedirectURL();
     navigate(redirectURL ? `/login?redirect=${redirectURL}` : "/login");

diff --git a/src/components/Schedule/Appointments/AppointmentDetailsPage.tsx b/src/components/Schedule/Appointments/AppointmentDetailsPage.tsx
@@ -243,12 +243,26 @@ const AppointmentDetails = ({
             <div>
               <p className="font-medium">{appointment.patient.name}</p>
               <p className="text-gray-600">
-                {format(appointment.patient.date_of_birth!, "MMMM d, yyyy")} (
-                {differenceInYears(
-                  new Date(),
-                  appointment.patient.date_of_birth!,
+                {appointment.patient.date_of_birth && (
+                  <>
+                    {format(appointment.patient.date_of_birth, "MMMM d, yyyy")}{" "}
+                    {differenceInYears(
+                      new Date(),
+                      appointment.patient.date_of_birth!,
+                    )}
+                  </>
+                )}
+                {appointment.patient.year_of_birth && (
+                  <>
+                    {differenceInYears(
+                      new Date(),
+                      new Date().setFullYear(
+                        Number(appointment.patient.year_of_birth),
+                      ),
+                    )}
+                  </>
                 )}{" "}
-                {t("years")})
+                {t("years")}
               </p>
             </div>
           </div>

diff --git a/src/components/Schedule/Appointments/utils.ts b/src/components/Schedule/Appointments/utils.ts
@@ -106,6 +106,9 @@ const getInfiniteAvailabilityHeatmap = ({
 };
 
 export const formatAppointmentSlotTime = (appointment: Appointment) => {
+  if (!appointment.token_slot?.start_datetime) {
+    return "";
+  }
   return format(appointment.token_slot.start_datetime, "dd MMM, yyyy, hh:mm a");
 };