add createdat

src/components/Alerts.css

@@ -1,6 +1,6 @@
 .alert-card {
-    width: 40vw;
-   height: 20vh;
+    width: 30vw;
+    height: 10vh;
     background-color: white;
     margin: 10px;
     border-style: solid;

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;
@@ -35,6 +33,7 @@ const Alerts = () => {
             {alerts.length &&
                 alerts.map((alert) => <div key={alert.id} className='alert-card'>
                     {alert.message}
+                    {alert.createdAt}
                 </div>)}
         </div>
     )