From d339801aba3fcedc0b3027f73dac91deaae14acc Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Fri, 16 Apr 2021 18:58:58 -0400 Subject: Removed old testing react app for frontend. --- react-frontend/src/App.js | 77 +++++++++++++++++++++ react-frontend/src/App.test.js | 8 +++ react-frontend/src/components/DateSelector.js | 17 +++++ react-frontend/src/components/Hub.js | 24 +++++++ react-frontend/src/components/HubList.js | 62 +++++++++++++++++ react-frontend/src/components/InvestorInfo.js | 66 ++++++++++++++++++ react-frontend/src/components/Loading.js | 20 ++++++ react-frontend/src/components/TimeSelector.js | 48 +++++++++++++ react-frontend/src/components/Visualization.js | 69 +++++++++++++++++++ react-frontend/src/css/App.css | 76 +++++++++++++++++++++ react-frontend/src/css/Canvas.css | 7 ++ react-frontend/src/css/CoordSelector.css | 52 ++++++++++++++ react-frontend/src/css/Route.css | 56 +++++++++++++++ react-frontend/src/css/UserCheckin.css | 94 ++++++++++++++++++++++++++ react-frontend/src/index.css | 14 ++++ react-frontend/src/index.js | 17 +++++ react-frontend/src/logo.svg | 1 + react-frontend/src/reportWebVitals.js | 13 ++++ react-frontend/src/setupTests.js | 5 ++ 19 files changed, 726 insertions(+) create mode 100644 react-frontend/src/App.js create mode 100644 react-frontend/src/App.test.js create mode 100644 react-frontend/src/components/DateSelector.js create mode 100644 react-frontend/src/components/Hub.js create mode 100644 react-frontend/src/components/HubList.js create mode 100644 react-frontend/src/components/InvestorInfo.js create mode 100644 react-frontend/src/components/Loading.js create mode 100644 react-frontend/src/components/TimeSelector.js create mode 100644 react-frontend/src/components/Visualization.js create mode 100644 react-frontend/src/css/App.css create mode 100644 react-frontend/src/css/Canvas.css create mode 100644 react-frontend/src/css/CoordSelector.css create mode 100644 react-frontend/src/css/Route.css create mode 100644 react-frontend/src/css/UserCheckin.css create mode 100644 react-frontend/src/index.css create mode 100644 react-frontend/src/index.js create mode 100644 react-frontend/src/logo.svg create mode 100644 react-frontend/src/reportWebVitals.js create mode 100644 react-frontend/src/setupTests.js (limited to 'react-frontend/src') diff --git a/react-frontend/src/App.js b/react-frontend/src/App.js new file mode 100644 index 0000000..2eb0c81 --- /dev/null +++ b/react-frontend/src/App.js @@ -0,0 +1,77 @@ +// React/component imports +import React, {useEffect, useState} from 'react'; +import TimeSelector from './components/TimeSelector.js'; +import Visualization from './components/Visualization.js'; +import HubList from './components/HubList.js'; +import Loading from './components/Loading.js'; + +// CSS import +import './css/App.css'; + +/** + * Main component of the app. Holds the main layout of the big components. + * @returns {import('react').HtmlHTMLAttributes} A div of the body of the page. + */ +function App() { + // State to open app when loaded + const [hasLoaded, setHasLoaded] = useState(false); + // State indicate if canvas is redrawing + const [isChanging, setIsChanging] = useState(false); + // State to hold dates -> two weeks apart on initialization. + const [dates, setDates] = useState({ + start: new Date(Date.now() - 12096e5), + end: new Date() + }); + // 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 = () => { + fetch("http://localhost:4567/data", { + method: "POST", + body: JSON.stringify({ + start: toEpochMilli(dates.start), + end: toEpochMilli(dates.end) + }), + headers: { + "Content-Type": "application/json", + }, + credentials: "same-origin" + }) + .then(res => res.json()) + .then(data => { + setData(data.holders); + setHasLoaded(true); + }) + .catch(err => console.log(err)); + + setIsChanging(false); + } + + // Hooks to update data on init and switching of data + useEffect(() => getGraphData(), []); + useEffect(() => { + setIsChanging(true); + getGraphData(); + }, [dates]); + + return ( + <> + {(!hasLoaded) ? : +
+
Welcome to WatchDogs!
+
+
+
+ + + +
+ } + + ); +} + +export default App; diff --git a/react-frontend/src/App.test.js b/react-frontend/src/App.test.js new file mode 100644 index 0000000..1f03afe --- /dev/null +++ b/react-frontend/src/App.test.js @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/react-frontend/src/components/DateSelector.js b/react-frontend/src/components/DateSelector.js new file mode 100644 index 0000000..bf01d44 --- /dev/null +++ b/react-frontend/src/components/DateSelector.js @@ -0,0 +1,17 @@ +// CSS import +import '../css/Route.css'; +import '../css/CoordSelector.css'; + +/** + * The component that selects and displays a coordinate. + * @param {Object} props The props for the element. + */ +function DateSelector(props) { + return ( +
+ props.changedFunc(new Date(e.target.value))} onClick={() => props.clickedFunc()}/> +
+ ); +} + +export default DateSelector; \ No newline at end of file diff --git a/react-frontend/src/components/Hub.js b/react-frontend/src/components/Hub.js new file mode 100644 index 0000000..8a3ac1c --- /dev/null +++ b/react-frontend/src/components/Hub.js @@ -0,0 +1,24 @@ +// React import +import { 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 Hub(props) { + // State - toggled + + return ( +
  • +
    + console.log(props.id)}>{props.name} + {props.value.toFixed(3)} +
    +
    • ); +} + +export default Hub; \ No newline at end of file diff --git a/react-frontend/src/components/HubList.js b/react-frontend/src/components/HubList.js new file mode 100644 index 0000000..f5b1414 --- /dev/null +++ b/react-frontend/src/components/HubList.js @@ -0,0 +1,62 @@ +// 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'; + +/** + * Component that build the checkin list and displays checkin info. + * @returns {import('react').HtmlHTMLAttributes} A div with the hubs + * in a vertical layout. + */ +function HubList(props) { + const [hubItems, setHubItems] = useState([]); + const [isSelected, setIsSelected] = useState(false); + const [name, setName] = useState(''); + + /** + * Loads new the checkins into the current cache/map of hubs. + */ + const updateHubItems = () => { + // sort and create the elemnts + let hubs = []; + const sorted = props.data.sort((a, b) => b.suspicionScore - a.suspicionScore); + sorted.forEach(hub => hubs.push( + + )); + + setHubItems(hubs); + } + + const getName = () => { + props.data.forEach(hub => { + if (hub.id == props.selected) { + setName(hub.name); + } + }) + setName(''); + } + + // React hook that updates when the hubs are recalculated + useEffect(() => updateHubItems(), [props.data]); + + //React hook to show data for an investor + useEffect(() => { + setIsSelected(true) + getName(); + }, [props.selected]); + + return ( +
    +
    +

    Suspicion Ranks

    +
      {hubItems}
    +
    + +
    + ); +} + +export default HubList; \ No newline at end of file diff --git a/react-frontend/src/components/InvestorInfo.js b/react-frontend/src/components/InvestorInfo.js new file mode 100644 index 0000000..d368984 --- /dev/null +++ b/react-frontend/src/components/InvestorInfo.js @@ -0,0 +1,66 @@ +// 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 = () => { + console.log({ + person: props.name, + start: toEpochMilli(props.dates.start), + end: toEpochMilli(props.dates.end) + }); + + if (props.name === "") { + return; + } + + 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, props.isSelected, props.personId]) + + return ( + + ); +} + +export default InvestorInfo; \ No newline at end of file diff --git a/react-frontend/src/components/Loading.js b/react-frontend/src/components/Loading.js new file mode 100644 index 0000000..6fdf5ba --- /dev/null +++ b/react-frontend/src/components/Loading.js @@ -0,0 +1,20 @@ +// CSS import +import '../css/App.css'; + +/** + * Component that shows the program initially loading. + * @returns The loading widget - spinning logo :) + */ +function Loading() { + return ( +
    +
    + logo +

    Loading WatchDogs

    +

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

    +
    +
    + ); +} + +export default Loading; \ No newline at end of file diff --git a/react-frontend/src/components/TimeSelector.js b/react-frontend/src/components/TimeSelector.js new file mode 100644 index 0000000..6960807 --- /dev/null +++ b/react-frontend/src/components/TimeSelector.js @@ -0,0 +1,48 @@ +// React/Component imports +import { useEffect, useState } from "react"; +import DateSelector from './DateSelector.js'; + +// CSS imports +import '../css/Route.css'; + + +/** + * The component that hold the forms for routing. + * @param {Object} props + */ +function TimeSelector(props) { + const [current, setCurrent] = useState(""); + + const toValue = date => new Date(date).toISOString().slice(0, 10); + + const [startDate, setStartDate] = useState(props.dates.start); + const [endDate, setEndDate] = useState(props.dates.end); + + const changeTimeframe = () => { + props.setDates({ + start: startDate, + end: endDate + }); + } + + useEffect(() => setCurrent(""), [startDate, endDate]); + + // The div with the html elements for routing. + return ( +
    +
    + +
    +

    Adjust Timeframe :)

    + +
    + +
    +
    + ); +} + +export default TimeSelector; \ No newline at end of file diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js new file mode 100644 index 0000000..91082e9 --- /dev/null +++ b/react-frontend/src/components/Visualization.js @@ -0,0 +1,69 @@ +// JS module imports +import { useEffect, useRef, useState } from "react"; +import uuid from 'react-uuid'; +import Graph from 'vis-react'; + +// CSS imports +import '../css/Canvas.css'; + +/** + * This function renders and mantains thhe canvas. + * @param {Object} props The props for the canvas. + * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured. + */ +function Visualization(props) { + const options = { + edges: { + color: "#ffffff" + }, + autoResize: true + }; + const events = { + 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 * 10 + }); + }); + return nodes; + } + const getEdges = () => { + let edges = [] + props.data.forEach(hub => { + hub.followers.forEach(follower => { + edges.push({ + from: hub.id, + to: follower.id + }); + }); + }); + return edges; + } + + // Hooks to update graph state + useEffect(() => setGraphState({nodes: getNodes(), edges: getEdges()}), [JSON.stringify(props.data)]); + + return ( +
    + + +
    + ); +} + +export default Visualization; + diff --git a/react-frontend/src/css/App.css b/react-frontend/src/css/App.css new file mode 100644 index 0000000..90e9046 --- /dev/null +++ b/react-frontend/src/css/App.css @@ -0,0 +1,76 @@ +.App { + display: grid; + grid-template-areas: "head canvasFill2 canvasFill3 checkin" + "canvasFill1 canvasFill2 canvasFill3 checkin" + "route canvasFill2 canvasFill3 checkin"; + grid-template-rows: max-content auto max-content; + grid-template-columns: max-content auto max-content max-content; + background-color: #121212; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + + +.Canvas-filler { + width: 100%; + height: 100%; + + z-index: 1; +} + +.Canvas-filler-1 { + grid-area: canvasFill1; +} +.Canvas-filler-2 { + grid-area: canvasFill2; +} +.Canvas-filler-3 { + grid-area: canvasFill3; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + grid-area: head; + min-height: 7vh; + width: max-content; + display: flex; + padding: 0 20px; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; + z-index: 10; + background-color: #333333; + border-radius: 5px; + margin: 5px; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.Loading { + z-index: 100; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file diff --git a/react-frontend/src/css/Canvas.css b/react-frontend/src/css/Canvas.css new file mode 100644 index 0000000..e67d87d --- /dev/null +++ b/react-frontend/src/css/Canvas.css @@ -0,0 +1,7 @@ +.Map-canvas { + /*touch-action: none; */ + position: absolute; + z-index: 5; + width: 100vw; + height: 100vh; +} \ No newline at end of file diff --git a/react-frontend/src/css/CoordSelector.css b/react-frontend/src/css/CoordSelector.css new file mode 100644 index 0000000..881be08 --- /dev/null +++ b/react-frontend/src/css/CoordSelector.css @@ -0,0 +1,52 @@ +/* CSS adapted from w3school buttons */ +.Btn-select-left > p, .Btn-select-right > p { + padding: 0; + margin: 0; +} + +.Btn-select-left { + background-color: #424242; + border: 4px solid pink; +} + +.Btn-select-left:hover { + box-shadow: 3px 3px #888888; + color: black; + background-color: pink; +} + +.Btn-select-right { + background-color: #424242; + border: 4px solid lightblue; +} + +.Btn-select-right:hover { + box-shadow: 3px 3px #888888; + color: black; + background-color: lightblue; +} + +.Btn:disabled, +.Btn[disabled]{ + border: 1px solid #999999; + background-color: #cccccc; + color: #666666; + box-shadow: none; + cursor: default; +} + +/* +.Btn:disabled:hover, +.Btn[disabled]:hover{ +} +*/ + +.Textbox { + width: 100px; +} + +.Number-input { + width: 90%; +} + + diff --git a/react-frontend/src/css/Route.css b/react-frontend/src/css/Route.css new file mode 100644 index 0000000..efc4868 --- /dev/null +++ b/react-frontend/src/css/Route.css @@ -0,0 +1,56 @@ +.Route { + grid-area: route; + z-index: 10; + color: white; + border-radius: 10px; + background-color: #121212; + /*cursor: default;*/ + /* Transparent background */ + background: rgba(0, 0, 0, 0); +} + +.Coord-selectors-flex { + display: flex; + gap: 20px; + padding: 8px; + margin: 0; + align-content: flex-end; + background-color: #333333; + margin: 5px; + border-radius: 3px; +} + +/* CSS adapted from w3school buttons */ +.Btn { + color: white; + padding: 16px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + transition-duration: 0.4s; + cursor: pointer; + outline: none; +} + +.Route-btn:hover { + box-shadow: 3px 3px #ccc; + color: black; + background-color: lightgreen; +} + +.Route-btn { + background-color: #424242; + border: 2px solid lightgreen; + box-shadow: .5px .5px 0 2px lightgreen; +} + +.Btn:disabled, +.Btn[disabled]{ + border: 1px solid #999999; + background-color: #cccccc; + color: #666666; + /*cursor: default;*/ + box-shadow: none; +} \ No newline at end of file diff --git a/react-frontend/src/css/UserCheckin.css b/react-frontend/src/css/UserCheckin.css new file mode 100644 index 0000000..141cc01 --- /dev/null +++ b/react-frontend/src/css/UserCheckin.css @@ -0,0 +1,94 @@ +.User-checkin { + grid-area: checkin; + height: 100vh; + background-color: #121212; + z-index: 10; + color: white; + border-radius: 10px; + display: flex; + font-size: 18px; + cursor: default; + /* Transparent background */ + background: rgba(0, 0, 0, 0); +} + +ul { + list-style-type: none; +} + +.User-checkin > div { + z-index: 10; + background-color: #333333; + border-radius: 20px; + margin: 5px; +} + +.Coord-ex { + height: 1vh; + margin: 0; + padding: 0; + text-align: center; +} + +.Chosen-user > h2, .Checkins > h2 { + display: flex; + justify-content: space-evenly; + height: 5vh; + padding: 0 10px; +} + +.Checkin-list { + padding: 0 20px; + height: 86vh; + overflow-y: scroll; + cursor: default; +} + +.User-checkin-list { + height: 80vh; + overflow-y: scroll; + + list-style-position: inside; + padding: 0 20px; + text-align: center; + text-indent: -12px; +} + +.User-checkin-list > li { + margin-bottom: 20px; +} + + +.Checkin { + padding-top: 10px; + border-bottom: 1px solid #e6ecf0; +} + +.Checkin:last-child { + border-bottom: none; +} + +.Img-flex { + margin: 5px 10px 10px 0; + gap: 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.Img-btn { + background-color: #424242; + border-radius: 50%; + margin-right: 10px; +} + +.Img-btn:hover { + box-shadow: 3px 3px #333333; + cursor: pointer; +} + +.Clickable-name { + cursor: pointer; + text-decoration: underline; + color: lightgreen; +} \ No newline at end of file diff --git a/react-frontend/src/index.css b/react-frontend/src/index.css new file mode 100644 index 0000000..72f4b2d --- /dev/null +++ b/react-frontend/src/index.css @@ -0,0 +1,14 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: #121212; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/react-frontend/src/index.js b/react-frontend/src/index.js new file mode 100644 index 0000000..ef2edf8 --- /dev/null +++ b/react-frontend/src/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +ReactDOM.render( + + + , + document.getElementById('root') +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/react-frontend/src/logo.svg b/react-frontend/src/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/react-frontend/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/react-frontend/src/reportWebVitals.js b/react-frontend/src/reportWebVitals.js new file mode 100644 index 0000000..5253d3a --- /dev/null +++ b/react-frontend/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/react-frontend/src/setupTests.js b/react-frontend/src/setupTests.js new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/react-frontend/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; -- cgit v1.2.3-70-g09d2