add createdat

src/components/Alerts.css

@@ -1,10 +1,10 @@
 .alert-card {
-    width: 40vw;
-   height: 20vh;
-   background-color: white;
-   margin: 10px;
-   border-style: solid;
-   border-color: rgb(219, 219, 219);
-   border-radius: 6px;
-   border-width: max(1px, 0.0625rem);
+    width: 30vw;
+    height: 10vh;
+    background-color: white;
+    margin: 10px;
+    border-style: solid;
+    border-color: rgb(219, 219, 219);
+    border-radius: 6px;
+    border-width: max(1px, 0.0625rem);
 }

src/components/Alerts.js

@@ -13,17 +13,15 @@ const Alerts = () => {
 
             const unsub = onSnapshot(q, (querySnapshot) => {
                 const testDevices = new Set();
-                const hposTests = [];
+                const alerts = [];
                 querySnapshot.forEach((document) => {
                     console.log(document.data());
-                    const hposTestData = document.data();
-                    hposTests.push(hposTestData);
-                    const { deviceSerialNumber } = hposTestData;
-                    testDevices.add(deviceSerialNumber);
+                    const alert = document.data();
+                    alerts.push(alert);
                 });
                 const groups = [...testDevices];
                 // setDevices(groups);
-                setAlerts(hposTests);
+                setAlerts(alerts.sort((a, b) => { return a.createdAt < b.createdAt; }));
             });
 
             return () => unsub;
@@ -33,9 +31,10 @@ const Alerts = () => {
     return (
         <div>
             {alerts.length &&
-            alerts.map((alert) => <div key={alert.id} className='alert-card'>
-                {alert.message}
-            </div>)}
+                alerts.map((alert) => <div key={alert.id} className='alert-card'>
+                    {alert.message}
+                    {alert.createdAt}
+                </div>)}
         </div>
     )
 }