4 files changed, 21 insertions, 17 deletions

diff --git a/maps-frontend/src/components/Hub.js b/maps-frontend/src/components/Hub.js
index b5b3f28..8a3ac1c 100644
--- a/maps-frontend/src/components/Hub.js
+++ b/maps-frontend/src/components/Hub.js
@@ -15,7 +15,7 @@ function Hub(props) {
     return (
         <li className='Checkin'>
             <div className="Img-flex">
-                <span className="Clickable-name" onClick= {() => props.setSelected(props.id)}>{props.name}</span>
+                <span className="Clickable-name" onClick= {() => console.log(props.id)}>{props.name}</span>
                 <span>{props.value.toFixed(3)}</span>
             </div>
         </li>);
diff --git a/maps-frontend/src/components/HubList.js b/maps-frontend/src/components/HubList.js
index d046e94..f5b1414 100644
--- a/maps-frontend/src/components/HubList.js
+++ b/maps-frontend/src/components/HubList.js
@@ -14,6 +14,7 @@ import '../css/UserCheckin.css';
 function HubList(props) {
   const [hubItems, setHubItems] = useState([]);
   const [isSelected, setIsSelected] = useState(false);
+  const [name, setName] = useState('');
   
   /**
    * Loads new the checkins into the current cache/map of hubs.
@@ -30,20 +31,22 @@ function HubList(props) {
   }
 
   const getName = () => {
-    console.log(props.selected);
     props.data.forEach(hub => {
       if (hub.id == props.selected) {
-        return hub.name;
+        setName(hub.name);
       }
     })
-    return '';
+    setName('');
   }
 
   // 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]);
+  useEffect(() => {
+    setIsSelected(true)
+    getName();
+  }, [props.selected]);
 
   return (
     <div className="User-checkin">
@@ -51,7 +54,7 @@ function HubList(props) {
             <h2>Suspicion Ranks</h2>
             <ul className='Checkin-list'>{hubItems}</ul>
         </div>
-        <InvestorInfo name={getName()} dates={props.dates}></InvestorInfo>
+        <InvestorInfo personId={props.selected} isSelected={isSelected} name={name} dates={props.dates}></InvestorInfo>
     </div>
   );
 }
diff --git a/maps-frontend/src/components/InvestorInfo.js b/maps-frontend/src/components/InvestorInfo.js
index 24994d0..d368984 100644
--- a/maps-frontend/src/components/InvestorInfo.js
+++ b/maps-frontend/src/components/InvestorInfo.js
@@ -14,15 +14,16 @@ function InvestorInfo(props) {
 
   const toEpochMilli = date => Date.parse(date);
   const getInfo = () => {
-    if (props.name === "") {
-      return;
-    }
-    
     console.log({ 
       person: props.name,
       start:  toEpochMilli(props.dates.start), 
       end:    toEpochMilli(props.dates.end) 
     });
+
+    if (props.name === "") {
+      return;
+    }
+  
     fetch("http://localhost:4567/profit", {
         method: "POST",
         body: JSON.stringify({ 
@@ -53,13 +54,13 @@ function InvestorInfo(props) {
     </li>
   );*/
 
-  useEffect(() => getInfo(), [props.name])
+  useEffect(() => getInfo(), [props.name, props.isSelected, props.personId])
 
-return (
-  <div className="Chosen-user">
-    hi
-  </div>
-);
+  return (
+    <div className="Chosen-user" hidden={props.isSelected}>
+      hi
+    </div>
+  );
 }
 
 export default InvestorInfo;
\ No newline at end of file
diff --git a/maps-frontend/src/components/Visualization.js b/maps-frontend/src/components/Visualization.js
index c0e5811..91082e9 100644
--- a/maps-frontend/src/components/Visualization.js
+++ b/maps-frontend/src/components/Visualization.js
@@ -51,7 +51,7 @@ function Visualization(props) {
   }
 
   // Hooks to update graph state
-  useEffect(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [props.data]);
+  useEffect(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [JSON.stringify(props.data)]);
 
   return (
     <div className="Map-canvas">