// React and component imports
import { useEffect, useState } from "react";
import Hub from './Hub';

/**
 * Component that build the checkin list and displays checkin info.
 * @returns {import('react').HtmlHTMLAttributes} A div with the checkins 
 * in a vertical layout.
 */
function HubList(props) {
  const [hubItems, setHubItems] = useState([]);

    /**
     * Loads new the checkins into the current cache/map of checkins.
     */
    const updateHubItems = () => {
        let tempCheckinItems = [];
        const sorted = Object.entries(props.data).sort(([,a],[,b]) => b-a);
        console.log(sorted);
        for (const [key, value] of sorted) {
          tempCheckinItems.push(
            <Hub name={key} value={value}></Hub>
          );
        }
        setHubItems(tempCheckinItems);
    }

    // React hook that queries the checkin database every 5 seconds.
    useEffect(() => {
        updateHubItems();
    }, [props.data]);

    return (
      <div className="User-checkin">
          <div className="Checkins">
              <h2>Individual Suspicion</h2>
              <ul className='Checkin-list'>{hubItems}</ul>
          </div>
      </div>
    );
}

export default HubList;