From ea432d2c59a1ef65343f2085bf4b02bd1937abcf Mon Sep 17 00:00:00 2001
From: Michael Foiani <sotech117@michaels-mbp-3.lan>
Date: Tue, 20 Apr 2021 01:16:05 -0400
Subject: Making the master frontend stable.

---
 react-frontend/src/components/HubList.js   |  7 ----
 react-frontend/src/components/HubSearch.js | 59 ++++++++++++++++++++++++++++++
 react-frontend/src/components/HubWidget.js | 21 ++++++-----
 react-frontend/src/components/Search.js    | 59 ------------------------------
 4 files changed, 70 insertions(+), 76 deletions(-)
 create mode 100644 react-frontend/src/components/HubSearch.js
 delete mode 100644 react-frontend/src/components/Search.js

(limited to 'react-frontend/src')

diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js
index 6d0b3e1..aab7c23 100644
--- a/react-frontend/src/components/HubList.js
+++ b/react-frontend/src/components/HubList.js
@@ -37,13 +37,6 @@ function HubList(props) {
   // React hook that updates when the hubs are recalculated
   useEffect(() => updateHubItems(), [props.data]);
 
-  //React hook to show data for an investor
-  useEffect(() => {
-    setIsSelected(true);
-    getName();
-    console.log("DEVLOG");
-  }, [props.selected]);
-
   return <ul className='Checkin-list'>{hubItems}</ul>;
 }
 
diff --git a/react-frontend/src/components/HubSearch.js b/react-frontend/src/components/HubSearch.js
new file mode 100644
index 0000000..2ae1a32
--- /dev/null
+++ b/react-frontend/src/components/HubSearch.js
@@ -0,0 +1,59 @@
+// React and component imports
+import { useEffect, useState } from "react";
+import InvestorInfo from "./InvestorInfo.js";
+
+// CSS import
+import '../css/UserCheckin.css';
+import Hub from "./HubList.js";
+import Search from "./HubSearch.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 HubSearch(props) {
+  const [queryString, setQueryString] = useState("");
+  const [displayedItems, setDisplayedItems] = useState([]);
+
+  /**
+   * Method that determines whehter the Hub should be showed.
+   * @returns {Boolean} True if to be shown, false if not.
+   */
+  const toInclude = (holder) => {
+    // TODO: add number search or differentiate between it
+    // TODO: add sus score range....
+    const matchingId = queryString.toLowerCase().includes(holder?.id ?? "");
+    const matchingName = queryString.toLowerCase().includes(holder?.name ?? "");
+    return matchingId || matchingName;
+  }
+
+  /**
+   * Filters the items to be shown, then created the iteams and sets the state with the items.
+   */
+  const filterItems = () => {
+    const criteria = props.data.filter(holder => toInclude(holder));
+    setDisplayedItems(criteria.map(hub => <Hub key={hub.id} id={hub.id} name={hub.name} value={hub.suspicionScore} setSelected={props.setSelected}></Hub>))
+  }
+
+  /**
+   * Hook to update the items on change of the search string.
+   */
+  useEffect(() => filterItems(), [queryString]);
+
+  // TODO: maybe have a quick explanation of what search gives...
+  // TODO: have number of ceos that make it...
+  // TODO: weighted search or sort after search....
+  // TODO: highlight part of string that matched...
+  return (
+    <div className="User-checkin">
+      <div className="Checkins">
+        <h2>Search</h2>
+        <input type="text" onChange={(e) => setQueryString(e.value)}></input>
+        <ul className='Checkin-list'>{displayedItems}</ul>;
+      </div>
+    </div>
+  );
+}
+
+export default HubSearch;
\ No newline at end of file
diff --git a/react-frontend/src/components/HubWidget.js b/react-frontend/src/components/HubWidget.js
index a4560fe..7707ee9 100644
--- a/react-frontend/src/components/HubWidget.js
+++ b/react-frontend/src/components/HubWidget.js
@@ -6,28 +6,29 @@ import InvestorInfo from "./InvestorInfo.js";
 // CSS import
 import '../css/UserCheckin.css';
 import HubList from "./HubList.js";
-import Search from "./Search.js";
+import HubSearch from "./HubSearch.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 HudWidget(props) {
+function HubWidget(props) {
   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>
+    <>
+      <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>
+        </div>
+        <HubSearch data={props.data}></HubSearch>
       </div>
-      <Search></Search>
       <InvestorInfo
         personId={props.selected}
-        isSelected={isSelected}
-        name={name}
+        selectedId={props.selected}
         dates={props.dates}
       ></InvestorInfo>
-    </div>
+    </>
   );
 }
 
diff --git a/react-frontend/src/components/Search.js b/react-frontend/src/components/Search.js
deleted file mode 100644
index 0698b01..0000000
--- a/react-frontend/src/components/Search.js
+++ /dev/null
@@ -1,59 +0,0 @@
-// React and component imports
-import { useEffect, useState } from "react";
-import InvestorInfo from "./InvestorInfo.js";
-
-// CSS import
-import '../css/UserCheckin.css';
-import Hub from "./HubList.js";
-import Search from "./Search.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 Search(props) {
-  const [queryString, setQueryString] = useState("");
-  const [displayedItems, setDisplayedItems] = useState([]);
-
-  /**
-   * Method that determines whehter the Hub should be showed.
-   * @returns {Boolean} True if to be shown, false if not.
-   */
-  const toInclude = (holder) => {
-    // TODO: add number search or differentiate between it
-    // TODO: add sus score range....
-    const matchingId = queryString.toLowerCase().includes(holder?.id ?? "");
-    const matchingName = queryString.toLowerCase().includes(holder?.name ?? "");
-    return matchingId || matchingName;
-  }
-
-  /**
-   * Filters the items to be shown, then created the iteams and sets the state with the items.
-   */
-  const filterItems = () => {
-    const criteria = props.data.filter(holder => toInclude(holder));
-    setDisplayedItems(criteria.map(hub => <Hub key={hub.id} id={hub.id} name={hub.name} value={hub.suspicionScore} setSelected={props.setSelected}></Hub>))
-  }
-
-  /**
-   * Hook to update the items on change of the search string.
-   */
-  useEffect(() => filterItems(), [queryString]);
-
-  // TODO: maybe have a quick explanation of what search gives...
-  // TODO: have number of ceos that make it...
-  // TODO: weighted search or sort after search....
-  // TODO: highlight part of string that matched...
-  return (
-    <div className="User-checkin">
-      <div className="Checkins">
-        <h2>Search</h2>
-        <input type="text" onChange={(e) => setQueryString(e.value)}></input>
-        <ul className='Checkin-list'>{displayedItems}</ul>;
-      </div>
-    </div>
-  );
-}
-
-export default Search;
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2