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
|
import React from 'react';
import prettyBytes from '../misc/pretty-bytes';
import { connect } from './StateProvider';
import { getClashAPIConfig } from '../store/app';
import { fetchData } from '../api/traffic';
import * as connAPI from '../api/connections';
import s0 from './TrafficNow.module.css';
const { useState, useEffect, useCallback } = React;
const mapState = s => ({
apiConfig: getClashAPIConfig(s)
});
export default connect(mapState)(TrafficNow);
function TrafficNow({ apiConfig }) {
const { upStr, downStr } = useSpeed(apiConfig);
const { upTotal, dlTotal, connNumber } = useConnection(apiConfig);
return (
<div className={s0.TrafficNow}>
<div className="sec">
<div>Upload</div>
<div>{upStr}</div>
</div>
<div className="sec">
<div>Download</div>
<div>{downStr}</div>
</div>
<div className="sec">
<div>Upload Total</div>
<div>{upTotal}</div>
</div>
<div className="sec">
<div>Download Total</div>
<div>{dlTotal}</div>
</div>
<div className="sec">
<div>Active Connections</div>
<div>{connNumber}</div>
</div>
</div>
);
}
function useSpeed(apiConfig) {
const [speed, setSpeed] = useState({ upStr: '0 B/s', downStr: '0 B/s' });
useEffect(() => {
return fetchData(apiConfig).subscribe(o =>
setSpeed({
upStr: prettyBytes(o.up) + '/s',
downStr: prettyBytes(o.down) + '/s'
})
);
}, [apiConfig]);
return speed;
}
function useConnection(apiConfig) {
const [state, setState] = useState({
upTotal: '0 B',
dlTotal: '0 B',
connNumber: 0
});
const read = useCallback(
({ downloadTotal, uploadTotal, connections }) => {
setState({
upTotal: prettyBytes(uploadTotal),
dlTotal: prettyBytes(downloadTotal),
connNumber: connections.length
});
},
[setState]
);
useEffect(() => {
return connAPI.fetchData(apiConfig, read);
}, [apiConfig, read]);
return state;
}
|
