resolves #85

frontend/src/App.tsx

@@ -1,10 +1,12 @@
-import React, { FC, useEffect, useState, Component } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import Store from './Interfaces/Store'
 import { inject, observer } from 'mobx-react';
 import Dashboard from './Dashboard';
-import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
+import { BrowserRouter, Switch, Route } from 'react-router-dom'
+import { timeFormat } from 'd3';
 
 import Login from './LogIn'
+import Preview from './Preview';
 
 interface OwnProps {
   store?: Store;
@@ -13,19 +15,99 @@ interface OwnProps {
 type Props = OwnProps;
 
 const App: FC<Props> = ({ store }: Props) => {
-  const { isLoggedIn } = store!
 
 
+  const { isLoggedIn, previewMode } = store!
+  const [hemoData, setHemoData] = useState<any>([])
+
+
+  async function cacheHemoData() {
+    const resHemo = await fetch("http://localhost:8000/api/hemoglobin");
+    const dataHemo = await resHemo.json();
+    const resultHemo = dataHemo.result;
+    const resTrans = await fetch(`http://localhost:8000/api/request_transfused_units?transfusion_type=ALL_UNITS&date_range=${[timeFormat("%d-%b-%Y")(new Date(2014, 0, 1)), timeFormat("%d-%b-%Y")(new Date(2019, 11, 31))]}`)
+    const dataTrans = await resTrans.json();
+    let transfused_dict = {} as any;
+
+    let result: {
+      CASE_ID: number,
+      VISIT_ID: number,
+      PATIENT_ID: number,
+      ANESTHOLOGIST_ID: number,
+      SURGEON_ID: number,
+      YEAR: number,
+      QUARTER: string,
+      MONTH: string,
+      DATE: Date | null,
+      PRBC_UNITS: number,
+      FFP_UNITS: number,
+      PLT_UNITS: number,
+      CRYO_UNITS: number,
+      CELL_SAVER_ML: number,
+      HEMO: number[]
+    }[] = [];
+
+
+    dataTrans.forEach((element: any) => {
+      transfused_dict[element.case_id] = {
+        PRBC_UNITS: element.transfused_units[0] || 0,
+        FFP_UNITS: element.transfused_units[1] || 0,
+        PLT_UNITS: element.transfused_units[2] || 0,
+        CRYO_UNITS: element.transfused_units[3] || 0,
+        CELL_SAVER_ML: element.transfused_units[4] || 0
+      };
+    });
+
+    resultHemo.map((ob: any, index: number) => {
+      if (transfused_dict[ob.CASE_ID]) {
+        const transfusedResult = transfused_dict[ob.CASE_ID];
+        result.push({
+          CASE_ID: ob.CASE_ID,
+          VISIT_ID: ob.VISIT_ID,
+          PATIENT_ID: ob.PATIENT_ID,
+          ANESTHOLOGIST_ID: ob.ANESTHOLOGIST_ID,
+          SURGEON_ID: ob.SURGEON_ID,
+          YEAR: ob.YEAR,
+          PRBC_UNITS: transfusedResult.PRBC_UNITS,
+          FFP_UNITS: transfusedResult.FFP_UNITS,
+          PLT_UNITS: transfusedResult.PLT_UNITS,
+          CRYO_UNITS: transfusedResult.CRYO_UNITS,
+          CELL_SAVER_ML: transfusedResult.CELL_SAVER_ML,
+          HEMO: ob.HEMO,
+          QUARTER: ob.QUARTER,
+          MONTH: ob.MONTH,
+          DATE: ob.DATE
+        })
+      }
+    })
+
+    result = result.filter((d: any) => d);
+    console.log("hemo data done")
+    setHemoData(result)
+    store!.loadingModalOpen = false;
+
+  }
+
+  useEffect(() => {
+    cacheHemoData();
+  }, []);
   return (
     <BrowserRouter>
       <Switch>
         {/* <Route exact path='/' component={Home} /> */}
-        <Route exact path='/' component={Login} />
+
         <Route exact path='/dashboard' render={() => {
           // if (isLoggedIn) return <Dashboard />
           // else return <Redirect to="/" />
-          return <Dashboard />
+          if (previewMode) {
+            return <Preview hemoData={hemoData} />
+          }
+          else {
+            return <Dashboard hemoData={hemoData} />
+          }
         }} />
+        <Route path='/' component={Login} />
+
       </Switch></BrowserRouter>
 
     // <Login />

frontend/src/Components/Utilities/SideBar.tsx

@@ -23,7 +23,6 @@ const SideBar: FC<Props> = ({ store }: Props) => {
     currentSelectSet,
     currentOutputFilterSet,
     currentSelectPatientGroup,
-    currentSelectPatient,
     filterSelection } = store!;
   const [procedureList, setProcedureList] = useState<any[]>([]);
   const [maxCaseCount, setMaxCaseCount] = useState(0);
@@ -37,7 +36,6 @@ const SideBar: FC<Props> = ({ store }: Props) => {
     const data = await res.json();
     const result = data.result
 
-    //TODO this needs to check if the filterSelection is not empty
 
     let tempMaxCaseCount = 0;
     let tempItemUnselected: any[] = [];

frontend/src/Components/Utilities/UserControl.tsx

@@ -13,7 +13,7 @@ import {
   interventionChartType, presetOptions, stateUpdateWrapperUseJSON, dumbbellValueOptions, scatterYOptions, typeDiction
 } from "../../PresetsProfile";
 import ClipboardJS from 'clipboard';
-import { NavLink } from 'react-router-dom'
+import { NavLink, Redirect } from 'react-router-dom'
 import { getCookie } from "../../Interfaces/UserManagement";
 interface OwnProps {
   store?: Store;
@@ -140,7 +140,7 @@ const UserControl: FC<Props> = ({ store }: Props) => {
 
 
   const regularMenu = (
-    <Menu widths={6}>
+    <Menu widths={7}>
       <Menu.Item>
         <Button.Group>
           <Button primary disabled={isAtRoot} onClick={actions.goBack}>
@@ -340,10 +340,16 @@ const UserControl: FC<Props> = ({ store }: Props) => {
         </Modal>
 
       </Menu.Item>
+
+      <Menu.Item>
+        <Button content="Preview Mode" onClick={() => { store!.previewMode = true }} />
+      </Menu.Item>
+
       <Menu.Item>
         <NavLink component={Button} to="/" onClick={() => { store!.isLoggedIn = false; }} >
           Log Out
         </NavLink>
+
       </Menu.Item>
     </Menu>
   );