Working on the request to get info on an investor.

7 files changed, 94 insertions, 22 deletions

diff --git a/maps-frontend/src/App.js b/maps-frontend/src/App.js
index a080adc..2eb0c81 100644
--- a/maps-frontend/src/App.js
+++ b/maps-frontend/src/App.js
@@ -24,6 +24,8 @@ function App() {
   });
   // State for visualization data
   const [data, setData] = useState([]);
+  // State for selected person
+  const [selected, setSelected] = useState(-1);
 
   const toEpochMilli = date => Date.parse(date);
   const getGraphData = () => {
@@ -55,7 +57,6 @@ function App() {
     getGraphData();
   }, [dates]);
 
-
   return (
     <>
       {(!hasLoaded) ? <Loading></Loading> :     
@@ -64,9 +65,9 @@ function App() {
           <div className="Canvas-filler Canvas-filler-1"></div>
           <div className="Canvas-filler Canvas-filler-2"></div>
           <div className="Canvas-filler Canvas-filler-3"></div>
-          <HubList setHasLoaded={setHasLoaded} data={data}></HubList>
+          <HubList setHasLoaded={setHasLoaded} data={data} setSelected={setSelected} selected={selected} dates={dates}></HubList>
           <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>
-          <Visualization hasLoaded={hasLoaded} data={data}></Visualization>
+          <Visualization hasLoaded={hasLoaded} data={data} setSelected={setSelected}></Visualization>
         </div>
       }
     </>
diff --git a/maps-frontend/src/components/Hub.js b/maps-frontend/src/components/Hub.js
index 0504e3b..b5b3f28 100644
--- a/maps-frontend/src/components/Hub.js
+++ b/maps-frontend/src/components/Hub.js
@@ -11,17 +11,12 @@ import '../css/UserCheckin.css';
  */
 function Hub(props) {
     // State - toggled
-    const [isToggled, setIsToggled] = useState(false);
 
     return (
         <li className='Checkin'>
             <div className="Img-flex">
-                <span><span className="Clickable-name" onClick= {(e) => console.log(props.name)}>{props.name}</span> just checked in!</span>
-                <img className="Img-btn" hidden={isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_more_white_18dp.png" alt="image"/>
-                <img className="Img-btn" hidden={!isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_less_white_18dp.png" alt="image"/>
-            </div>
-            <div hidden={!isToggled}>
-                Nothin....
+                <span className="Clickable-name" onClick= {() => props.setSelected(props.id)}>{props.name}</span>
+                <span>{props.value.toFixed(3)}</span>
             </div>
         </li>);
 }
diff --git a/maps-frontend/src/components/HubList.js b/maps-frontend/src/components/HubList.js
index af6c9b0..d046e94 100644
--- a/maps-frontend/src/components/HubList.js
+++ b/maps-frontend/src/components/HubList.js
@@ -1,6 +1,7 @@
 // React and component imports
 import { useEffect, useState } from "react";
 import Hub from "./Hub.js";
+import InvestorInfo from "./InvestorInfo.js";
 
 // CSS import
 import '../css/UserCheckin.css';
@@ -12,6 +13,7 @@ import '../css/UserCheckin.css';
  */
 function HubList(props) {
   const [hubItems, setHubItems] = useState([]);
+  const [isSelected, setIsSelected] = useState(false);
   
   /**
    * Loads new the checkins into the current cache/map of hubs.
@@ -21,21 +23,35 @@ function HubList(props) {
     let hubs = [];
     const sorted = props.data.sort((a, b) => b.suspicionScore - a.suspicionScore);
     sorted.forEach(hub => hubs.push(
-      <Hub key={hub.id} name={hub.name} value={hub.suspicionScore}></Hub>
+      <Hub key={hub.id} id={hub.id} name={hub.name} value={hub.suspicionScore} setSelected={props.setSelected}></Hub>
     ));
 
     setHubItems(hubs);
   }
 
+  const getName = () => {
+    console.log(props.selected);
+    props.data.forEach(hub => {
+      if (hub.id == props.selected) {
+        return hub.name;
+      }
+    })
+    return '';
+  }
+
   // React hook that updates when the hubs are recalculated
   useEffect(() => updateHubItems(), [props.data]);
 
+  //React hook to show data for an investor
+  useEffect(() => setIsSelected(true), [props.selected]);
+
   return (
     <div className="User-checkin">
         <div className="Checkins">
             <h2>Suspicion Ranks</h2>
             <ul className='Checkin-list'>{hubItems}</ul>
         </div>
+        <InvestorInfo name={getName()} dates={props.dates}></InvestorInfo>
     </div>
   );
 }
diff --git a/maps-frontend/src/components/InvestorInfo.js b/maps-frontend/src/components/InvestorInfo.js
new file mode 100644
index 0000000..24994d0
--- /dev/null
+++ b/maps-frontend/src/components/InvestorInfo.js
@@ -0,0 +1,65 @@
+// React import
+import { useEffect, useState } from "react";
+
+// CSS import
+import '../css/UserCheckin.css';
+
+/**
+ * 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({});
+
+  const toEpochMilli = date => Date.parse(date);
+  const getInfo = () => {
+    if (props.name === "") {
+      return;
+    }
+    
+    console.log({ 
+      person: props.name,
+      start:  toEpochMilli(props.dates.start), 
+      end:    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"
+    })
+    .then(res  => {
+      console.log(res);
+      res.json();
+    })
+    .then(data => {
+      console.log(data);
+      setInfo(data);
+    })
+    .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>
+  );*/
+
+  useEffect(() => getInfo(), [props.name])
+
+return (
+  <div className="Chosen-user">
+    hi
+  </div>
+);
+}
+
+export default InvestorInfo;
\ No newline at end of file
diff --git a/maps-frontend/src/components/Loading.js b/maps-frontend/src/components/Loading.js
index ed95bb1..6fdf5ba 100644
--- a/maps-frontend/src/components/Loading.js
+++ b/maps-frontend/src/components/Loading.js
@@ -10,7 +10,7 @@ function Loading() {
     <div className="App Loading">
       <header className="App-header">
         <img src={"./logo512.png"} className="App-logo" alt="logo" />
-        <h1 className="App-title">Loading Maps</h1>
+        <h1 className="App-title">Loading WatchDogs</h1>
         <p className="App-title">It takes a minute to connect to the servers and database :)</p>
       </header>
     </div>
diff --git a/maps-frontend/src/components/Visualization.js b/maps-frontend/src/components/Visualization.js
index c33339b..c0e5811 100644
--- a/maps-frontend/src/components/Visualization.js
+++ b/maps-frontend/src/components/Visualization.js
@@ -15,33 +15,28 @@ function Visualization(props) {
   const options = {
     edges: {
       color: "#ffffff"
-    }
+    },
+    autoResize: true
   };
-
   const events = {
-    select: event => {
-      console.log(event);
-    }
+    select: () => event => props.setSelected(event.nodes[0])
   };
 
-
   const [graphState, setGraphState] = useState({
     nodes: [],
     edges: []
   });
-
   const getNodes = () => {
     let nodes = [];
     props.data.forEach(hub => {
       nodes.push({
         id: hub.id,
         label: hub.name,
-        size: hub.suspicionScore * 50
+        size: hub.suspicionScore * 10
       });
     });
     return nodes;
   }
-
   const getEdges = () => {
     let edges = []
     props.data.forEach(hub => {
diff --git a/maps-frontend/src/css/UserCheckin.css b/maps-frontend/src/css/UserCheckin.css
index 3e16ffd..141cc01 100644
--- a/maps-frontend/src/css/UserCheckin.css
+++ b/maps-frontend/src/css/UserCheckin.css
@@ -60,7 +60,7 @@ ul {
 
 
 .Checkin {
-  padding-bottom: 20px;
+  padding-top: 10px;
   border-bottom: 1px solid #e6ecf0;
 }