132 lines
4.2 KiB
JavaScript
132 lines
4.2 KiB
JavaScript
import logo from './logo.png';
|
|
import './App.css';
|
|
import React, { useEffect, useState } from 'react';
|
|
import moment from 'moment';
|
|
|
|
import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore";
|
|
import Card from './components/Card';
|
|
import db from './firebase';
|
|
|
|
function App() {
|
|
const [mtests, setMtests] = useState([]);
|
|
const [totalScreened, setTotalScreened] = useState(0);
|
|
const [males, setMales] = useState(0);
|
|
const [females, setFemales] = useState(0);
|
|
const [normal, setNormal] = useState(0);
|
|
const [positives, setPositives] = useState(0);
|
|
const [traits, setTraits] = useState(0);
|
|
const [diseases, setDiseases] = useState(0);
|
|
const [lastUpdate, setLastUpdate] = useState(moment());
|
|
const [devMode, setDevMode] = useState(false);
|
|
|
|
useEffect(() => {
|
|
|
|
const q = query(collection(db, "patientData"));
|
|
|
|
const unsub = onSnapshot(q, (querySnapshot) => {
|
|
const patients = [];
|
|
let maleCount = 0;
|
|
let femaleCount = 0;
|
|
querySnapshot.forEach((document) => {
|
|
const patient = document.data();
|
|
patients.push(patient);
|
|
const { gender } = patient;
|
|
if (gender?.toLowerCase() === 'male') {
|
|
maleCount++;
|
|
}
|
|
if (gender?.toLowerCase() === 'female') {
|
|
femaleCount++;
|
|
}
|
|
});
|
|
setTotalScreened(patients.length);
|
|
setMales(maleCount);
|
|
setFemales(femaleCount);
|
|
setLastUpdate(moment());
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const q = query(collection(db, "testData"));
|
|
|
|
const unsub = onSnapshot(q, (querySnapshot) => {
|
|
const hposTests = [];
|
|
let normalCount = 0;
|
|
let traitCount = 0;
|
|
let diseaseCount = 0;
|
|
querySnapshot.forEach((document) => {
|
|
const hposTestData = document.data();
|
|
hposTests.push(hposTestData);
|
|
const { result } = hposTestData;
|
|
if (result === "NORMAL") {
|
|
normalCount++;
|
|
}
|
|
if (result === 'SICKLECELLTRAIT') {
|
|
traitCount++;
|
|
}
|
|
if (result === 'SICKLECELLDISEASE') {
|
|
diseaseCount++;
|
|
}
|
|
});
|
|
setNormal(normalCount);
|
|
setPositives(traitCount + diseaseCount);
|
|
setTraits(traitCount);
|
|
setDiseases(diseaseCount);
|
|
setLastUpdate(moment());
|
|
});
|
|
}, []);
|
|
|
|
async function getTests() {
|
|
try {
|
|
const testDataCol = collection(db, 'testData');
|
|
const testDataSnapshot = await getDocs(testDataCol);
|
|
const testDataList = testDataSnapshot.docs.map(doc => doc.data());
|
|
console.log(testDataList);
|
|
setMtests(testDataList);
|
|
return testDataList;
|
|
} catch (err) {
|
|
// log error
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div class='dashboard-title'>
|
|
<img className="nscm-logo" src={require('./logo_nobg.png')} />
|
|
<div className='title-text'>HPOS Sickel Cell Test Dashboard</div>
|
|
<img className="gov-logo-1" src={require('./gov_logo2.png')} />
|
|
<img className="gov-logo" src={require('./gov_logo3.png')} />
|
|
<img className="gov-logo-3" src={require('./gov_logo4.png')} />
|
|
</div>
|
|
|
|
<div className='cards-container'>
|
|
<div className='cards-row'>
|
|
<Card title={"Screened"} counter={totalScreened} color={'black'} backgroundColor={'rgb(254, 240, 227)'} />
|
|
<Card title={"Male"} counter={males} backgroundColor={'rgb(234, 240, 230)'} />
|
|
<Card title={"Female"} counter={females} backgroundColor={'rgb(234, 246, 245)'} />
|
|
</div>
|
|
|
|
<div className='cards-row'>
|
|
<Card title={"Normal"} counter={normal} backgroundColor={'rgb(192,233, 199)'} />
|
|
<Card title={"Trait"} counter={traits} backgroundColor={'rgb(237, 190, 190)'} />
|
|
<Card title={"Disease"} counter={diseases} backgroundColor={'rgb(249, 195, 195)'} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className='footer'>
|
|
<div className='last-update'>
|
|
Updated at: {moment(lastUpdate).format("DD-MM-YYYY hh:mm:ss a")}
|
|
</div>
|
|
|
|
<div className='developer' onClick={() => setDevMode(!devMode)}>
|
|
Developed by <img className="dev-logo" src={require('./smi-logo-120x120.webp')} /> ShanMukha
|
|
</div>
|
|
|
|
{/* {devMode &&
|
|
<div>dev mode is on</div>} */}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|