1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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;
|
