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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
// React import
import { useEffect, useState } from "react";
// CSS import
import "../css/UserCheckin.css";
import "../css/InvesterInfo.css";
import uuid from "react-uuid";
/**
* Componenet for checkins. Has a toggle to show more info.
* @param {Object} props The props of the component.
* @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
*/
function InvestorInfo(props) {
const [info, setInfo] = useState({
percentGain: 0,
percentSP500: 0,
holdings: []
});
const [showStocks, setShowStocks] = useState(false);
const [showFollowers, setShowFollowers] = useState(false);
const getInfo = () => {
if (props.selectedId === -1) {
return;
}
const toEpochMilli = date => Date.parse(date);
console.log({
selectedId: props.selectedId,
startTime: toEpochMilli(props.dates.start),
endTime: toEpochMilli(props.dates.end),
});
fetch("http://localhost:4567/profit", {
method: "POST",
body: JSON.stringify({
selectedId: props.selectedId,
startTime: toEpochMilli(props.dates.start),
endTime: toEpochMilli(props.dates.end),
}),
headers: {
"Content-Type": "application/json",
},
credentials: "same-origin",
})
.then(res => res.json())
.then(data => {
console.log(data);
setInfo(data);
props.setShowSelectedInfo(true);
})
.catch(err => console.log(err));
};
const stockTable = () => {
return (
<>
<li class="Stock-row">
<div className="tableHeader">
<div className="symbol-row">Symbol</div>
<div className="gain-row">Realized gain</div>
<div className="gain-row">Unrealized gain</div>
</div>
</li>
{info.holdings.map(holding =>
<li class="Stock-row">
<div className="symbol-row">{holding.ticker}</div>
<div className="gain-row">{holding.realizedGain.toFixed(3)}</div>
<div className="gain-row">{holding.unrealizedGain.toFixed(3)}</div>
</li>)}
</>
);
};
const followerList = () =>
props.followers.map(follower => <li key={uuid()} class="Clickable-name" onClick={() => props.setSelectedId(follower.id)}>{follower.name}</li>);
// Hook that updates when selected has changed
useEffect(() => getInfo(), [props.selectedId]);
return (
<div className="Chosen-user" hidden={!props.showSelectedInfo}>
<h3>
<span onClick={() => props.setShowSelectedInfo(false)}><img className="Img-btn" src="assets/round_arrow_back_white_18dp.png" alt="image"/></span>
<span>CIK: {props.selectedId}</span>
</h3>
<h2 id="investerName">
{props.name}
</h2>
<div id="top-bar">
<div id="gain-number">
<p className="bigNumber">{info.percentGain.toFixed(3)}$</p> gain
</div>
<div>
<p className="bigNumber">{info.percentGain.toFixed(3)}%</p>
compared to {info.percentSP500.toFixed(3)}% on SP500
</div>
</div>
<div>
<div className="Checkin">
<div className="Img-flex">
<span className="tableHeader">View trades</span>
<img className="Img-btn" hidden={showStocks} onClick={() => setShowStocks(toggle => !toggle)} src="assets/round_expand_more_white_18dp.png" alt="image"/>
<img className="Img-btn" hidden={!showStocks} onClick={() => setShowStocks(toggle => !toggle)} src="assets/round_expand_less_white_18dp.png" alt="image"/>
</div>
<ul hidden={!showStocks} class="Stock-table">{stockTable()}</ul>
</div>
<div className="Checkin" hidden={!followerList}>
<div className="Img-flex">
<span className="tableHeader">View followers</span>
<img className="Img-btn" hidden={showFollowers} onClick={() => setShowFollowers(toggle => !toggle)} src="assets/round_expand_more_white_18dp.png" alt="image"/>
<img className="Img-btn" hidden={!showFollowers} onClick={() => setShowFollowers(toggle => !toggle)} src="assets/round_expand_less_white_18dp.png" alt="image"/>
</div>
<ul hidden={!showFollowers}>{followerList()}</ul>
</div>
</div>
</div>
);
}
export default InvestorInfo;
|
