1 files changed, 88 insertions, 0 deletions
diff --git a/maps-frontend/src/App.js b/maps-frontend/src/App.js
new file mode 100644
index 0000000..0e25f39
--- /dev/null
+++ b/maps-frontend/src/App.js
@@ -0,0 +1,88 @@
+// React/component imports
+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 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(),
+    end: new Date(Date.now() - 12096e5)
+  });
+  // State for visualization data
+  const [graphData, setGraphData] = 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",
+        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 => {
+      setGraphData(data);
+      setHasLoaded(true);
+    })
+    .catch(err => console.log(err));
+}
+
+  /**
+   * Sets the coordinate for routing.
+   * @param {Object} coord The coordinate to replace.
+   */
+  const setCoord = coord => {
+    setCursor('grab');
+  }
+
+
+  // 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>
+      <DataWidget setHasLoaded={setHasLoaded}></DataWidget>
+      <Canvas setCoord={setCoord} route={route} selector={currentSelector} startLat={startLat} 
+        startLon={startLon} endLat={endLat} endLon={endLon} setCursor={setCursor}
+        hasLoaded={hasLoaded} setHasLoaded={setHasLoaded}></Canvas>
+      {(!hasLoaded) ? <Loading></Loading> :
+      <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>}
+    </div>
+  );
+}
+
+export default App;