Finished up the front end functionality. Some issues with the backend (small NaN issues), and some elements need a little more love (styling) before demo.

1 files changed, 75 insertions, 37 deletions

diff --git a/react-frontend/src/components/InvestorInfo.js b/react-frontend/src/components/InvestorInfo.js
index 2a0f0d9..3a3a11f 100644
--- a/react-frontend/src/components/InvestorInfo.js
+++ b/react-frontend/src/components/InvestorInfo.js
@@ -4,6 +4,7 @@ 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.
@@ -11,78 +12,115 @@ import "../css/InvesterInfo.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,
+    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),
+        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 coords = userCoords.map((coord, index) =>
-    <li key={index}>
-        <span>{'('+coord[0].toFixed(6)}, {coord[1].toFixed(6)+')'}</span>
-    </li>
-  );*/
 
   const stockTable = () => {
     return (
-      <div id="stockTable">
+      <>
+      <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>
-      </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>)}
+      </>
     );
   };
 
-  useEffect(() => getInfo(), [props.name, props.isSelected, props.personId]);
+  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={false}>
-      <h2 id="investerName">{"CRUTCHFIELD BRADFORD"}</h2>
+    <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">{583}$</p> gain
+          <p className="bigNumber">{info.percentGain.toFixed(3)}$</p> gain
         </div>
 
         <div>
-          <p className="bigNumber">{2.8}%</p>
-          compared to {1.2}% on SP500
+          <p className="bigNumber">{info.percentGain.toFixed(3)}%</p>
+          compared to {info.percentSP500.toFixed(3)}% on SP500
         </div>
       </div>
-      {stockTable()}
+
+      <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>
   );
 }