diff --git a/src/components/LoginPage.js b/src/components/LoginPage.js index f362ce7..c899c27 100755 --- a/src/components/LoginPage.js +++ b/src/components/LoginPage.js @@ -1,9 +1,9 @@ -import React, { Component } from 'react'; -import { Link, Redirect } from 'react-router-dom'; -import { connect } from 'react-redux'; +import React, {Component} from 'react'; +import {Redirect} from 'react-router-dom'; +import {connect} from 'react-redux'; -import { loginUserAction, registerUserAction} from '../actions/authenticationActions'; -import { setCookie } from '../util/cookies'; +import {loginUserAction} from '../actions/authenticationActions'; +import {setCookie} from '../util/cookies'; import icon1 from '../assets/img/icon-1-li.png'; import icon2 from '../assets/img/icon-2-li.png' import icon3 from '../assets/img/icon-3-li.png' @@ -13,7 +13,7 @@ import Tab from "react-bootstrap/Tab"; import Tabs from "react-bootstrap/Tabs"; import Header from "../components/Header"; -import { initializeReactGA } from '../container/App'; +import {initializeReactGA} from '../container/App'; class LoginPage extends Component { @@ -42,7 +42,7 @@ class LoginPage extends Component { if (this.props.response && this.props.response.hasOwnProperty('response')) { isSuccess = this.props.response.response.success; message = this.props.response.response.message; - + if (isSuccess) { console.log('success'); setCookie('token', this.props.response.response.token, 1); @@ -216,7 +216,7 @@ class LoginPage extends Component {
- Read Our Research + Read Our Research
@@ -325,4 +325,4 @@ class LoginPage extends Component { const mapStateToProps = (response) => ({response}); -export default connect(mapStateToProps)(LoginPage); \ No newline at end of file +export default connect(mapStateToProps)(LoginPage); diff --git a/src/components/LungConditions.js b/src/components/LungConditions.js index 5f0e2b4..5423a11 100755 --- a/src/components/LungConditions.js +++ b/src/components/LungConditions.js @@ -1,5 +1,4 @@ -import React, { Component } from "react"; -import ProgressBar from "react-bootstrap/ProgressBar"; +import React, {Component} from "react"; class LungConditions extends Component { @@ -9,21 +8,53 @@ class LungConditions extends Component { if (this.props.data) { Object.keys(this.props.data).forEach(key => { tifOptions.push( -
-
{key}
-
-
{this.props.data[key].result_boolean?
Yes
:
No
}
+/**/
+
+ {key} +
+ +
+
+
+
); }); } return ( -
- {tifOptions} -
+ +
+
Disease Predictions
+
+
+
+ +
+ +
+
+ Healthy + Risk +
+
+ + + + + + + + + + +
+
+
+ {tifOptions} +
); } } -export default LungConditions; \ No newline at end of file +export default LungConditions; diff --git a/src/components/PatientInfoForm.js b/src/components/PatientInfoForm.js index 76d9dc1..778a9dd 100755 --- a/src/components/PatientInfoForm.js +++ b/src/components/PatientInfoForm.js @@ -1,15 +1,14 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; +import React, {Component} from 'react'; +import {Link} from 'react-router-dom'; import PropTypes from 'prop-types'; -import { bindActionCreators } from 'redux'; -import { connect } from 'react-redux'; -import { setXrayImage, setCTScanImage, uploadImage, response , getMLResponse, setLoading, logout} from '../actions'; +import {bindActionCreators} from 'redux'; +import {connect} from 'react-redux'; +import {getMLResponse, logout, response, setCTScanImage, setLoading, setXrayImage, uploadImage} from '../actions'; import Preview from './Preview'; -import LungConditions from './LungConditions'; -import { setCookie } from '../util/cookies'; +import {setCookie} from '../util/cookies'; import '../styles/App.css'; -import { initializeReactGA } from '../container/App'; +import {initializeReactGA} from '../container/App'; class PatientInfoForm extends Component { @@ -46,9 +45,9 @@ class PatientInfoForm extends Component { : 'not_selected'; patientInfo['isRtPcrConducted'] = document.querySelector('input[name="isRtPcrConducted"]:checked') ? - document.querySelector('input[name="isRtPcrConducted"]:checked').value == 'yes' ? + document.querySelector('input[name="isRtPcrConducted"]:checked').value === 'yes' ? document.querySelector('input[name="isRtPcrResultPositive"]:checked') ? - document.querySelector('input[name="isRtPcrResultPositive"]:checked').value == 'yes' ? + document.querySelector('input[name="isRtPcrResultPositive"]:checked').value === 'yes' ? 'positive' : 'negative' : 'none' // TODO: Make 'isRtPcrResultPositive' field mandatory @@ -56,10 +55,10 @@ class PatientInfoForm extends Component { : 'none'; // TODO: Make 'isRtPcrConducted' field mandatory let formImageData = new FormData(); - if(this.props.model_type == 'xray') { + if(this.props.model_type === 'xray') { formImageData.append("photo", this.props.xray_image); this.props.uploadImage(formImageData, patientInfo, 'xray'); - }else if(this.props.model_type == 'ct') { + }else if(this.props.model_type === 'ct') { formImageData.append("photo", this.props.ct_scan_image); this.props.uploadImage(formImageData, patientInfo, 'ct'); } @@ -198,7 +197,7 @@ class PatientInfoForm extends Component {
- {this.state && this.state.isRtPcrConducted && this.state.isRtPcrConducted == 'yes' ? + {this.state && this.state.isRtPcrConducted && this.state.isRtPcrConducted === 'yes' ?
RT-PCR Test result
diff --git a/src/components/Results.js b/src/components/Results.js index 9b17ca2..135e18a 100755 --- a/src/components/Results.js +++ b/src/components/Results.js @@ -1,116 +1,210 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; -import PropTypes from 'prop-types'; -import { bindActionCreators } from 'redux'; -import { connect } from 'react-redux'; -import { clearResults, logout} from '../actions'; +import React, {Component} from 'react'; +import {Link} from 'react-router-dom'; import Preview from './Preview'; -import LungConditions from './LungConditions'; import '../styles/App.css'; -import { setCookie } from '../util/cookies'; +import {setCookie} from '../util/cookies'; +import downloadIcon from '../assets/img/downo.png'; +import LungConditions from "./LungConditions"; +import {clearResults, logout} from "../actions"; +import PropTypes from 'prop-types'; +import {bindActionCreators} from "redux"; +import {connect} from "react-redux"; class Results extends Component { backToPatientInfo = e => { - e.preventDefault(); - this.props.clearResults(); - this.props.history.push('patientInfoForm'); + e.preventDefault(); + this.props.clearResults(); + this.props.history.push('patientInfoForm'); } - logout = e => { - e.preventDefault(); - this.props.logout(); - setCookie('token', ''); - this.props.history.push('login'); - } - - render() { - return ( -
- -
- -
-
-
- { (this.props.covid_diagnosis && !this.props.loading)? -
-
-

{this.props.covid_diagnosis}

-
-
: null } - - { this.props.model_type == 'xray' ? -
-
-

Input XRay image

- -
- { this.props.annotated_img_url ? -
- {'annotated_img_url'} -
- : null } - { this.props.lung_conditions ? -
-

Disease predictions

- -
- : null } -
: null } + logout = e => { + e.preventDefault(); + this.props.logout(); + setCookie('token', ''); + this.props.history.push('login'); + } - { this.props.model_type == 'ct' ? -
-
-

Input CT scan

- -
- { this.props.annotated_img_url ? -
-

Annotated CT scan

- {'annotated_img_url'} -
- : null } - { this.props.lung_conditions ? -
-

Disease predictions

- + render() { + console.log(this.props); + return ( +
+ +
+ +
+
+ {(this.props.covid_diagnosis && !this.props.loading) ? +
+
Test #420
+

System Generated Results not to be consumed without the supervision of Registered + Physician

+
: null} +
+
Input Image
+ {this.props.model_type === 'xray' ? : + this.props.model_type === 'ct' ? : null} +
+ {this.props.annotated_img_url !== '' ? +
+
Annotated Image
+
+ annotated +
+
+ +
+
+ : null} +
+ +
+
+
+ {this.props.patientInfo ?
+ Patient #69 + {this.props.patientInfo.first_name + ' ' + this.props.patientInfo.last_name} + {this.props.patientInfo.age} M + {this.props.patientInfo.temperature} deg Celsius + Sneezing {this.props.patientInfo.isSneezing} + Breathing issues {this.props.patientInfo.isDifficultyInBreathing} + Dry Cough {this.props.patientInfo.isDryCough} +
: null } +
+ Diagnosis +

COVID-19

+
+
+ + +
+
+ + + +
+
+
+
+
+ + +
+
+ + +
+
+ Sent for PCR + + +
+
+ Quarantime + + +
+
+ Contact Tracing + + +
+
+ +
+
+
- : null } -
: null } - -
-
-
- ); - } + ); + } } + Results.propTypes = { xray_image: PropTypes.object, ct_scan_image: PropTypes.object, lung_conditions: PropTypes.object, + patientInfo: PropTypes.object, aws_s3_image_url: PropTypes.string, msg: PropTypes.string, type: PropTypes.string, - covid_diagnosis : PropTypes.string, + covid_diagnosis: PropTypes.string, annotated_img_url: PropTypes.string, loading: PropTypes.bool } -const mapStateToProps = ({xray_image, aws_s3_image_url,msg,type, covid_diagnosis, annotated_img_url, loading, lung_conditions, ct_scan_image, model_type}) => ({xray_image, aws_s3_image_url,msg,type, covid_diagnosis, annotated_img_url, loading, lung_conditions, ct_scan_image, model_type}); -const mapDispatchToProps = dispatch => bindActionCreators( {clearResults, logout}, dispatch); -export default connect(mapStateToProps, mapDispatchToProps)(Results) \ No newline at end of file +const mapStateToProps = ({xray_image, aws_s3_image_url, msg, type, covid_diagnosis, patientInfo,annotated_img_url, loading, lung_conditions, ct_scan_image, model_type}) => ({ + xray_image, + aws_s3_image_url, + msg, + type, + covid_diagnosis, + annotated_img_url, + loading, + lung_conditions, + ct_scan_image, + model_type, + patientInfo +}); +const mapDispatchToProps = dispatch => { + console.log(dispatch); + return bindActionCreators({clearResults, logout}, dispatch); +}; +export default connect(mapStateToProps, mapDispatchToProps)(Results) diff --git a/src/container/App.js b/src/container/App.js index 519e38d..55d601e 100755 --- a/src/container/App.js +++ b/src/container/App.js @@ -1,28 +1,24 @@ -import React, { Component } from 'react'; +import React, {Component} from 'react'; import ReactGA from 'react-ga'; -import { - BrowserRouter, - Route, - Switch -} from 'react-router-dom'; +import {BrowserRouter, Route, Switch} from 'react-router-dom'; import PrivateRoute from './PrivateRoute'; import LoginPage from '../components/LoginPage'; import RegisterPage from '../components/RegisterPage'; import PatientInfoForm from '../components/PatientInfoForm'; import Results from '../components/Results'; -import Header from "../components/Header"; import createBrowserHistory from "history/createBrowserHistory"; + const history = createBrowserHistory(); class App extends Component { render() { return ( - +
- +
@@ -37,7 +33,7 @@ class App extends Component { ); } - + } @@ -53,8 +49,8 @@ export function initializeReactGA() { ); ReactGA.pageview(window.location.pathname + window.location.search); console.log(window.location.pathname + window.location.search); - + } -export default App; \ No newline at end of file +export default App; diff --git a/src/reducers/index.js b/src/reducers/index.js index 4f1e62a..175de7e 100755 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,92 +1,97 @@ -import { actionTypes } from '../actions' +import {actionTypes} from '../actions' export const InitialState = { - xray_image: '', - ct_scan_image: '', - model_type: '', - msg: '', - type: '', - aws_s3_image_url: '', - loading: false + xray_image: '', + ct_scan_image: '', + model_type: '', + msg: '', + type: '', + aws_s3_image_url: '', + loading: false } -function reducer (state = InitialState, action) { - const response = action.response; - switch (action.type) { - case actionTypes.SET_AWS_S3_IMAGE_URL: - return { - ...state, - ...{ aws_s3_image_url: action.url, - loading: false } - } +function reducer(state = InitialState, action) { + const response = action.response; + switch (action.type) { + case actionTypes.SET_AWS_S3_IMAGE_URL: + return { + ...state, + ...{ + aws_s3_image_url: action.url, + loading: false + } + } - case actionTypes.SET_XRAY_IMAGE: - return { - ...state, - ...{ xray_image: action.xray_image, - model_type: 'xray' + case actionTypes.SET_XRAY_IMAGE: + return { + ...state, + ...{ + xray_image: action.xray_image, + model_type: 'xray' + } } - } - case actionTypes.SET_CT_SCAN_IMAGE: - return { - ...state, - ...{ ct_scan_image: action.ct_scan_image, - model_type: 'ct' + case actionTypes.SET_CT_SCAN_IMAGE: + return { + ...state, + ...{ + ct_scan_image: action.ct_scan_image, + model_type: 'ct' + } } - } - case actionTypes.RESPONSE: - return { - ...state, - ...{ msg: action.data._response, type: action.data._type, loading: false } - } + case actionTypes.RESPONSE: + return { + ...state, + ...{msg: action.data._response, type: action.data._type, loading: false} + } - case actionTypes.SET_ML_RESPONSE: - return { - ...state, - ...{ - covid_diagnosis: action.ml_response.covid_diagnosis, - annotated_img_url: action.ml_response.annotated_img_url, - lung_conditions: action.ml_response.lung_conditions + case actionTypes.SET_ML_RESPONSE: + return { + ...state, + ...{ + covid_diagnosis: action.ml_response.covid_diagnosis, + annotated_img_url: action.ml_response.annotated_img_url, + lung_conditions: action.ml_response.lung_conditions, + patientInfo: action.ml_response.patientInfo, + } + } + case actionTypes.SET_LOADING: + return { + ...state, + ...{loading: action.loading} } - } - case actionTypes.SET_LOADING: - return { - ...state, - ...{ loading: action.loading } - } - case actionTypes.REGISTER_USER_SUCCESS: - return { ...state, response }; - case actionTypes.REGISTER_USER_ERROR: - return { ...state, response }; - case actionTypes.LOGIN_USER_SUCCESS: - return { ...state, response }; - case actionTypes.LOGIN_USER_ERROR: - return { ...state, response }; + case actionTypes.REGISTER_USER_SUCCESS: + return {...state, response}; + case actionTypes.REGISTER_USER_ERROR: + return {...state, response}; + case actionTypes.LOGIN_USER_SUCCESS: + return {...state, response}; + case actionTypes.LOGIN_USER_ERROR: + return {...state, response}; - case actionTypes.CLEAR_RESULTS: - return { - ...state, - ...{ - covid_diagnosis: null, - annotated_img_url: null, - lung_conditions: null, - xray_image: null, - ct_scan_image: null - } - } - case actionTypes.LOGOUT_USER: - return { - ...state, - ...{ - response: {} - } - } - default: - return state - } + case actionTypes.CLEAR_RESULTS: + return { + ...state, + ...{ + covid_diagnosis: null, + annotated_img_url: null, + lung_conditions: null, + xray_image: null, + ct_scan_image: null + } + } + case actionTypes.LOGOUT_USER: + return { + ...state, + ...{ + response: {} + } + } + default: + return state + } } -export default reducer \ No newline at end of file +export default reducer