hpos-web/src/App.js

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';
import BarChart from './BarChart';
import TestResultChart from './TestResultChart';
import GenderChart from './GenderChart';
import RegistraionChart from './RegistraionChart';

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';

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"
};

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 [traits, setTraits] = useState(0);
  const [diseases, setDiseases] = useState(0);

  useEffect(() => {
    if (!mtests.length) {
      console.log('mtests', mtests);
      const tests = getTests();
      // setMales(tests.length);
    }
  }, [mtests]);

  useEffect(() => {
    // db.collection("patientData").onSnapshot((snapshot) => {
    //     setCustomersData(
    //         snapshot.docs.map((doc) => ({
    //             id: doc.id,
    //             data: doc.data(),
    //         }))
    //     );
    //     console.log(snapshot.docs);
    // });

    // h9JzA73TcJgS3CHmCvT5
    const q = query(collection(db, "patientData"));

    const unsub = onSnapshot(q, (querySnapshot) => {
      // const source = doc.metadata.hasPendingWrites ? "Local" : "Server";
      // console.log(source, " data: ", doc.data());
      console.log("snapshot", querySnapshot);

      const patients = [];
      let maleCount = 0;
      let femaleCount = 0;
      querySnapshot.forEach((document) => {
        const patient = document.data();
        patients.push(patient);
        console.log("patient", patient);
        const {gender} = patient;
        if (gender === 'Male') {
          maleCount++;
        }
        if (gender === 'Female') {
          femaleCount++;
        }
      });
      setTotalScreened(patients.length);
      setMales(maleCount);
      setFemales(femaleCount);
    });
  }, []);

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

    const unsub = onSnapshot(q, (querySnapshot) => {
      // const source = doc.metadata.hasPendingWrites ? "Local" : "Server";
      // console.log(source, " data: ", doc.data());
      console.log("snapshot", querySnapshot);

      const hposTests = [];
      let traitCount = 0;
      let diseaseCount = 0;
      querySnapshot.forEach((document) => {
        const hposTestData = document.data();
        hposTests.push(hposTestData);
        console.log("hposTestData", hposTestData);
        const {result} = hposTestData;
        if (result === 'Trait') {
          traitCount++;
        }
        if (result === 'Disease') {
          diseaseCount++;
        }
      });
      setTotalScreened(traitCount + diseaseCount);
      setTraits(traitCount);
      setDiseases(diseaseCount);
    });
  }, []);

  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 style={{}}>
      <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={traits + diseases} 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>
    </div>
  );
}

export default App;