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 } from 'firebase/firestore/lite';
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 [males, setMales] = useState(0);

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

  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='card'>
        <div className='title'>Age</div>
        <div id="birthYear">
          {mtests.length && <BarChart
            id={1}
            data={mtests.map(x => {
              if (x.birthYear) return 2023 - x.birthYear;
              if (x.patientAge) return 2023 - x.patientAge;
            })}
            width={700}
            height={350} />}
        </div>
      </div> */}

      {/* <div className='card'>
        <div className='title'>Total People Screened for the day</div>
        <div id="registration">
          {mtests.length && <RegistraionChart
            data={mtests}
            width={700}
            height={300} />}
        </div>
      </div>

      <div className='card'>
        <div className='title'>Registrations</div>
        <div id="registration">
          {mtests.length && <RegistraionChart
            data={mtests}
            width={700}
            height={300} />}
        </div>
      </div>

      <div className='card'>
        <div className='title'>Male - Female</div>
        <div id="gender">
          {mtests.length && <GenderChart
            data={mtests.map(x => { if (x.birthYear) return x.birthYear; })}
            width={700}
            height={300} />}
        </div>
      </div>


      <div className='card'>
        <div className='title'>Results</div>
        <div id="results">
          {mtests.length && <TestResultChart
            id={2}
            data={mtests}
            width={700}
            height={300} />}
        </div>
      </div> */}

      <div className='cards-container'>
        <div className='cards-row'>
          <Card title={"Screened"} counter={"123"} color={'black'} backgroundColor={'rgb(254, 240, 227)'} />
          <Card title={"Male"} counter={"24"} backgroundColor={'rgb(234, 240, 230)'} />
          <Card title={"Female"} counter={"12"} backgroundColor={'rgb(234, 246, 245)'} />
        </div>

        <div className='cards-row'>
          <Card title={"Tested Positive"} counter={"2"} backgroundColor={'yellow'} />
          <Card title={"Trait"} counter={"56"} backgroundColor={'brown'} />
          <Card title={"Disease"} counter={"40"} backgroundColor={'azure'} />
        </div>
      </div>

      {/* {JSON.stringify(
        mtests.group(({ gender }) => {
          if (gender === 'Male' || gender === 'Female')
            return gender;
          else
            return "Not Specified";
        })
      )} */}
    </div>
  );
}

export default App;