Skip to content

Commit bba3572

Browse files
hugo-vrijswijkhugo-vrijswijk
authored
Use Vite and cleanup some old deps for frontend (#61)
* Replace react-scripts with vite * Clean up some packages * Replace moment with date-fns * Move schedule text * Cleanup effects
1 parent 5e6fa14 commit bba3572

File tree

12 files changed

+877
-9282
lines changed

12 files changed

+877
-9282
lines changed

‎webserver/public/index.html renamed to ‎webserver/index.html

+1-8
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,11 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66

7-
<!-- Google fonts -->
8-
<link rel="preconnect" href="https://fonts.googleapis.com" />
9-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10-
<link
11-
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap"
12-
rel="stylesheet"
13-
/>
14-
157
<title>checkrr</title>
168
</head>
179
<body>
1810
<noscript>You need to enable JavaScript to run this app.</noscript>
1911
<div id="root"></div>
12+
<script type="module" src="/src/index.jsx"></script>
2013
</body>
2114
</html>

‎webserver/package.json

+15-17
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,20 @@
44
"private": true,
55
"proxy": "http://localhost:4000",
66
"dependencies": {
7-
"@emotion/react": "^11.10.5",
8-
"@emotion/styled": "^11.10.5",
9-
"@mui/icons-material": "^5.11.0",
10-
"@mui/material": "^5.11.3",
11-
"@mui/x-data-grid": "^5.17.18",
12-
"axios": "^1.2.2",
13-
"chart.js": "^4.1.2",
14-
"convert-hrtime": "^5.0.0",
15-
"moment": "^2.29.4",
7+
"@emotion/react": "^11.10.8",
8+
"@emotion/styled": "^11.10.8",
9+
"@mui/icons-material": "^5.11.16",
10+
"@mui/material": "^5.12.3",
11+
"@mui/x-data-grid": "^6.3.1",
12+
"chart.js": "^4.3.0",
13+
"date-fns": "^2.30.0",
1614
"react": "^18.0.0",
17-
"react-chartjs-2": "^5.1.0",
18-
"react-dom": "^18.2.0",
19-
"react-router-dom": "^6.6.1",
20-
"react-scripts": "5.0.0"
15+
"react-chartjs-2": "^5.2.0",
16+
"react-dom": "^18.2.0"
2117
},
2218
"scripts": {
23-
"start": "react-scripts start",
24-
"build": "react-scripts build",
25-
"test": "react-scripts test",
26-
"eject": "react-scripts eject"
19+
"start": "vite",
20+
"build": "vite build"
2721
},
2822
"eslintConfig": {
2923
"extends": [
@@ -42,5 +36,9 @@
4236
"last 1 firefox version",
4337
"last 1 safari version"
4438
]
39+
},
40+
"devDependencies": {
41+
"@vitejs/plugin-react-swc": "^3.3.0",
42+
"vite": "^4.3.5"
4543
}
4644
}

‎webserver/src/App.js

-41
This file was deleted.

‎webserver/src/App.jsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Container } from '@mui/system';
2+
import { ThemeProvider, createTheme } from '@mui/material/styles';
3+
import CssBaseline from '@mui/material/CssBaseline';
4+
import ResponsiveAppBar from './components/Navbar';
5+
import Stats from './components/Stats';
6+
import DataTable from './components/Table';
7+
8+
const darkTheme = createTheme({
9+
palette: {
10+
mode: 'dark',
11+
},
12+
});
13+
14+
function App() {
15+
return (
16+
<ThemeProvider theme={darkTheme}>
17+
<CssBaseline />
18+
<ResponsiveAppBar></ResponsiveAppBar>
19+
<Container maxWidth="xl">
20+
<Container maxWidth="xl">
21+
<br />
22+
<Stats />
23+
<br />
24+
<DataTable />
25+
</Container>
26+
</Container>
27+
</ThemeProvider>
28+
);
29+
}
30+
31+
export default App;

‎webserver/src/components/Navbar.jsx

