add samples page

src/components/Samples.css

@@ -0,0 +1,27 @@
+.samples-card {
+    width: 35vw;
+    height: 10vh;
+    background-color: white;
+    margin: 10px;
+    padding: 10px;
+    border-style: solid;
+    border-color: rgb(219, 219, 219);
+    border-radius: 6px;
+    border-width: max(1px, 0.0625rem);
+}
+
+.samples-heading {
+    margin: 30px;
+}
+
+.sample-time {
+    font-size: small;
+}
+
+.sample-time-ago {
+    font-size: x-small;
+}
+
+.no-samples-message {
+    margin: 35px;
+}

src/components/Samples.js

@@ -0,0 +1,47 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { query, collection, onSnapshot, where, orderBy } from 'firebase/firestore';
+
+import './Samples.css';
+import db from '../firebase';
+import moment from 'moment';
+
+const Samples = () => {
+    const [samples, setSamples] = useState([]);
+
+    useEffect(() => {
+        if (!samples.length) {
+            const q = query(collection(db, "testData"), where("testTime", ">=", moment().format("YYYY-MM-DD").toString()), orderBy("testTime", "desc"));
+
+            const unsub = onSnapshot(q, (querySnapshot) => {
+                const samples = [];
+                querySnapshot.forEach((document) => {
+                    console.log(document.data());
+                    const alert = document.data();
+                    samples.push(alert);
+                });
+                setSamples(samples);
+            });
+
+            return () => unsub;
+        }
+    }, []);
+
+    return (
+        <div>
+            <div className='samples-heading'><h3>Samples page for denovix useage</h3></div>
+            {samples.length ? (
+                samples.map((alert, index) => (
+                    <div key={index} className='samples-card'>
+                        <div tabIndex={index}><strong>{alert._id}</strong></div>
+                        <p className='sample-time'>{alert.testTime}</p>
+                        <p className='sample-time-ago'>{moment(alert.testTime).fromNow()}</p>
+                    </div>
+                ))
+            ) : (
+                <div className='no-samples-message'>Samples will appear as in when a test is recorded</div>
+            )}
+        </div>
+    )
+}
+
+export default Samples;

src/index.js

@@ -14,6 +14,7 @@ import WorldMap from './components/WorldMap';
 import RegistraionChart from './RegistraionChart';
 import Calibrations from './components/Calibrations';
 import Alerts from './components/Alerts';
+import Samples from './components/Samples';
 
 const router = createBrowserRouter([
   {
@@ -48,6 +49,10 @@ const router = createBrowserRouter([
     path: "/alerts",
     element: <Alerts />,
   },
+  {
+    path: "/samples",
+    element: <Samples />,
+  },
 ]);