import React, { useEffect, useState, useRef } from 'react';
import { query, collection, onSnapshot } from 'firebase/firestore';

import './Alerts.css';
import db from '../firebase';

const Alerts = () => {
    const [alerts, setAlerts] = useState([]);

    useEffect(() => {
        if (!allTests) {
            const q = query(collection(db, "alerts"));

            const unsub = onSnapshot(q, (querySnapshot) => {
                const testDevices = new Set();
                const hposTests = [];
                querySnapshot.forEach((document) => {
                    const hposTestData = document.data();
                    hposTests.push(hposTestData);
                    const { deviceSerialNumber } = hposTestData;
                    testDevices.add(deviceSerialNumber);
                });
                const groups = [...testDevices];
                // setDevices(groups);
                setAlerts(hposTests);
            });

            return () => unsub;
        }
    }, []);

    return (
        <div>
            {alerts.length}
        </div>
    )
}

export default Alerts;