diff options
Diffstat (limited to 'react-frontend/src/components/InvestorInfo.js')
| -rw-r--r-- | react-frontend/src/components/InvestorInfo.js | 181 |
1 files changed, 140 insertions, 41 deletions
diff --git a/react-frontend/src/components/InvestorInfo.js b/react-frontend/src/components/InvestorInfo.js index d368984..436fa17 100644 --- a/react-frontend/src/components/InvestorInfo.js +++ b/react-frontend/src/components/InvestorInfo.js @@ -2,7 +2,9 @@ import { useEffect, useState } from "react"; // CSS import -import '../css/UserCheckin.css'; +import "../css/UserCheckin.css"; +import "../css/InvesterInfo.css"; +import uuid from "react-uuid"; /** * Componenet for checkins. Has a toggle to show more info. @@ -10,57 +12,154 @@ import '../css/UserCheckin.css'; * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info. */ function InvestorInfo(props) { - const [info, setInfo] = useState({}); + const [info, setInfo] = useState({ + percentGain: 0, + moneyIn: 0, + moneyOut: 0, + percentSP500: 0, + holdings: [], + }); - const toEpochMilli = date => Date.parse(date); - const getInfo = () => { - console.log({ - person: props.name, - start: toEpochMilli(props.dates.start), - end: toEpochMilli(props.dates.end) - }); + const [showStocks, setShowStocks] = useState(false); + const [showFollowers, setShowFollowers] = useState(false); - if (props.name === "") { + 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({ - person: props.name, - start: toEpochMilli(props.dates.start), - end: toEpochMilli(props.dates.end) - }), - headers: { - "Content-Type": "application/json", - }, - credentials: "same-origin" + 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 => { - console.log(res); - res.json(); - }) - .then(data => { - console.log(data); - setInfo(data); - }) - .catch(err => console.log(err)); - } - /* + .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 coords = userCoords.map((coord, index) => - <li key={index}> - <span>{'('+coord[0].toFixed(6)}, {coord[1].toFixed(6)+')'}</span> - </li> - );*/ + const followerList = () => + props.followers.map((follower) => ( + <li key={uuid()} class="Clickable-name" onClick={() => props.setSelectedId(follower.id)}> + {follower.name} + </li> + )); - useEffect(() => getInfo(), [props.name, props.isSelected, props.personId]) + // Hook that updates when selected has changed + useEffect(() => getInfo(), [props.selectedId]); return ( - <div className="Chosen-user" hidden={props.isSelected}> - hi + <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"> + <a href={"https://sec.report/CIK/" + props.selectedId + "/Insider-Trades"} target="_blank"> + {props.name} + <img src="link-icon.svg" alt="image" /> + </a> + </h2> + <div id="top-bar"> + <div id="gain-number"> + <p className="bigNumber">{(info.moneyOut - info.moneyIn).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 returns</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;
\ No newline at end of file +export default InvestorInfo; |