diff options
| -rw-r--r-- | react-frontend/src/App.js | 23 | ||||
| -rw-r--r-- | react-frontend/src/components/HubList.js | 28 | ||||
| -rw-r--r-- | react-frontend/src/components/HubWidget.js | 34 | ||||
| -rw-r--r-- | react-frontend/src/components/Search.js | 59 | ||||
| -rw-r--r-- | react-frontend/src/components/WatchDogs.js | 4 |
5 files changed, 107 insertions, 41 deletions
diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js index a639edd..982f6d4 100644 --- a/react-frontend/src/App.js +++ b/react-frontend/src/App.js @@ -9,18 +9,17 @@ import mainlogo from './images/mainlogo.png'; import './css/Landing.css'; function App() { - const [startApp, setStartApp] = useState(false); - - const startModal = () => { - document.getElementById("main-modal").style.display = 'block'; - setStartApp(false); - } - const exitModal = () => { - document.getElementById("main-modal").style.display = 'none'; - setStartApp(true); - } - - + const [startApp, setStartApp] = useState(false); + + const startModal = () => { + document.getElementById("main-modal").style.display = 'block'; + setStartApp(false); + } + const exitModal = () => { + document.getElementById("main-modal").style.display = 'none'; + setStartApp(true); + } + return ( <> diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js index 8aeb013..6d0b3e1 100644 --- a/react-frontend/src/components/HubList.js +++ b/react-frontend/src/components/HubList.js @@ -1,7 +1,6 @@ // 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"; @@ -13,8 +12,6 @@ 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. @@ -37,16 +34,6 @@ function HubList(props) { setHubItems(hubs); }; - - const getName = () => { - props.data.forEach((hub) => { - if (hub.id === props.selected) { - setName(hub.name); - } - }); - setName(""); - }; - // React hook that updates when the hubs are recalculated useEffect(() => updateHubItems(), [props.data]); @@ -57,20 +44,7 @@ function HubList(props) { console.log("DEVLOG"); }, [props.selected]); - return ( - <div className="User-checkin"> - <div className="Checkins"> - <h2>Suspicion Ranks</h2> - <ul className="Checkin-list">{hubItems}</ul> - </div> - <InvestorInfo - personId={props.selected} - isSelected={isSelected} - name={name} - dates={props.dates} - ></InvestorInfo> - </div> - ); + return <ul className='Checkin-list'>{hubItems}</ul>; } export default HubList; diff --git a/react-frontend/src/components/HubWidget.js b/react-frontend/src/components/HubWidget.js new file mode 100644 index 0000000..a4560fe --- /dev/null +++ b/react-frontend/src/components/HubWidget.js @@ -0,0 +1,34 @@ +// 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'; +import HubList 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 HudWidget(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> + <Search></Search> + <InvestorInfo + personId={props.selected} + isSelected={isSelected} + name={name} + dates={props.dates} + ></InvestorInfo> + </div> + ); +} + +export default HubWidget;
\ No newline at end of file diff --git a/react-frontend/src/components/Search.js b/react-frontend/src/components/Search.js new file mode 100644 index 0000000..0698b01 --- /dev/null +++ b/react-frontend/src/components/Search.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 "./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 diff --git a/react-frontend/src/components/WatchDogs.js b/react-frontend/src/components/WatchDogs.js index d631ea9..6192dee 100644 --- a/react-frontend/src/components/WatchDogs.js +++ b/react-frontend/src/components/WatchDogs.js @@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react'; import TimeSelector from './TimeSelector.js'; import Visualization from './Visualization.js'; -import HubList from './HubList.js'; +import HubWidget from './HubWidget.js'; import Loading from './Loading.js'; import Modal from './Modal.js'; import logo from './images/logo.png'; @@ -77,7 +77,7 @@ function WatchDogs() { <div className="Canvas-filler Canvas-filler-1"></div> <div className="Canvas-filler Canvas-filler-2"></div> <div className="Canvas-filler Canvas-filler-3"></div> - <HubList setHasLoaded={setHasLoaded} data={data} setSelected={setSelected} selected={selected} dates={dates}></HubList> + <HubWidget setHasLoaded={setHasLoaded} data={data} setSelected={setSelected} selected={selected} dates={dates}></HubWidget> <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector> <Visualization hasLoaded={hasLoaded} data={data} setSelected={setSelected}></Visualization> </div> |