uwcirg · johnny2smooth · Nov 28, 2022 · Jan 3, 2023
diff --git a/src/DataStores/patientProfileStore.js b/src/DataStores/patientProfileStore.js
@@ -72,7 +72,6 @@ export default class PatientProfileStore {
     this.selectedPatient.details = details;
     this.selectedPatient.loaded = true;
 
-
     if (this.selectedPatient.details.status === "Archived") {
       this.onArchiveWarning = true;
     }
@@ -144,12 +143,6 @@ export default class PatientProfileStore {
         this.setSelectedPatientDetails(response);
       });
     //Must fetch reports seperately due to key tranform in Rails::AMS removing dashes ISO date keys :(
-    this.apiHelper
-
-      .executeRawRequest(`/patient/${id}/reports`, "GET")
-      .then((response) => {
-        this.addPatientReports(response);
-      });
 
     this.apiHelper
       .executeRawRequest(`/patient/${id}/symptom_summary`)
@@ -160,6 +153,14 @@ export default class PatientProfileStore {
     this.getPatientNotes(id);
   };
 
+  getPatientReports = (id) => {
+    this.apiHelper
+      .executeRawRequest(`/patient/${id}/reports`, "GET")
+      .then((response) => {
+        this.addPatientReports(response);
+      });
+  };
+
   @computed get selectedPatientReports() {
     return Object.values(this.selectedPatient.reports);
   }
@@ -260,7 +261,6 @@ export default class PatientProfileStore {
       treatmentOutcome: null,
     };
 
-
     this.temporaryPassword = "";
   };
 
@@ -295,7 +295,6 @@ export default class PatientProfileStore {
   };
 
   @computed get isArchived() {
-
     return this.selectedPatient.details.status === "Archived";
   }
 

