Finished up the front end functionality. Some issues with the backend (small NaN issues), and some elements need a little more love (styling) before demo.

1 files changed, 59 insertions, 10 deletions

diff --git a/react-frontend/src/components/HubWidget.js b/react-frontend/src/components/HubWidget.js
index de0ae32..7a82c61 100644
--- a/react-frontend/src/components/HubWidget.js
+++ b/react-frontend/src/components/HubWidget.js
@@ -1,12 +1,11 @@
 // React and component imports
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import Hub from "./Hub.js";
 import InvestorInfo from "./InvestorInfo.js";
 
 // CSS import
 import '../css/UserCheckin.css';
 import HubList from "./HubList.js";
-import HubSearch from "./HubSearch.js";
 
 /**
  * Component that build the checkin list and displays checkin info.
@@ -14,20 +13,70 @@ import HubSearch from "./HubSearch.js";
  * in a vertical layout.
  */
 function HubWidget(props) {
+  // States for selected person
+  const [followers, setFollowers] = useState([]);
+  const [selectedName, setSelectedName] = useState([]);
+
+  const [searching, setSearching] = useState(false);
+  const textInput = useRef();
+
+  const [showSelectedInfo, setShowSelectedInfo] = useState(false);
+
+  const updateSelected = () => {
+    props.data.forEach(holder => {
+      if (holder.id === props.selectedId) {
+        console.log(holder);
+        setFollowers(holder.followers);
+        setSelectedName(holder.name);
+      }
+    });
+  }
+
+  // Don't need to fetch if repeat id...
+  const updateSelectedId = id => {
+    setShowSelectedInfo(true);
+    props.setSelectedId(id);
+  }
+  
+  // Hook to update and show the info when a user is clicked on ... 
+  useEffect(() => {
+    updateSelected();
+  }, [props.selectedId]);
+  // On init, don't show...
+  useEffect(() => setShowSelectedInfo(false), []);
+
+  useEffect(() => {
+    if (searching) {
+      return;
+    }
+    textInput.current.value = "";
+    setQueryString("");
+  }, [searching])
+
+  const [queryString, setQueryString] = useState("");
+
   return (
     <>
       <div className="User-checkin">
         <div className="Checkins">
-          <h2>Suspicion Ranks</h2>
-          <HubList setHasLoaded={props.setHasLoaded} data={props.data} setSelected={props.setSelected} selected={props.selected} dates={props.dates}></HubList>
+          <h2 className="Img-flex Title">
+            <span hidden={searching}>Sus Ranks</span>
+            <input ref={textInput} hidden={!searching} type="text" onChange={e => setQueryString(e.target.value)} placeholder="Search by name"></input>
+            <img className="Img-btn" hidden={searching} onClick={() => setSearching(true)} src="assets/outline_search_white_18dp.png" alt="image"/>
+            <img className="Img-btn" hidden={!searching} onClick={() => setSearching(false)} src="assets/outline_cancel_white_18dp.png" alt="image"/>
+          </h2>
+          <HubList data={props.data} setSelectedId={updateSelectedId} queryString={queryString} searching={searching}></HubList>
         </div>
-        <HubSearch data={props.data}></HubSearch>
+        <InvestorInfo
+          selectedId={props.selectedId}
+          setSelectedId={updateSelectedId}
+          dates={props.dates}
+          setShowSelectedInfo={setShowSelectedInfo}
+          showSelectedInfo={showSelectedInfo}
+          followers={followers}
+          name={selectedName}
+        ></InvestorInfo>
       </div>
-      <InvestorInfo
-        personId={props.selected}
-        selectedId={props.selectedId}
-        dates={props.dates}
-      ></InvestorInfo>
     </>
   );
 }