Basic way to show the hubs with their scores.

1 files changed, 44 insertions, 0 deletions

diff --git a/maps-frontend/src/components/HubList.js b/maps-frontend/src/components/HubList.js
new file mode 100644
index 0000000..3bbcca6
--- /dev/null
+++ b/maps-frontend/src/components/HubList.js
@@ -0,0 +1,44 @@
+// React and component imports
+import { useEffect, useState } from "react";
+import Hub from "./Hub.js";
+
+// CSS import
+import '../css/UserCheckin.css';
+
+/**
+ * Component that build the checkin list and displays checkin info.
+ * @returns {import('react').HtmlHTMLAttributes} A div with the hubs 
+ * in a vertical layout.
+ */
+function HubList(props) {
+  const [hubItems, setHubItems] = useState([]);
+  
+  /**
+   * Loads new the checkins into the current cache/map of hubs.
+   */
+  const updateHubItems = () => {
+    // sort and create the elemnts
+    let hubs = [];
+    const sorted = props.data.sort((a, b) => b.suspicionScore - a.suspicionScore);
+    console.log(sorted);
+    sorted.forEach(hub => hubs.push(
+      <Hub name={hub.name} value={hub.suspicionScore}></Hub>
+    ));
+
+    setHubItems(hubs);
+  }
+
+  // React hook that updates when the hubs are recalculated
+  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
\ No newline at end of file