From 868c250d5c9ab45be1c5a478d2ff5cd82ec60f2d Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Fri, 16 Apr 2021 18:27:46 -0400 Subject: Working on the request to get info on an investor. --- maps-frontend/src/App.js | 7 +-- maps-frontend/src/components/Hub.js | 9 +--- maps-frontend/src/components/HubList.js | 18 +++++++- maps-frontend/src/components/InvestorInfo.js | 65 +++++++++++++++++++++++++++ maps-frontend/src/components/Loading.js | 2 +- maps-frontend/src/components/Visualization.js | 13 ++---- maps-frontend/src/css/UserCheckin.css | 2 +- 7 files changed, 94 insertions(+), 22 deletions(-) create mode 100644 maps-frontend/src/components/InvestorInfo.js (limited to 'maps-frontend/src') 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) ? : @@ -64,9 +65,9 @@ function App() {
- + - + } 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 (
  • - console.log(props.name)}>{props.name} just checked in! - setIsToggled((toggle) => !toggle)} src="/round_expand_more_white_18dp.png" alt="image"/> - setIsToggled((toggle) => !toggle)} src="/round_expand_less_white_18dp.png" alt="image"/> -
    -
    • ); } 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( - + )); 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 (

    Suspicion Ranks

      {hubItems}
    +
    ); } 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) => +
  • + {'('+coord[0].toFixed(6)}, {coord[1].toFixed(6)+')'} +
    • + );*/ + + useEffect(() => getInfo(), [props.name]) + +return ( +
    + hi +
    +); +} + +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() {
    logo -

    Loading Maps

    +

    Loading WatchDogs

    It takes a minute to connect to the servers and database :)

    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; } -- cgit v1.2.3-70-g09d2