Skip to content

Commit

Permalink
load cache hemo data in app.tsx to avoid loading when switching betwe…
Browse files Browse the repository at this point in the history 
…en preview and customize mode.
  • Loading branch information
Haihan Lin authored and Haihan Lin committed Jun 11, 2020
1 parent 0d4da8b commit 70f41e1
Show file tree
Hide file tree
Showing 4 changed files with 240 additions and 169 deletions.
84 changes: 79 additions & 5 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
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';
Expand All @@ -14,9 +15,82 @@ interface OwnProps {
type Props = OwnProps;

const App: FC<Props> = ({ store }: Props) => {


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>
Expand All @@ -26,14 +100,14 @@ const App: FC<Props> = ({ store }: Props) => {
// if (isLoggedIn) return <Dashboard />
// else return <Redirect to="/" />
if (previewMode) {
return <Preview />
return <Preview hemoData={hemoData} />
}
else {
return <Dashboard />
return <Dashboard hemoData={hemoData} />
}
}} />
<Route path='/' component={Login} />
{/* <Route exact path='/preview' render={()=>{}}/> */}

</Switch></BrowserRouter>

// <Login />
Expand Down
157 changes: 79 additions & 78 deletions frontend/src/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,90 +8,91 @@ import styled from 'styled-components';
import './App.css'
//import 'react-grid-layout/css/styles.css'
import LayoutGenerator from './LayoutGenerator';
import { timeFormat } from 'd3';


interface OwnProps {
store?: Store
hemoData: any
}
type Props = OwnProps;

const Dashboard: FC<Props> = ({ store }: Props) => {


const [hemoData, setHemoData] = useState<any>([])

const [loadingModalOpen, setloadingModalOpen] = useState(true)

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)
setloadingModalOpen(false)

}

useEffect(() => {
cacheHemoData();
}, []);
const Dashboard: FC<Props> = ({ hemoData, store }: Props) => {

const { loadingModalOpen } = store!;
// const [hemoData, setHemoData] = useState<any>([])

// const [loadingModalOpen, setloadingModalOpen] = useState(true)

// 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)
// setloadingModalOpen(false)

// }

// useEffect(() => {
// cacheHemoData();
// }, []);


return (
Expand Down
1 change: 1 addition & 0 deletions frontend/src/Interfaces/Store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default class Store {

@observable isLoggedIn: boolean = false;
@observable previewMode: boolean = false;
@observable loadingModalOpen: boolean = true;
// @observable csrftoken: string | null = ""

}
Expand Down
Loading

0 comments on commit 70f41e1

Please sign in to comment.