added link, gain

2 files changed, 77 insertions, 35 deletions

diff --git a/react-frontend/src/components/InvestorInfo.js b/react-frontend/src/components/InvestorInfo.js
index 3a3a11f..436fa17 100644
--- a/react-frontend/src/components/InvestorInfo.js
+++ b/react-frontend/src/components/InvestorInfo.js
@@ -14,8 +14,10 @@ import uuid from "react-uuid";
 function InvestorInfo(props) {
   const [info, setInfo] = useState({
     percentGain: 0,
+    moneyIn: 0,
+    moneyOut: 0,
     percentSP500: 0,
-    holdings: []
+    holdings: [],
   });
 
   const [showStocks, setShowStocks] = useState(false);
@@ -26,7 +28,7 @@ function InvestorInfo(props) {
       return;
     }
 
-    const toEpochMilli = date => Date.parse(date);
+    const toEpochMilli = (date) => Date.parse(date);
 
     console.log({
       selectedId: props.selectedId,
@@ -46,37 +48,42 @@ function InvestorInfo(props) {
       },
       credentials: "same-origin",
     })
-    .then(res  => res.json())
-    .then(data => {
-      console.log(data);
-      setInfo(data);
-      props.setShowSelectedInfo(true);
-    })
-    .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>)}
+        <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>);
+  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]);
@@ -84,15 +91,20 @@ function InvestorInfo(props) {
   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 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}
+        <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.percentGain.toFixed(3)}$</p> gain
+          <p className="bigNumber">{(info.moneyOut - info.moneyIn).toFixed(3)}$</p> gain
         </div>
 
         <div>
@@ -104,23 +116,48 @@ function InvestorInfo(props) {
       <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"/>
+            <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>
+          <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"/>
+            <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>
   );
 }
diff --git a/react-frontend/src/css/InvesterInfo.css b/react-frontend/src/css/InvesterInfo.css
index fcfb29c..3501b70 100644
--- a/react-frontend/src/css/InvesterInfo.css
+++ b/react-frontend/src/css/InvesterInfo.css
@@ -54,3 +54,8 @@
 .gain-row {
   margin-right: 20px;
 }
+
+a {
+  color: lightgreen;
+  text-decoration: none;
+}