diff options
author | clarkohw <66530369+clarkohw@users.noreply.github.com> | 2021-04-20 00:39:10 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-20 00:39:10 -0400 |
commit | b8b194407ce7cc6da683758468f3bf545927ff48 (patch) | |
tree | de5548d695df4bdbf6cb0ff15204cf02b7067fcf /react-frontend/src/components/HubList.js | |
parent | 56532c3d09b162390602af0f94c78ade0d6181e2 (diff) | |
parent | bd050926124a6eceaf17ab8426ee734c6148352f (diff) |
Merge pull request #16 from cs0320-2021/search-by-holder_id
can search trades by holder id
Diffstat (limited to 'react-frontend/src/components/HubList.js')
-rw-r--r-- | react-frontend/src/components/HubList.js | 53 |
1 files changed, 33 insertions, 20 deletions
diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js index c9a5156..8aeb013 100644 --- a/react-frontend/src/components/HubList.js +++ b/react-frontend/src/components/HubList.js @@ -4,18 +4,18 @@ import Hub from "./Hub.js"; import InvestorInfo from "./InvestorInfo.js"; // CSS import -import '../css/UserCheckin.css'; +import "../css/UserCheckin.css"; /** * Component that build the checkin list and displays checkin info. - * @returns {import('react').HtmlHTMLAttributes} A div with the hubs + * @returns {import('react').HtmlHTMLAttributes} A div with the hubs * in a vertical layout. */ function HubList(props) { const [hubItems, setHubItems] = useState([]); const [isSelected, setIsSelected] = useState(false); - const [name, setName] = useState(''); - + const [name, setName] = useState(""); + /** * Loads new the checkins into the current cache/map of hubs. */ @@ -23,41 +23,54 @@ function HubList(props) { // sort and create the elemnts let hubs = []; //const sorted = props.data.sort((a, b) => b.suspicionScore - a.suspicionScore); - props.data.forEach(hub => hubs.push( - <Hub key={hub.id} id={hub.id} name={hub.name} value={hub.suspicionScore} setSelected={props.setSelected}></Hub> - )); + props.data.forEach((hub) => + hubs.push( + <Hub + key={hub.id} + id={hub.id} + name={hub.name} + value={hub.suspicionScore} + setSelected={props.setSelected} + ></Hub> + ) + ); setHubItems(hubs); - } + }; const getName = () => { - props.data.forEach(hub => { + props.data.forEach((hub) => { if (hub.id === props.selected) { setName(hub.name); } - }) - setName(''); - } + }); + 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) + setIsSelected(true); getName(); + 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 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> ); } -export default HubList;
\ No newline at end of file +export default HubList; |