Modify patient object

src/App.tsx

@@ -1,4 +1,5 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { AppContext, AppContextType,  PatientObjSubset } from './context/AppContext';
 import { AppContext, AppContextType } from './context/AppContext';
 import { useState } from 'react';
 import PatientSearch from './components/patientSearch/Patient';
@@ -13,11 +14,40 @@ import Moh731SyncQueueComponent from './components/RdeSync/Moh731Sync.component'
 import Observation from './components/observations/Observation';
 
 const App = () => {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  const [currentPatient] = useState<Object[]>([]);
+  const [currentPatient, setCurrentPatient] = useState<PatientObjSubset>({
+    preferredName: {
+      uuid: '',
+      display: '',
+      links: [],
+    },
+    preferredAddress: {
+      uuid: '',
+      display: '',
+      links: [],
+    },
+    gender: '',
+    age: 0,
+    birthdate: '',
+  });
+
 
   const contextValue: AppContextType = {
-    currentPatient,
+    currentPatient: {
+      preferredName: currentPatient.preferredName || {
+        uuid: '',
+        display: '',
+        links: [],
+      },
+      preferredAddress: currentPatient.preferredAddress || {
+        uuid: '',
+        display: '',
+        links: [],
+      },
+      gender: currentPatient.gender || '',
+      age: currentPatient.age || 0,
+      birthdate: currentPatient.birthdate || '',
+    },
+    setCurrentPatient,
   };
 
   return (

src/components/PatientInformation.tsx

@@ -5,51 +5,44 @@ import SideNavBar from './SideNavBar/SideNavBar';
 
 const PatientInformation = () => {
   const { currentPatient } = useContext(AppContext);
-
   return (
     <>
       <Header shouldRenderSearchLink={true} />
       <SideNavBar />
       <div className="bg-lightGray h-screen">
-        {currentPatient.length <= 1 ? (
-          currentPatient.map((info: any = {}, index) => (
-            <>
-              <div className="sm:w-[85%] mx-auto sm:flex pt-8 lg:ml-[20%] " key={index}>
+      <>
+              <div className="sm:w-[85%] mx-auto sm:flex pt-8 lg:ml-[20%] ">
                 <div className="bg-hashBlue p-4 rounded sm:w-md ">
                   <div className="bg-lightGray rounded-full mx-auto w-36 h-36 flex justify-center items-center">
-                    <h1 className="text-9xl font-bold ">{info[0].person.preferredName.display[0]}</h1>
+                    <h1 className="text-9xl font-bold ">{currentPatient?.preferredName?.display?.[0]}</h1>
                   </div>
                   <div>
-                    <h3 className="font-bold text-white text-center">{info[0].person.preferredName.display}</h3>
+                    <h3 className="font-bold text-white text-center">{currentPatient?.preferredName?.display}</h3>
                   </div>
                 </div>
                 <div
                   className="grid grid-cols-1 gap-8 md:text-sm 2xl:text-lg md:grid-cols-4
                   p-8 bg-white rounded md:w-[75%] justify-between"
                 >
-                  <div key={index}>
+                  <div >
                     <b>Address</b>
-                    <p>{info[0].person.preferredAddress.display}</p>
+                    <p>{currentPatient?.preferredAddress?.display}</p>
                   </div>
                   <div>
                     <b>Gender</b>
-                    <p>{info[0]?.person.gender}</p>
+                    <p>{currentPatient?.gender}</p>
                   </div>
                   <div>
                     <b>Age</b>
-                    <p>{info[0]?.person.age}</p>
+                    <p>{currentPatient?.age}</p>
                   </div>
                   <div>
                     <b>Date of Birth</b>
-                    <p>{new Date(info[0]?.person.birthdate).toLocaleString().split(' ')[0].slice(0, -1)}</p>
+                    <p>{currentPatient?.birthdate}</p>
                   </div>
                 </div>
               </div>
             </>
-          ))
-        ) : (
-          <p className="absolute ml-[15%]">Go to search patient..</p>
-        )}
       </div>
     </>
   );

src/components/SideNavBar/SideNavBar.tsx

@@ -3,34 +3,29 @@ import { AiOutlineInfoCircle } from 'react-icons/ai';
 import { BsPencilSquare } from 'react-icons/bs';
 import { FaWalking, FaRegCalendarAlt } from 'react-icons/fa';
 import { BiBandAid } from 'react-icons/bi';
-import { NavLink } from 'react-router-dom';
-import { AppContext } from '../../context/AppContext';
-
+import { NavLink, useParams } from 'react-router-dom';
 const SideNavBar = () => {
   const activeStyle = {
     color: '#2FBAF1',
     cursor: 'pointer',
   };
 
-  const { currentPatient } = useContext(AppContext);
+  const {id} = useParams()
 
-  const patientId = currentPatient.map((info: any = {}) => {
-    return info[0].uuid;
-  });
 
   return (
     <div className="hidden md:block absolute bg-white h-screen pl-[2%] shadow-lg">
       <nav className="mt-20">
         <ul className="flex flex-col gap-10 text-xl mr-2">
-          <NavLink to={`/patientInfo/${patientId}`} style={({ isActive }) => (isActive ? activeStyle : undefined)}>
+          <NavLink to={`/patientInfo/${id}`} style={({ isActive }) => (isActive ? activeStyle : undefined)}>
             <li className="py-2 px-4 flex gap-2 items-center hover:cursor-pointer hover:shadow-md">
               <span>
                 <AiOutlineInfoCircle />{' '}
               </span>
               Patients Info
             </li>
           </NavLink>
-          <NavLink to={`/patient/${patientId}/orders`} style={({ isActive }) => (isActive ? activeStyle : undefined)}>
+          <NavLink to={`/patient/${id}/orders`} style={({ isActive }) => (isActive ? activeStyle : undefined)}>
             <li className="py-2 px-4 flex gap-2 items-center hover:cursor-pointer hover:shadow-md">
               <BsPencilSquare />
               Orders

src/components/authentication/AuthenticationResource.ts

@@ -5,7 +5,7 @@ const AuthenticationResource = async (username: string, password: string) => {
     error: '',
   };
   if (username.trim().length !== 0 && password.trim().length !== 0) {
-    const result = await fetch(`/ws/rest/v1/session`, {
+    const result = await fetch(`/openmrs/ws/rest/v1/session`, {
       headers: {
         Authorization: 'Basic ' + btoa(username + ':' + password),
       },

src/components/patientSearch/DisplayPatientResult.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import AdvanceFilters from './AdvanceFilters';
-import { useContext } from 'react';
-import { AppContext } from '../../context/AppContext';
+import { useContext} from 'react';
+import { AppContext, PatientObj } from '../../context/AppContext';
 
 interface SearchPatientProps {
   searchedPatientsResult: any;
@@ -14,18 +14,18 @@ const DisplayPatientResult: React.FC<SearchPatientProps> = ({
   searchedPatientsResult,
   setSearchedPatientsResult,
   isTrue,
-}: SearchPatientProps) => {
-  const { currentPatient } = useContext(AppContext);
-
+}) => {
+  const { setCurrentPatient } = useContext(AppContext);
   const navigate = useNavigate();
 
   const handleRedirection = (id: number) => {
-    currentPatient.length = 0;
-    // eslint-disable-next-line @typescript-eslint/ban-types, no-empty-pattern
-    const result: Object[] = ([] = searchedPatientsResult.filter((data: any) => data.uuid === id));
-    currentPatient.push(result);
+    const result: PatientObj | undefined = searchedPatientsResult.find((data: any) => data.uuid === id);
+  if (result) {
+    const { preferredName, preferredAddress, gender, age, birthdate } = result.person;
+    setCurrentPatient({ preferredName, preferredAddress, gender, age, birthdate });
     navigate(`/patientInfo/${id}`);
   };
+}
 
   const handleFilter = (filteredPatients: object[]) => {
     if (filteredPatients) {

src/components/patientSearch/PatientSearch.resource.ts

@@ -1,5 +1,5 @@
 export const searchPatient = async (query: string) => {
-  return fetch(`/ws/rest/v1/patient?q=${query}&v=default`)
+  return fetch(`/openmrs/ws/rest/v1/patient?q=${query}&v=default`)
     .then((Response) => Promise.all([Response.headers, Response.json()]))
     .then(([_, { results }]) => {
       return results;

src/context/AppContext.ts

@@ -1,9 +1,61 @@
 import React from 'react';
+
+export interface PatientObj {
+  uuid: string;
+  display: string;
+  identifiers: [];
+  person: {
+    preferredName: {
+      display: string;
+    };
+    preferredAddress: {
+      display: string;
+    };
+    gender: string;
+    age: number;
+    birthdate: string;
+  };
+  voided: boolean;
+  resourceVersion: string;
+}
+
+export interface PatientObjSubset {
+  preferredName?: {
+    uuid?: string;
+    display?: string;
+    links?: Array<{ rel: string; uri: string; resourceAlias: string }>;
+  };
+  preferredAddress?: {
+    uuid?: string;
+    display?: string;
+    links?: Array<{ rel: string; uri: string; resourceAlias: string }>;
+  };
+  gender?: string;
+  age: number;
+  birthdate?: string;
+}
+
 export interface AppContextType {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  currentPatient: Object[];
+  currentPatient: PatientObjSubset;
+  setCurrentPatient: React.Dispatch<React.SetStateAction<PatientObjSubset>>;
 }
 
 export const AppContext = React.createContext<AppContextType>({
-  currentPatient: [],
+  currentPatient: {
+    preferredName: {
+      uuid: '',
+      display: '',
+      links: [],
+    },
+    preferredAddress: {
+      uuid: '',
+      display: '',
+      links: [],
+    },
+    gender: '',
+    age: 0,
+    birthdate: '',
+  },
+  setCurrentPatient: () => {},
 });
+

vite.config.ts

@@ -10,6 +10,11 @@ export default defineConfig({
         changeOrigin: true,
         secure: false,
       },
+      '/api': {
+        target: 'http://0.0.0.0:5080',
+        changeOrigin: true,
+        secure: false,
+      },
     },
   },
   plugins: [react()],