+27-71
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,46 @@
11
import * as React from 'react';
22
import { useState, useEffect } from 'react';
3-
import axios from 'axios';
3+
import http from '../http';
44
import AppBar from '@mui/material/AppBar';
55
import Toolbar from '@mui/material/Toolbar';
66
import Box from '@mui/material/Box';
77
import Typography from '@mui/material/Typography';
88
import Container from '@mui/material/Container';
9-
import convertHrtime from 'convert-hrtime';
10-
import moment from 'moment';
9+
import { parseJSON , formatDistanceToNow, formatDuration, intervalToDuration, addMilliseconds } from'date-fns';
1110
import { Button } from '@mui/material';
1211

1312
export default function ResponsiveAppBar() {
1413
const [running, setrunning] = useState(false)
15-
const [timeDiff, settimeDiff] = useState({})
14+
const [timeDiff, settimeDiff] = useState("")
1615
const [schedule, setschedule] = useState("")
1716

1817
function fetchData() {
19-
axios.get('/api/stats/current')
20-
.then(res => {
21-
let data = res.data
22-
if (data.timeDiff !== 0) {
23-
settimeDiff(prettyPrintTime(convertHrtime(data.timeDiff)))
24-
} else {
25-
settimeDiff("0ms")
26-
}
27-
setrunning(data.running)
28-
})
29-
axios.get('/api/schedule')
30-
.then(res => {
31-
let data = res.data
32-
if (data != null) {
33-
setschedule(moment(data).fromNow())
34-
} else {
35-
setschedule(moment(new Date().toISOString()).fromNow())
36-
}
37-
})
38-
setTimeout(() => {fetchData()},10000)
39-
}
18+
http.get('/api/stats/current')
19+
.then(data => {
20+
const timeDiffMs = data.timeDiff / 1000_000;
21+
const now = new Date();
22+
const duration = intervalToDuration({ start: now, end: addMilliseconds(now, timeDiffMs) });
23+
// Add millisecond precision
24+
const millisecondsToAdd = Math.round(timeDiffMs % 1000) / 1000;
25+
duration.seconds += millisecondsToAdd;
26+
settimeDiff(formatDuration(duration));
4027

41-
function prettyPrintTime(data) {
42-
let msec = data.milliseconds
43-
var hh = Math.floor(msec / 1000 / 60 / 60);
44-
msec -= hh * 1000 * 60 * 60;
45-
var mm = Math.floor(msec / 1000 / 60);
46-
msec -= mm * 1000 * 60;
47-
var ss = Math.floor(msec / 1000);
48-
msec -= ss * 1000;
49-
var ms = Math.round(msec)
50-
if (hh !== 0) {
51-
return `${hh}h ${mm}m ${ss}s ${ms}ms`
52-
} else if (mm !== 0) {
53-
return `${mm}m ${ss}s ${ms}ms`
54-
} else if (ss !== 0) {
55-
return `${ss}s ${ms}ms`
56-
} else {
57-
return `${ms}ms`
58-
}
28+
setrunning(data.running);
29+
});
30+
http.get('/api/schedule').then((data) => {
31+
const nextRun = data ? parseJSON(data) : new Date();
32+
setschedule(formatDistanceToNow(nextRun, { addSuffix: true }));
33+
});
5934
}
6035

6136
function runCheckrr() {
62-
axios.post('/api/run', {}).then(res => {
63-
return
64-
})
37+
http.post("/api/run", {});
6538
}
6639

6740
useEffect(() => {
68-
fetchData()
41+
fetchData();
42+
const interval = setInterval(fetchData, 10000);
43+
return () => clearInterval(interval);
6944
// eslint-disable-next-line
7045
},[])
7146

@@ -109,10 +84,10 @@ export default function ResponsiveAppBar() {
10984
textDecoration: 'none',
11085
}}
11186
>
112-
{running ? "Running" : "Waiting for next run"}
87+
{running ? 'Running' : `Waiting for next run ${schedule && `(${schedule})`}`}
11388
</Typography>
11489
</Box>
115-
<Box sx={{ flexGrow: 0 }}>
90+
{timeDiff && <Box sx={{ flexGrow: 0 }}>
11691
<Typography
11792
variant="h8"
11893
noWrap
@@ -128,30 +103,11 @@ export default function ResponsiveAppBar() {
128103
textDecoration: 'none',
129104
}}
130105
>
131-
{"Next Run: " + schedule}
106+
Last Run: {timeDiff}
132107
</Typography>
133-
</Box>
134-
<Box sx={{ flexGrow: 0 }}>
135-
<Typography
136-
variant="h8"
137-
noWrap
138-
component="a"
139-
href="/"
140-
sx={{
141-
mr: 2,
142-
display: { xs: 'none', md: 'flex' },
143-
fontFamily: 'monospace',
144-
fontWeight: 300,
145-
letterSpacing: '.01rem',
146-
color: 'inherit',
147-
textDecoration: 'none',
148-
}}
149-
>
150-
{"Last Run: " + timeDiff}
151-
</Typography>
152-
</Box>
108+
</Box>}
153109
</Toolbar>
154110
</Container>
155111
</AppBar>
156112
);
157-
}
113+
}

