1 files changed, 17 insertions, 1 deletions
diff --git a/maps-frontend/src/components/HubList.js b/maps-frontend/src/components/HubList.js
index af6c9b0..d046e94 100644
--- a/maps-frontend/src/components/HubList.js
+++ b/maps-frontend/src/components/HubList.js
@@ -1,6 +1,7 @@
 // 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';
@@ -12,6 +13,7 @@ import '../css/UserCheckin.css';
  */
 function HubList(props) {
   const [hubItems, setHubItems] = useState([]);
+  const [isSelected, setIsSelected] = useState(false);
   
   /**
    * Loads new the checkins into the current cache/map of hubs.
@@ -21,21 +23,35 @@ function HubList(props) {
     let hubs = [];
     const sorted = props.data.sort((a, b) => b.suspicionScore - a.suspicionScore);
     sorted.forEach(hub => hubs.push(
-      <Hub key={hub.id} name={hub.name} value={hub.suspicionScore}></Hub>
+      <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>
   );
 }