update values using snapshot

src/App.js

@@ -8,7 +8,7 @@ import RegistraionChart from './RegistraionChart';
 
 import { initializeApp } from "firebase/app";
 import { getAnalytics } from "firebase/analytics";
-import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
+import { getFirestore, collection, getDocs, doc, onSnapshot, query } from "firebase/firestore";
 import Card from './components/Card';
 
 const firebaseConfig = {
@@ -29,16 +29,89 @@ 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);
+      // 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');
@@ -54,84 +127,19 @@ function App() {
 
   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)'} />
+          <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={"2"} backgroundColor={'yellow'} />
-          <Card title={"Trait"} counter={"56"} backgroundColor={'brown'} />
-          <Card title={"Disease"} counter={"40"} backgroundColor={'azure'} />
+          <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>
-
-      {/* {JSON.stringify(
-        mtests.group(({ gender }) => {
-          if (gender === 'Male' || gender === 'Female')
-            return gender;
-          else
-            return "Not Specified";
-        })
-      )} */}
     </div>
   );
 }