blob: 7a82c617b9ee6fb64980564a9dc6d3a11b85c34d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
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="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>
<InvestorInfo
selectedId={props.selectedId}
setSelectedId={updateSelectedId}
dates={props.dates}
setShowSelectedInfo={setShowSelectedInfo}
showSelectedInfo={showSelectedInfo}
followers={followers}
name={selectedName}
></InvestorInfo>
</div>
</>
);
}
export default HubWidget;
|
