1 files changed, 77 insertions, 0 deletions
diff --git a/maps-frontend/src/App.js b/maps-frontend/src/App.js
new file mode 100644
index 0000000..2eb0c81
--- /dev/null
+++ b/maps-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) ? <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} setSelected={setSelected} selected={selected} dates={dates}></HubList>
+          <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>
+          <Visualization hasLoaded={hasLoaded} data={data} setSelected={setSelected}></Visualization>
+        </div>
+      }
+    </>
+  );
+}
+
+export default App;