blob: 9947d5ef5de9511d6f8906c99211b2ec626d1198 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
// 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>Hubs and Suspicion</h2>
<ul className='Checkin-list'>{hubItems}</ul>
</div>
</div>
);
}
export default HubList;
|
