Merge branch 'master' of https://github.com/cs0320-2021/term-project-cohwille-jmccaul3-mfoiani-rhunt2master

1 files changed, 84 insertions, 0 deletions

diff --git a/react-frontend/src/components/HubWidget.js b/react-frontend/src/components/HubWidget.js
new file mode 100644
index 0000000..f0434d7
--- /dev/null
+++ b/react-frontend/src/components/HubWidget.js
@@ -0,0 +1,84 @@
+// React and component imports
+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";
+
+/**
+ * Component that build the checkin list and displays checkin info.
+ * @returns {import('react').HtmlHTMLAttributes} A div with the hubs 
+ * 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 className="Img-flex Title">
+            <span hidden={searching}>Sus Ranks</span>
+            <input ref={textInput} hidden={!searching} type="search" 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>
+        <InvestorInfo
+          selectedId={props.selectedId}
+          setSelectedId={updateSelectedId}
+          dates={props.dates}
+          setShowSelectedInfo={setShowSelectedInfo}
+          showSelectedInfo={showSelectedInfo}
+          followers={followers}
+          name={selectedName}
+        ></InvestorInfo>
+      </div>
+    </>
+  );
+}
+
+export default HubWidget;
\ No newline at end of file