Search tool connexion with FHIR API (#22)

* API call are isolated in services/api.tsx * types are isolated in src/types.tsx * Call to the API to get the observation, allergies and condition number for a patient * Working search by name, id, age and diabete * Adding an unique input text to search by name or id, removing patientTable array which are replaced by Patient Bundle * Adapting header to Arkhn colors * Adding pagination function and modifying patient list manipulation using PatientBundle objects * Adding toaster and renaming api.tsx to api.ts
arkhn · Mar 20, 2020 · 1ed7db6 · 1ed7db6
1 parent 89c77f6
commit 1ed7db6
Show file tree

Hide file tree

Showing 24 changed files with 823 additions and 324 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,6 @@
     "@types/react-dom": "^16.9.0",
     "@types/react-router": "^5.1.4",
     "@types/react-router-dom": "^5.1.3",
-    "fhir.js": "^0.0.22",
     "interact.js": "^1.2.8",
     "interactjs": "^1.8.2",
     "moment": "^2.24.0",
@@ -46,4 +45,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 const Header = ({ patient }: Props) => {
   return (
-    <BPNavbar id="navbar" className="bp3-dark">
+    <BPNavbar id="navbar">
       <BPNavbar.Group align={Alignment.LEFT}>
         <BPNavbar.Heading>
           <Link className="linkNavbar" to={ROUTE_HOME}>
@@ -32,8 +32,8 @@ const Header = ({ patient }: Props) => {
         <Icon icon="user" />
         <div>Nom médecin</div>
         <BPNavbar.Divider />
-        <Button icon="more" minimal />
-        <Button icon="log-out" minimal />
+        <Button icon="more" minimal className="headerButtons" />
+        <Button icon="log-out" minimal className="headerButtons" />
       </BPNavbar.Group>
     </BPNavbar>
   );

diff --git a/src/components/header/style.css b/src/components/header/style.css
@@ -1,7 +1,8 @@
 @import "~@blueprintjs/core/lib/css/blueprint.css";
 
 #navbar {
-  background-color: black;
+  background-color: #6ad4a9;
+  color: white;
 }
 
 .bp3-icon {
@@ -14,11 +15,16 @@
 }
 
 #titleNavbar {
-  margin: 0px 0px 0px 9px;
-  color: white;
+  margin: 2px 0px 0px 9px;
   cursor: pointer;
   text-decoration: none;
+  color: white;
 }
+
 .linkNavbar:hover {
   text-decoration: none;
 }
+
+.headerButtons svg {
+  fill: white !important;
+}
diff --git a/src/components/patientPage/hospitSummary/index.tsx b/src/components/patientPage/hospitSummary/index.tsx
@@ -4,23 +4,20 @@ import "./style.css";
 
 const HospitSummary = () => {
   return (
-    <>
-      <div className="fullHeight">
-        <H3>
-          <Icon icon={"pulse"} /> Hospitalisation
-        </H3>
-        <div className="centeredName">
-          <H5 className="marginRight">{"Chirurgie cardiaque".toUpperCase()}</H5>
-          <span className="bp3-text-muted">15/05/2019 - 19/05/2019</span>
-        </div>
-        Les informations sur l'hospitalisation sélectionnée seront indiquées
-        ici.
-        <br />
-        <br />
-        Par défaut, cette carte affichera les infos de la dernière
-        hospitalisation.
+    <div className="fullHeight">
+      <H3>
+        <Icon icon={"pulse"} /> Hospitalisation
+      </H3>
+      <div className="centeredName">
+        <H5 className="marginRight">{"Chirurgie cardiaque".toUpperCase()}</H5>
+        <span className="bp3-text-muted">15/05/2019 - 19/05/2019</span>
       </div>
-    </>
+      Les informations sur l'hospitalisation sélectionnée seront indiquées ici.
+      <br />
+      <br />
+      Par défaut, cette carte affichera les infos de la dernière
+      hospitalisation.
+    </div>
   );
 };
 

diff --git a/src/components/patientPage/index.tsx b/src/components/patientPage/index.tsx
@@ -20,7 +20,8 @@ const PatientPage = ({ patientId }: Props) => {
 
   React.useEffect(() => {
     const fetchPatientData = async () => {
-      const patient: any = await getPatientData(patientId);
+      const patient: any = await getPatientData(patientId, true);
+
       setPatientData(patient);
     };
     fetchPatientData();

diff --git a/src/components/patientPage/patientCard/index.tsx b/src/components/patientPage/patientCard/index.tsx
@@ -16,42 +16,20 @@ const PatientCard = ({ patient }: Props) => {
   getPatientNumberCard and getSubjectNumberCard are now rendering PatientInfo elements with click option which print the results on the console.
   */
   const getPatientNumberCard = (
-    object: "observations" | "conditions",
+    object:
+      | "observations"
+      | "conditions"
+      | "allergyIntolerances"
+      | "episodesOfCare",
     writtenName: string
   ) => {
-    if (patient[object]) {
-      return (
-        <div
-          onClick={() => {
-            console.log(writtenName + " : ", patient[object].entry);
-          }}
-        >
-          <PatientGeneralInfo
-            type={writtenName}
-            content={patient[object].total.toString()}
-          />
-        </div>
-      );
-    }
-  };
+    const resourceNumber = patient[object] ? patient[object].length : 0;
 
-  const getSubjectNumberCard = (
-    object: "allergyIntolerances" | "episodesOfCare",
-    writtenName: string
-  ) => {
-    if (patient[object])
-      return (
-        <div
-          onClick={() => {
-            console.log(writtenName + " : ", patient[object].entry);
-          }}
-        >
-          <PatientGeneralInfo
-            type={writtenName}
-            content={patient[object].total.toString()}
-          />
-        </div>
-      );
+    return (
+      <div>
+        <PatientGeneralInfo type={writtenName} content={resourceNumber} />
+      </div>
+    );
   };
 
   const getSubjectNameDiv = () => {
@@ -98,13 +76,13 @@ const PatientCard = ({ patient }: Props) => {
           />
         }
 
-        {getSubjectNumberCard("allergyIntolerances", "Allergies")}
+        {getPatientNumberCard("allergyIntolerances", "Allergies")}
 
         {getPatientNumberCard("observations", "Observations")}
 
         {getPatientNumberCard("conditions", "Conditions")}
 
-        {getSubjectNumberCard("episodesOfCare", "Hospitalisations")}
+        {getPatientNumberCard("episodesOfCare", "Hospitalisations")}
       </>
     );
   };

diff --git a/src/components/patientPage/patientCard/patientAgeInfo/index.tsx b/src/components/patientPage/patientCard/patientAgeInfo/index.tsx
@@ -17,7 +17,7 @@ const PatientAgeInfo = ({ type, birthDate, age }: Props) => {
           <Tag round={true}>{type}</Tag>
         </div>
         <div className="patientInfoContent">
-          {birthDate}{" "}
+          {birthDate}
           <div className="secondContent"> ({age?.toString()} ans) </div>
         </div>
       </div>

diff --git a/src/components/patientPage/patientCard/patientGeneralInfo/index.tsx b/src/components/patientPage/patientCard/patientGeneralInfo/index.tsx
@@ -9,7 +9,8 @@ interface Props {
 }
 
 const PatientGeneralInfo = ({ type, content }: Props) => {
-  if (content)
+  if (content !== undefined)
+    //Avoid to write "Inconnu" instead of 0
     return (
       <div className="patientInfo">
         <div className="patientTag">

diff --git a/src/components/patients/index.tsx b/src/components/patients/index.tsx
@@ -2,19 +2,55 @@ import React from "react";
 import Header from "components/header";
 import PatientTable from "components/patients/patientTable";
 import SearchTool from "components/patients/searchTool";
+import {
+  getPatients,
+  getPatientsPerQuery,
+  requestNextPatients
+} from "services/api";
+import { PatientBundle } from "types";
 import { Card, Elevation } from "@blueprintjs/core";
+
 import "./style.css";
 
+interface Props {
+  onSearch: Function;
+  searchItem: any;
+}
+
 const Patients = () => {
+  const [patientBundle, setPatientBundle] = React.useState({} as PatientBundle);
+  const getNextPatients = async () => {
+    const patBundle = await requestNextPatients(patientBundle);
+    if (patBundle) setPatientBundle(patBundle);
+  };
+  const handleSearch = async (searchName: String, searchParams: any) => {
+    const bundle: PatientBundle = await getPatientsPerQuery(
+      searchName,
+      searchParams
+    );
+    setPatientBundle(bundle);
+  };
+
+  React.useEffect(() => {
+    const fetchPatients = async () => {
+      const bundle: PatientBundle = await getPatients();
+      setPatientBundle(bundle);
+    };
+    fetchPatients();
+  }, []);
+
   return (
     <>
       <Header />
       <div className="homeSearch">
-        <Card elevation={Elevation.THREE} className="searchTool">
-          <SearchTool />
+        <Card elevation={Elevation.ZERO} className="searchTool">
+          <SearchTool onSearch={handleSearch} />
         </Card>
-        <Card elevation={Elevation.THREE} className="patientTable">
-          <PatientTable />
+        <Card elevation={Elevation.ZERO} className="patientTable">
+          <PatientTable
+            bundle={patientBundle}
+            updateNextPatients={getNextPatients}
+          />
         </Card>
       </div>
     </>