‎webserver/src/components/Stats.jsx

+14-25
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import { useState, useEffect } from 'react';
33
import Typography from '@mui/material/Typography';
44
import { Paper } from "@mui/material";
5-
import axios from 'axios';
5+
import http from '../http';
66
import Grid from '@mui/material/Grid';
77
import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, Title } from 'chart.js';
88
import { Pie, Line } from 'react-chartjs-2';
@@ -15,12 +15,15 @@ export default function Stats() {
1515
const [borderColors] = useState(["rgb(150, 11, 143)","rgb(80, 137, 25)","rgb(139, 43, 254)","rgb(250, 39, 49)","rgb(37, 99, 151)",
1616
"rgb(188, 33, 3)","rgb(38, 46, 252)","rgb(248, 185, 75)","rgb(251, 133, 55)","rgb(139, 227, 251)","rgb(94, 166, 191)"])
1717

18-
ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, Title);
18+
useEffect(() => {
19+
const chartComponents = [ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, Title];
20+
ChartJS.register(...chartComponents);
21+
return () => ChartJS.unregister(...chartComponents);
22+
}, []);
1923

2024
function fetchData() {
21-
axios.get('/api/stats/current')
22-
.then(res => {
23-
let stats = res.data
25+
http.get('/api/stats/current')
26+
.then(stats => {
2427
let labels = []
2528
let data = []
2629

@@ -48,9 +51,8 @@ export default function Stats() {
4851
}
4952
setpiedata(piedata)
5053
})
51-
axios.get('/api/stats/historical')
52-
.then(res => {
53-
let data = res.data
54+
http.get('/api/stats/historical')
55+
.then(data => {
5456
// Fix the data so it's ready for chart.js
5557
let sortedData = { sonarrSubmissions: [], radarrSubmissions: [], lidarrSubmissions: [], filesChecked: [], hashMatches: [],
5658
hashMismatches: [], videoFiles: [], audioFiles: [], unknownFileCount: [], nonVideo: [] }
@@ -107,25 +109,12 @@ export default function Stats() {
107109
let linedata = { labels: label, datasets: datasets }
108110
setlinedata(linedata)
109111
})
110-
setTimeout(() => {fetchData()},10000)
111-
}
112-
113-
function randomRGB(border = false) {
114-
let a = 0.0
115-
if (border) {
116-
a = 1.0
117-
} else {
118-
a = 0.5
119-
}
120-
let o = Math.round, r = Math.random, s = 255;
121-
let red = o(r()*s)
122-
let green = o(r()*s)
123-
let blue = o(r()*s)
124-
return `rgba(${red}, ${green}, ${blue}, ${a})`
125112
}
126113

127114
useEffect(() => {
128-
fetchData()
115+
fetchData();
116+
const interval = setInterval(fetchData, 10000);
117+
return () => clearInterval(interval);
129118
// eslint-disable-next-line
130119
},[])
131120

@@ -177,4 +166,4 @@ export default function Stats() {
177166
<br/>
178167
</Paper>
179168
);
180-
}
169+
}

0 commit comments

Comments
 (0)