1 files changed, 5 insertions, 6 deletions
diff --git a/maps-frontend/src/App.js b/maps-frontend/src/App.js
index 0e25f39..659b8f5 100644
--- a/maps-frontend/src/App.js
+++ b/maps-frontend/src/App.js
@@ -2,7 +2,7 @@
 import React, {useEffect, useState} from 'react';
 import TimeSelector from './components/TimeSelector.js';
 import Canvas from './components/Canvas.js';
-import DataWidget from './components/DataWidget.js';
+import HubList from './components/HubList.js';
 import Loading from './components/Loading.js';
 
 // CSS import
@@ -23,7 +23,7 @@ function App() {
     end: new Date(Date.now() - 12096e5)
   });
   // State for visualization data
-  const [graphData, setGraphData] = useState({});
+  const [data, setData] = useState([]);
   // States to control cursor.
   const [cursor, setCursor] = useState('grab');
   // State for routing.
@@ -45,7 +45,7 @@ function App() {
     })
     .then(res  => res.json())
     .then(data => {
-      setGraphData(data);
+      setData(data);
       setHasLoaded(true);
     })
     .catch(err => console.log(err));
@@ -75,9 +75,8 @@ 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>
-      <DataWidget setHasLoaded={setHasLoaded}></DataWidget>
-      <Canvas setCoord={setCoord} route={route} selector={currentSelector} startLat={startLat} 
-        startLon={startLon} endLat={endLat} endLon={endLon} setCursor={setCursor}
+      <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>}