Merge branch 'master' of https://github.com/cs0320-2021/term-project-cohwille-jmccaul3-mfoiani-rhunt2master

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..9e18299 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> gained
+        </div>
+
+        <div>
+          <p className="bigNumber">{info.percentGain.toFixed(3)}%</p>
+          compared to {info.percentSP500.toFixed(3)}% on SP500
+        </div>
+      </div>
+
+      <div>
+        <div className="Checkin" hidden={info.holdings.length === 0}>
+          <div className="Img-flex">
+            <span className="tableHeader">View holdings</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;