➰ Yet even more TypeScript conversions

RyanNerd · Sep 25, 2020 · 2e9c1f0 · 2e9c1f0
1 parent a6f86ab
commit 2e9c1f0
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 32 deletions.
diff --git a/src/components/ListGroups/MedicineListGroup.js b/src/components/ListGroups/MedicineListGroup.js
@@ -5,6 +5,7 @@ import TooltipButton from "../Buttons/TooltipButton";
 import PropTypes from 'prop-types';
 import {drawBarcode} from "../../utility/drawBarcode";
 import Button from "react-bootstrap/Button";
+import logButtonColor from "../../utility/logButtonColor";
 
 /**
  * MedicineListGroup
@@ -42,6 +43,23 @@ const MedicineListGroup = (props) => {
         }
     }, [barCode, canvasId, canvasUpdated]);
 
+    /**
+     * Determine the tooltip text given the number of hours the drug was last taken
+     *
+     * @param {number | null | boolean} lastTaken
+     * @returns {string|null}
+     */
+    const tooltipText = (lastTaken) => {
+        if (lastTaken === null || lastTaken === false) return null;
+        if (lastTaken <= 1) {
+            return activeDrug.Drug + " taken in the last hour";
+        }
+        if (lastTaken <=4) {
+            return activeDrug.Drug + " recently taken";
+        }
+        return null;
+    }
+
     return (
         <ListGroup>
             <ListGroup.Item active>
@@ -54,18 +72,18 @@ const MedicineListGroup = (props) => {
 
             <ListGroup.Item>
                 <TooltipButton
-                    tooltip={lastTaken <= 1 && lastTaken !== null ? activeDrug.Drug + " taken in the last hour" : null}
+                    tooltip={tooltipText(lastTaken)}
                     placement="top"
                     className="mr-2"
-                    variant={lastTaken === 0 ? "warning" : "primary"}
+                    variant={logButtonColor(lastTaken)}
                     onClick={(e) => addDrugLog(e)}
                 >
                     + Log Drug
                 </TooltipButton>
 
                 <Button
                     disabled={lastTaken === 0}
-                    variant="outline-primary"
+                    variant={"outline-" + logButtonColor(lastTaken)}
                     onClick={(e) => {
                         e.preventDefault();
                         logDrug(1);

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -1,5 +1,5 @@
 import 'reactn';
-import {ResidentRecord} from "./utility/InitialState";
+import {ResidentRecord} from "./types/RecordTypes";
 
 declare module 'reactn/default' {
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
 import React, {setGlobal} from "reactn";
 import App from './App';
-import {initialState} from "./utility/InitialState";
+import {initialState} from "./utility/initialState";
 
 setGlobal(initialState)
     .then((initialState) => {

diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js
@@ -7,7 +7,7 @@ import Row from 'react-bootstrap/Row';
 import TabContent from '../styles/tab_content.css';
 import ResidentProvider from '../providers/ResidentProvider';
 import MedicineProvider from '../providers/MedicineProvider';
-import {initialState} from "../utility/InitialState";
+import {initialState} from "../utility/initialState";
 import MedHistoryProvider from "../providers/MedHistoryProvider";
 import Frak from "../providers/Frak";
 import RefreshOtcList from "../providers/helpers/RefreshOtcList";

diff --git a/src/pages/ManageDrugPage.js b/src/pages/ManageDrugPage.js
@@ -7,7 +7,7 @@ import RefreshMedicineList from "../providers/RefreshMedicineList";
 import DeleteMedicine from "../providers/helpers/DeleteMedicine";
 import TooltipButton from "../components/Buttons/TooltipButton";
 import PropTypes from 'prop-types';
-import {handleMedicineEditModalClose} from "../utility/helpers";
+import {handleMedicineEditModalClose} from "../utility/handleMedicineEditModalClose";
 
 /**
  * ManageDrugPage

diff --git a/src/pages/ManageOtcPage.js b/src/pages/ManageOtcPage.js
@@ -7,7 +7,7 @@ import DeleteMedicine from "../providers/helpers/DeleteMedicine";
 import TooltipButton from "../components/Buttons/TooltipButton";
 import RefreshOtcList from "../providers/helpers/RefreshOtcList";
 import PropTypes from 'prop-types';
-import {handleMedicineEditModalClose} from "../utility/helpers";
+import {handleMedicineEditModalClose} from "../utility/handleMedicineEditModalClose";
 
 /**
  * ManageOtcPage

diff --git a/src/pages/MedicinePage.js b/src/pages/MedicinePage.js
@@ -13,11 +13,12 @@ import RefreshMedicineLog from "../providers/RefreshMedicineLog";
 import MedicineListGroup from "../components/ListGroups/MedicineListGroup";
 import TooltipButton from "../components/Buttons/TooltipButton";
 import {calculateLastTaken} from "../utility/common";
-import {newDrugInfo} from "../utility/InitialState";
+import {newDrugInfo} from "../types/RecordTypes";
 import PropTypes from 'prop-types';
 import LastTakenButton from "../components/Buttons/LastTakenButton";
 import searchDrugs from "../utility/searchDrugs";
 import isSearchValid from "../utility/isSearchValid";
+import logButtonColor from "../utility/logButtonColor";
 
 /**
  * MedicinePage
@@ -273,7 +274,7 @@ const MedicinePage = (props) => {
                         <span style={{textAlign: "center"}}> <h2>{activeDrug.Drug} History</h2> </span>
                         <Button
                             disabled={lastTaken === 0}
-                            variant="outline-primary"
+                            variant={"outline-" + logButtonColor(lastTaken)}
                             className="mr-2"
                             onClick={(e) => {
                                 e.preventDefault();
@@ -286,7 +287,7 @@ const MedicinePage = (props) => {
                         <Button
                             disabled={lastTaken === 0}
                             className="mr-3"
-                            variant="outline-primary"
+                            variant={"outline-" + logButtonColor(lastTaken)}
                             onClick={(e) => {
                                 e.preventDefault();
                                 handleLogDrugAmount(2);

diff --git a/src/pages/OtcPage.js b/src/pages/OtcPage.js
@@ -12,11 +12,12 @@ import RefreshMedicineLog from "../providers/RefreshMedicineLog";
 import MedicineListGroup from "../components/ListGroups/MedicineListGroup";
 import RefreshOtcList from "../providers/helpers/RefreshOtcList";
 import {calculateLastTaken} from "../utility/common";
-import {newDrugInfo} from "../utility/InitialState";
+import {newDrugInfo} from "../types/RecordTypes";
 import PropTypes from 'prop-types';
 import LastTakenButton from "../components/Buttons/LastTakenButton";
 import searchDrugs from "../utility/searchDrugs";
 import isSearchValid from "../utility/isSearchValid";
+import logButtonColor from "../utility/logButtonColor";
 
 /**
  * OtcPage
@@ -280,7 +281,7 @@ const OtcPage = (props) => {
                         <span style={{textAlign: "center"}}> <h2>OTC Drug History</h2> </span>
                         <Button
                             disabled={lastTaken === 0}
-                            variant="outline-primary"
+                            variant={"outline-" + logButtonColor(lastTaken)}
                             className="mr-2"
                             onClick={(e) => {
                                 e.preventDefault();
@@ -293,7 +294,7 @@ const OtcPage = (props) => {
                         <Button
                             disabled={lastTaken === 0}
                             className="mr-3"
-                            variant="outline-primary"
+                            variant={"outline-" + logButtonColor(lastTaken)}
                             onClick={(e) => {
                                 e.preventDefault();
                                 handleLogDrugAmount(2);

diff --git a/src/utility/InitialState.tsx → src/types/RecordTypes.ts b/src/utility/InitialState.tsx → src/types/RecordTypes.ts
@@ -17,22 +17,6 @@ export type DrugLogRecord = {
     Updated: Date
 }
 
-export const initialState = {
-    development: process.env.REACT_APP_DEVELOPMENT === 'true',
-    activeResident: null,
-    residentList: null,
-    medicineList: null,
-    otcList: null,
-    drugLogList: null,
-    apiKey: null,
-    baseUrl: process.env.REACT_APP_BASEURL,
-    providers: {
-        residentProvider: null,
-        medicineProvider: null,
-        medHistoryProvider: null
-    }
-};
-
 export const newDrugInfo = {
     Id: null,
     Barcode: "",

diff --git a/src/utility/common.tsx b/src/utility/common.tsx
@@ -1,4 +1,4 @@
-import {DrugLogRecord, ResidentRecord} from "./InitialState";
+import {DrugLogRecord, ResidentRecord} from "../types/RecordTypes";
 
 /**
  * Given a ResidentRecord return the resident's DOB as a string.

diff --git a/src/utility/helpers.ts → src/utility/handleMedicineEditModalClose.ts b/src/utility/helpers.ts → src/utility/handleMedicineEditModalClose.ts
@@ -6,14 +6,15 @@
  * @param {Promise} refreshList
  * @param {function} setDrugList
  * @param {function} onError
+ * @returns {void}
  */
 export const handleMedicineEditModalClose = (
         drugInfo: {Id: number | null, Notes: string | null},
         medicineProvider: {post: Function},
         refreshList: Function,
         setDrugList: Function,
         onError: Function
-    ) => {
+    ): void => {
     if (drugInfo) {
         const drugData = {...drugInfo};
 

diff --git a/src/utility/initialState.ts b/src/utility/initialState.ts
@@ -0,0 +1,15 @@
+export const initialState = {
+    development: process.env.REACT_APP_DEVELOPMENT === 'true',
+    activeResident: null,
+    residentList: null,
+    medicineList: null,
+    otcList: null,
+    drugLogList: null,
+    apiKey: null,
+    baseUrl: process.env.REACT_APP_BASEURL,
+    providers: {
+        residentProvider: null,
+        medicineProvider: null,
+        medHistoryProvider: null
+    }
+};
diff --git a/src/utility/logButtonColor.js b/src/utility/logButtonColor.js
@@ -0,0 +1,20 @@
+/**
+ * Given the last time a drug was taken in hours determine the button color for logging drugs
+ * @param {number} lastTaken
+ * @returns {string}
+ */
+const logButtonColor = (lastTaken) => {
+    if (lastTaken === null || lastTaken === false) {
+        return 'primary'
+    }
+    if (lastTaken <= 1) {
+        return 'danger'
+    }
+    if (lastTaken <= 4) {
+        return 'info'
+    }
+    return 'primary';
+}
+
+export default logButtonColor;
+