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
78
79
80
81
82
83
84
85
86
87
88
89
|
// React/component imports
import React, {useEffect, useState} from 'react';
import TimeSelector from './TimeSelector.js';
import Visualization from './Visualization.js';
import HubWidget from './HubWidget.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>
<HubWidget setHasLoaded={setHasLoaded} data={data} setSelected={setSelected} selected={selected} dates={dates}></HubWidget>
<TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>
<Visualization hasLoaded={hasLoaded} data={data} setSelected={setSelected}></Visualization>
</div>
}
</>
);
}
export default WatchDogs;
|
