From f0866fc8c35b2124d1690ff83fc6a55c3e720eda Mon Sep 17 00:00:00 2001
From: 9308233900 <reagan_hunt@brown.edu>
Date: Sun, 18 Apr 2021 15:23:36 -0700
Subject: landing page rough draft completed

---
 react-frontend/src/components/WatchDogs.js | 89 ++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 react-frontend/src/components/WatchDogs.js

(limited to 'react-frontend/src/components/WatchDogs.js')

diff --git a/react-frontend/src/components/WatchDogs.js b/react-frontend/src/components/WatchDogs.js
new file mode 100644
index 0000000..d631ea9
--- /dev/null
+++ b/react-frontend/src/components/WatchDogs.js
@@ -0,0 +1,89 @@
+// React/component imports
+import React, {useEffect, useState} from 'react';
+import TimeSelector from './TimeSelector.js';
+import Visualization from './Visualization.js';
+import HubList from './HubList.js';
+import Loading from './Loading.js';
+import Modal from './Modal.js';
+import logo from './images/logo.png';
+
+// 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 WatchDogs() {
+  // 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 = () => {
+    console.log({ 
+      start:  toEpochMilli(dates.start), 
+      end:    toEpochMilli(dates.end) 
+    });
+    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 => {
+      //TODO: optimize this
+      const sliced = data.holders.slice(0, 500);
+      console.log(sliced);
+      setData(sliced);
+      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">
+          <Modal>PHP</Modal>
+          <header id="in-app-logo-holder" className="App-header">
+            <img id="in-app-logo" src={logo} alt="logo"/></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 WatchDogs;
-- 
cgit v1.2.3-70-g09d2