hpos-web/src/App.js

import './App.css';
import React, { useEffect, useState } from 'react';
import moment from 'moment';

import { collection, onSnapshot, query, where } from "firebase/firestore";
import Card from './components/Card';
import db from './firebase';

function App() {
  const registrationCached = 16329;
  const malesCached = 6741;
  const femalesCached = 9179;
  const normalCached = 7153;
  const traitsCached = 2312;
  const diseasesCached = 365;
  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")); // cached
    const notCachedDate = "2023-11-12";
    const q = query(collection(db, "patientData"), where("createdAt", ">=", moment(notCachedDate).format("YYYY-MM-DD")));

    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(registrationCached + patients?.length);
      setMales(malesCached + maleCount);
      setFemales(femalesCached + femaleCount);
      setLastUpdate(moment());
    });

    return () => unsub;
  }, []);

  useEffect(() => {
    const notCachedDate = "2023-11-12";
    const q = query(collection(db, "testData"), where("testTime", ">=", moment(notCachedDate).format("YYYY-MM-DD")));

    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;
        const { classificationResult } = hposTestData;
        if (result === "NORMAL" || classificationResult === 'Normal') {
          normalCount++;
        }
        if (result === 'SICKLECELLTRAIT' || classificationResult === 'Sickle Cell Trait') {
          traitCount++;
        }
        if (result === 'SICKLECELLDISEASE' || classificationResult === 'Sickle Cell Disease') {
          diseaseCount++;
        }
      });
      setNormal(normalCached + normalCount);
      // setPositives(traitCount + diseaseCount);
      setTraits(traitsCached + traitCount);
      setDiseases(diseasesCached + diseaseCount);
      setLastUpdate(moment());
    });

    return () => unsub;
  }, []);

  return (
    <div>
      <div className='dashboard-title'>
        <img className="nscm-logo" src={require('./logo_nobg.png')} alt='img' />
        <div className='title-text'>HPOS Sickle Cell Test Dashboard</div>
        <img className="gov-logo-1" src={require('./gov_logo2.png')} alt='img' />
        <img className="gov-logo" src={require('./gov_logo3.png')} alt='img' />
        <img className="gov-logo-3" src={require('./gov_logo4.png')} alt='img' />
      </div>

      <div className='cards-container'>
        <div className='cards-row'>
          <Card title={"Registration"} 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" alt='img' src={require('./smi-logo-120x120.webp')} /> ShanMukha
        </div>

        {/* {devMode && 
          <div>dev mode is on</div>} */}
      </div>
    </div>
  );
}

export default App;