diff options
| author | Michael Foiani <sotech117@michaels-mbp-3.lan> | 2021-04-16 16:32:02 -0400 |
|---|---|---|
| committer | Michael Foiani <sotech117@michaels-mbp-3.lan> | 2021-04-16 16:32:02 -0400 |
| commit | 3182aec0fa9f1707435f92b0c0644c602125b0be (patch) | |
| tree | afd03fab0ec21cfed2de1a0e2116a241f98bb7a8 /maps-frontend/src/App.js | |
| parent | 579fa51b8b306fb201c799d33e633e58819463fb (diff) | |
Fixed bugs. Looking pretty good.
Diffstat (limited to 'maps-frontend/src/App.js')
| -rw-r--r-- | maps-frontend/src/App.js | 44 |
1 files changed, 17 insertions, 27 deletions
diff --git a/maps-frontend/src/App.js b/maps-frontend/src/App.js index 659b8f5..765455e 100644 --- a/maps-frontend/src/App.js +++ b/maps-frontend/src/App.js @@ -1,7 +1,7 @@ // React/component imports import React, {useEffect, useState} from 'react'; import TimeSelector from './components/TimeSelector.js'; -import Canvas from './components/Canvas.js'; +import Visualization from './components/Visualization.js'; import HubList from './components/HubList.js'; import Loading from './components/Loading.js'; @@ -24,13 +24,8 @@ function App() { }); // State for visualization data const [data, setData] = useState([]); - // States to control cursor. - const [cursor, setCursor] = useState('grab'); - // State for routing. - const [route, setRoute] = useState([]); const toEpochMilli = date => Date.parse(date); - const getGraphData = () => { fetch("http://localhost:4567/data", { method: "POST", @@ -45,42 +40,37 @@ function App() { }) .then(res => res.json()) .then(data => { - setData(data); + console.log(data); + setData(data.holders); setHasLoaded(true); }) .catch(err => console.log(err)); -} - /** - * Sets the coordinate for routing. - * @param {Object} coord The coordinate to replace. - */ - const setCoord = coord => { - setCursor('grab'); + setIsChanging(false); } - // Hooks to update data on init and switching of data useEffect(() => getGraphData(), []); useEffect(() => { setIsChanging(true); getGraphData(); - return () => setIsChanging(false); }, [dates]); return ( - <div className="App" style={{ cursor: cursor }}> - <header className="App-header">Welcome to WatchDogs!</header> - <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> - <Canvas setCursor={setCursor} - hasLoaded={hasLoaded} setHasLoaded={setHasLoaded}></Canvas> - {(!hasLoaded) ? <Loading></Loading> : - <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>} - </div> + <> + {(!hasLoaded) ? <Loading></Loading> : + <div className="App"> + <header className="App-header">Welcome to WatchDogs!</header> + <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> + <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector> + <Visualization hasLoaded={hasLoaded} data={data}></Visualization> + </div> + } + </> ); } |