diff --git a/src/Practitioner/PatientProfile/ReportingHistory.js b/src/Practitioner/PatientProfile/ReportingHistory.js
@@ -51,7 +51,7 @@ const useStyles = makeStyles({
 });
 
 const ReportingHistory = observer(() => {
-  const [visible, setVisible] = useState("reports");
+  const [visible, setVisible] = useState("notes");
   const [day, setDay] = useState(new Date());
   const classes = useStyles();
   const { patientProfileStore } = useStores();
@@ -62,24 +62,36 @@ const ReportingHistory = observer(() => {
   return (
     <div className={classes.reportingHistoryContainer}>
       <ReportingHistoryLabel setVisible={setVisible} visible={visible} />
-      {patientProfileStore.selectedPatient.reportsLoaded ? (
-        <div className={classes.reportingHistory}>
-          {visible === "calendar" && (
-            <CalendarTest
-              selectedDay={day}
-              handleChange={handleChange}
-              reports={patientProfileStore.selectedPatient.reports}
-              treatmentStart={
-                patientProfileStore.selectedPatient.details.treatmentStart
-              }
-            />
+      {visible === "notes" && <NotesView />}
+      {visible === "photos" && <PhotoReportsList />}
+      {visible === "calendar" && (
+        <div>
+          {patientProfileStore.selectedPatient.reportsLoaded ? (
+            <div className={classes.reportingHistory}>
+              <CalendarTest
+                selectedDay={day}
+                handleChange={handleChange}
+                reports={patientProfileStore.selectedPatient.reports}
+                treatmentStart={
+                  patientProfileStore.selectedPatient.details.treatmentStart
+                }
+              />
+            </div>
+          ) : (
+            <ReportsLoading />
+          )}
+        </div>
+      )}
+      {visible === "reports" && (
+        <div>
+          {patientProfileStore.selectedPatient.reportsLoaded ? (
+            <div className={classes.reportingHistory}>
+              <ReportTable />
+            </div>
+          ) : (
+            <ReportsLoading />
           )}
-          {visible === "reports" && <ReportTable />}
-          {visible === "notes" && <NotesView />}
-          {visible === "photos" && <PhotoReportsList />}
         </div>
-      ) : (
-        <ReportsLoading />
       )}
     </div>
   );
@@ -88,6 +100,7 @@ const ReportingHistory = observer(() => {
 const ReportingHistoryLabel = (props) => {
   const classes = useStyles();
   const { t } = useTranslation("translation");
+  const { patientProfileStore } = useStores();
   return (
     <div className={classes.reportsHeader}>
       <Typography variant="h2">
@@ -98,9 +111,24 @@ const ReportingHistoryLabel = (props) => {
         className={classes.buttonGroup}
         size="small"
       >
+        <Button
+          onClick={() => {
+            props.setVisible("notes");
+          }}
+          className={`${classes.buttonBorder} ${
+            props.visible === "notes" && "selected"
+          }`}
+        >
+          {t("notes")}
+        </Button>
         <Button
           onClick={() => {
             props.setVisible("reports");
+            if (!patientProfileStore.selectedPatient.reportsLoaded) {
+              patientProfileStore.getPatientReports(
+                patientProfileStore.selectedPatient.details.id
+              );
+            }
           }}
           className={`${classes.buttonBorder} ${
             props.visible === "reports" && "selected"
@@ -121,23 +149,18 @@ const ReportingHistoryLabel = (props) => {
         <Button
           onClick={() => {
             props.setVisible("calendar");
+            if (!patientProfileStore.selectedPatient.reportsLoaded) {
+              patientProfileStore.getPatientReports(
+                patientProfileStore.selectedPatient.details.id
+              );
+            }
           }}
           className={`${classes.buttonBorder} ${
             props.visible === "calendar" && "selected"
           }`}
         >
           {t("coordinator.patientProfile.calendarReports")}
         </Button>
-        <Button
-          onClick={() => {
-            props.setVisible("notes");
-          }}
-          className={`${classes.buttonBorder} ${
-            props.visible === "notes" && "selected"
-          }`}
-        >
-          {t("notes")}
-        </Button>
       </Box>
     </div>
   );

diff --git a/src/Practitioner/PatientProfile/index.js b/src/Practitioner/PatientProfile/index.js
@@ -1,37 +1,37 @@
-import React, { useEffect } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import useStores from '../../Basics/UseStores';
-import { observer } from 'mobx-react';
-import Styles from '../../Basics/Styles';
-import Colors from '../../Basics/Colors';
-import { useTranslation } from 'react-i18next';
-import PatientInfo from './Details/PatientInfo';
-import TreatmentStatus from './Adherence/AdherenceSummary';
-import SymptomSummary from './SymptomSummary';
-import TreatmentTimeline from '../../Basics/TreatmentTimeline';
-import ReportingHistory from './ReportingHistory';
-import SectionLabel from '../../Components/SectionLabel';
-import PatientProfileDialogs from './Dialogs/';
-import ArchivedOptions from './Dialogs/ArchivedOptions';
-import ProfileHeader from './Header';
-import useWindowSize from '../../Hooks/Resize';
-import MobileView from './MobileView';
-import { useParams } from 'react-router-dom';
-import AppointmentCard from './MobileView/AppointmentCard';
-import { Box } from '@material-ui/core';
+import React, { useEffect } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import useStores from "../../Basics/UseStores";
+import { observer } from "mobx-react";
+import Styles from "../../Basics/Styles";
+import Colors from "../../Basics/Colors";
+import { useTranslation } from "react-i18next";
+import PatientInfo from "./Details/PatientInfo";
+import TreatmentStatus from "./Adherence/AdherenceSummary";
+import SymptomSummary from "./SymptomSummary";
+import TreatmentTimeline from "../../Basics/TreatmentTimeline";
+import ReportingHistory from "./ReportingHistory";
+import SectionLabel from "../../Components/SectionLabel";
+import PatientProfileDialogs from "./Dialogs/";
+import ArchivedOptions from "./Dialogs/ArchivedOptions";
+import ProfileHeader from "./Header";
+import useWindowSize from "../../Hooks/Resize";
+import MobileView from "./MobileView";
+import { useParams } from "react-router-dom";
+import AppointmentCard from "./MobileView/AppointmentCard";
+import { Box } from "@material-ui/core";
 
 const Profile = observer(() => {
   const { id: patientId } = useParams();
 
   const { practitionerStore, patientProfileStore, uiStore } = useStores();
   const classes = useStyles();
-  const { t } = useTranslation('translation');
+  const { t } = useTranslation("translation");
 
   const isMobileView = useWindowSize().size.width < 830;
 
   const closeResetPassword = () => {
     patientProfileStore.closeResetPassword();
-    practitionerStore.newActivationCode = '';
+    practitionerStore.newActivationCode = "";
   };
 
   useEffect(() => {
@@ -45,15 +45,15 @@ const Profile = observer(() => {
 
   useEffect(() => {
     if (patientProfileStore.changes.success) {
-      uiStore.setAlert(t('coordinator.patientProfile.editDetails.success'));
+      uiStore.setAlert(t("coordinator.patientProfile.editDetails.success"));
     }
   }, [patientProfileStore.changes.success]);
 
   if (!patientProfileStore.selectedPatient.loaded) return <Loading />;
   if (patientProfileStore.selectedPatient.accessError)
     return (
       <p className={classes.message}>
-        {t('coordinator.patientProfile.accessError')}
+        {t("coordinator.patientProfile.accessError")}
       </p>
     );
 
@@ -68,7 +68,7 @@ const Profile = observer(() => {
 const DesktopProfile = observer(() => {
   const { patientProfileStore } = useStores();
   const classes = useStyles();
-  const { t } = useTranslation('translation');
+  const { t } = useTranslation("translation");
 
   return (
     <div className={classes.patientContainer}>
@@ -87,7 +87,7 @@ const DesktopProfile = observer(() => {
       <div className={classes.bottom}>
         <ReportingHistory />
         <div className={classes.treatmentTimeline}>
-          <SectionLabel>{t('timeline.title')}</SectionLabel>
+          <SectionLabel>{t("timeline.title")}</SectionLabel>
           <TreatmentTimeline
             weeksInTreatment={
               patientProfileStore.selectedPatient.details.weeksInTreatment
@@ -101,58 +101,58 @@ const DesktopProfile = observer(() => {
 
 const Loading = () => {
   const classes = useStyles();
-  const { t } = useTranslation('translation');
+  const { t } = useTranslation("translation");
   return (
     <div className={classes.message}>
-      <h1> {t('commonWords.loading')}...</h1>
+      <h1> {t("commonWords.loading")}...</h1>
     </div>
   );
 };
 
 const useStyles = makeStyles({
   listItem: {
-    fontWeight: 'medium',
-    textTransform: 'capitalize',
+    fontWeight: "medium",
+    textTransform: "capitalize",
   },
   top: {
-    display: 'flex',
-    flexWrap: 'wrap',
+    display: "flex",
+    flexWrap: "wrap",
     flexShrink: 0,
-    '& > div': {
-      flex: '1 1 0',
-      margin: '1em 0',
-      marginRight: '1em',
+    "& > div": {
+      flex: "1 1 0",
+      margin: "1em 0",
+      marginRight: "1em",
       ...Styles.profileCard,
     },
-    '& > div:last-of-type': {
+    "& > div:last-of-type": {
       marginRight: 0,
     },
   },
   treatmentTimeline: {
     ...Styles.profileCard,
-    alignSelf: 'flex-start',
-    backgroundColor: 'white',
-    minWidth: '280px',
-    padding: '1em',
-    marginLeft: '1em',
+    alignSelf: "flex-start",
+    backgroundColor: "white",
+    minWidth: "280px",
+    padding: "1em",
+    marginLeft: "1em",
   },
 
   patientContainer: {
-    height: '100vh',
+    height: "100vh",
     backgroundColor: Colors.lighterGray,
-    overflowY: 'scroll',
-    width: '100%',
-    padding: '1em',
-    boxSizing: 'border-box',
+    overflowY: "scroll",
+    width: "100%",
+    padding: "1em",
+    boxSizing: "border-box",
   },
   bottom: {
-    width: '100%',
-    display: 'flex',
-    overflow: 'hidden',
+    width: "100%",
+    display: "flex",
+    overflow: "hidden",
   },
   message: {
-    width: '100%',
-    height: '100%',
+    width: "100%",
+    height: "100%",
     ...Styles.flexCenter,
   },
 });

diff --git a/src/Practitioner/ReviewPatients/IssueDetails/index.js b/src/Practitioner/ReviewPatients/IssueDetails/index.js
@@ -3,7 +3,6 @@ import SymptomSummary from "./SymptomSummary";
 import { Box, Grid } from "@material-ui/core";
 import ReviewPhotos from "./ReviewPhotos";
 import SupportRequests from "./SupportRequests";
-import ReportingHistoryLinks from "../../../Components/Shared/ReportingHistoryLinks";
 
 const IssueDetails = ({ patient, visible }) => {
   const issues = patient.issues.state;
@@ -18,7 +17,6 @@ const IssueDetails = ({ patient, visible }) => {
         {issues.supportRequests > 0 && (
           <SupportRequests supportRequests={patient.issues.supportRequests} />
         )}
-        <ReportingHistoryLinks patient={patient} />
       </Grid>
     </Box>
   );