diff --git a/src/components/Alerts.css b/src/components/Alerts.css index 5310b0e..dc92b61 100644 --- a/src/components/Alerts.css +++ b/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); } \ No newline at end of file diff --git a/src/components/Alerts.js b/src/components/Alerts.js index 3d146b8..42d3253 100644 --- a/src/components/Alerts.js +++ b/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 (
{alerts.length && - alerts.map((alert) =>
- {alert.message} -
)} + alerts.map((alert) =>
+ {alert.message} + {alert.createdAt} +
)}
) }