hpos-web/src/App.js

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

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore";
import Card from './components/Card';

// dev and test
// const firebaseConfig = {
//   apiKey: "AIzaSyBFl_YkJ5PMIvMY3G70313SyrqemjFnUv8",
//   authDomain: "hpos-af3cc.firebaseapp.com",
//   projectId: "hpos-af3cc",
//   storageBucket: "hpos-af3cc.appspot.com",
//   messagingSenderId: "650071678820",
//   appId: "1:650071678820:web:ce50538bf46632d46c6471",
//   measurementId: "G-6JHQ47S9DD"
// };


// prod
const firebaseConfig = {
  apiKey: "AIzaSyBF4pLZReAedU4dWX1eRJNFNIaOIz2xk4s",
  authDomain: "hpos-prod.firebaseapp.com",
  projectId: "hpos-prod",
  storageBucket: "hpos-prod.appspot.com",
  messagingSenderId: "1012719870714",
  appId: "1:1012719870714:web:fcd00acef93f6612de5f43",
  measurementId: "G-B0NZ7DEF69"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

const db = getFirestore(app);


function App() {
  const [mtests, setMtests] = useState([]);
  const [totalScreened, setTotalScreened] = useState(0);
  const [males, setMales] = useState(0);
  const [females, setFemales] = useState(0);
  const [positives, setPositives] = useState(0);
  const [traits, setTraits] = useState(0);
  const [diseases, setDiseases] = useState(0);
  const [lastUpdate, setLastUpdate] = useState(Date.now());

  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(Date.now());
    });
  }, []);

  useEffect(() => {
    const q = query(collection(db, "testData"));

    const unsub = onSnapshot(q, (querySnapshot) => {
      const hposTests = [];
      let traitCount = 0;
      let diseaseCount = 0;
      querySnapshot.forEach((document) => {
        const hposTestData = document.data();
        hposTests.push(hposTestData);
        const { result } = hposTestData;
        if (result === 'SICKLECELLTRAIT') {
          traitCount++;
        }
        if (result === 'SICKLECELLDISEASE') {
          diseaseCount++;
        }
      });
      setPositives(traitCount + diseaseCount);
      setTraits(traitCount);
      setDiseases(diseaseCount);
      setLastUpdate(Date.now());
    });
  }, []);

  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={"Tested Positive"} counter={positives} backgroundColor={'rgb(244,137, 137)'} />
          <Card title={"Trait"} counter={traits} backgroundColor={'rgb(237, 190, 190)'} />
          <Card title={"Disease"} counter={diseases} backgroundColor={'rgb(249, 195, 195)'} />
        </div>

        <div className='last-update'>
          Updated At: {Date(lastUpdate).toLocaleString()}
        </div>

        <div className='developer'>
          Developed by <img className="dev-logo" src={require('./smi-logo-120x120.webp')} /> ShanMukha
        </div>
      </div>
    </div>
  );
}

export default App;