1 files changed, 59 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..d046e94
--- /dev/null
+++ b/maps-frontend/src/components/HubList.js
@@ -0,0 +1,59 @@
+// React and component imports
+import { useEffect, useState } from "react";
+import Hub from "./Hub.js";
+import InvestorInfo from "./InvestorInfo.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([]);
+  const [isSelected, setIsSelected] = useState(false);
+  
+  /**
+   * 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);
+    sorted.forEach(hub => hubs.push(
+      <Hub key={hub.id} id={hub.id} name={hub.name} value={hub.suspicionScore} setSelected={props.setSelected}></Hub>
+    ));
+
+    setHubItems(hubs);
+  }
+
+  const getName = () => {
+    console.log(props.selected);
+    props.data.forEach(hub => {
+      if (hub.id == props.selected) {
+        return hub.name;
+      }
+    })
+    return '';
+  }
+
+  // React hook that updates when the hubs are recalculated
+  useEffect(() => updateHubItems(), [props.data]);
+
+  //React hook to show data for an investor
+  useEffect(() => setIsSelected(true), [props.selected]);
+
+  return (
+    <div className="User-checkin">
+        <div className="Checkins">
+            <h2>Suspicion Ranks</h2>
+            <ul className='Checkin-list'>{hubItems}</ul>
+        </div>
+        <InvestorInfo name={getName()} dates={props.dates}></InvestorInfo>
+    </div>
+  );
+}
+
+export default HubList;
+\ No newline at end of file