update values using snapshot

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "smi-dashboard",
+  "name": "hpos-dashboard",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

src/App.css

@@ -29,7 +29,6 @@ body {
   color: white;
 }
 
-/* remove scroll bar */
 ::-webkit-scrollbar {
   display: none;
 }
@@ -42,9 +41,7 @@ body {
   .numeric-card {
     height: 200px;
     width: 300px;
-    /* border: 1px solid; */
     padding: 20px;
-    /* background-color: #fb9261; */
     box-shadow: 5px 10px 8px 10px #888888;
     border-radius: 15px;
     margin: 20px;
@@ -84,9 +81,7 @@ body {
   .numeric-card {
     height: 200px;
     width: 300px;
-    /* border: 1px solid; */
     padding: 20px;
-    /* background-color: #fb9261; */
     box-shadow: 5px 10px 8px 10px #888888;
     border-radius: 15px;
     margin: 20px;
@@ -116,7 +111,7 @@ body {
   }
 
   .cards-row {
-    margin: 50px;
+    margin: 30px;
     display: flex;
     flex-direction: column;
   }
@@ -126,9 +121,7 @@ body {
   .numeric-card {
     height: 150px;
     width: 200px;
-    /* border: 1px solid; */
     padding: 20px;
-    /* background-color: #fb9261; */
     box-shadow: 5px 10px 8px 10px #888888;
     border-radius: 15px;
     margin: 20px;
@@ -167,10 +160,8 @@ body {
 @media screen and (min-width: 1200px) {
   .numeric-card {
     height: 200px;
-    width: 300px;
+    width: 320px;
-    /* border: 1px solid; */
     padding: 20px;
-    /* background-color: #fb9261; */
     box-shadow: 5px 10px 8px 10px #888888;
     border-radius: 15px;
     margin: 20px;
@@ -200,7 +191,47 @@ body {
   }
 
   .cards-row {
-    margin: 50px;
+    margin: 40px;
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+@media screen and (min-width: 2560px) {
+  .numeric-card {
+    height: 200px;
+    width: 300px;
+    padding: 20px;
+    box-shadow: 5px 10px 8px 10px #888888;
+    border-radius: 15px;
+    margin: 20px;
+    justify-content: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card-title {
+    color: black;
+    font-size: 1em;
+    font-weight: 600;
+    font-family: sans-serif;
+  }
+
+  .card-data {
+    color: black;
+    font-size: 4em;
+    font-family: sans-serif;
+  }
+
+  .cards-container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .cards-row {
+    margin: 40px;
     display: flex;
     flex-direction: row;
   }

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={"Screened"} counter={totalScreened} color={'black'} backgroundColor={'rgb(254, 240, 227)'} />
-          <Card title={"Male"} counter={"24"} backgroundColor={'rgb(234, 240, 230)'} />
+          <Card title={"Male"} counter={males} backgroundColor={'rgb(234, 240, 230)'} />
-          <Card title={"Female"} counter={"12"} backgroundColor={'rgb(234, 246, 245)'} />
+          <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={"Tested Positive"} counter={traits + diseases} backgroundColor={'rgb(244,137, 137)'} />
-          <Card title={"Trait"} counter={"56"} backgroundColor={'brown'} />
+          <Card title={"Trait"} counter={traits} backgroundColor={'rgb(237, 190, 190)'} />
-          <Card title={"Disease"} counter={"40"} backgroundColor={'azure'} />
+          <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>
   );
 }

src/firebase.js

@@ -0,0 +1,16 @@
+import firebase from "firebase";
+
+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 firebaseApp = firebase.initializeApp(firebaseConfig);
+const db = firebase.firestore();
+
+export default db;