-
Notifications
You must be signed in to change notification settings - Fork 715
/
ProxyGroup.js
62 lines (55 loc) · 1.47 KB
/
ProxyGroup.js
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
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { useActions, useComponentState } from 'm/store';
import Proxy from 'c/Proxy';
import s0 from './ProxyGroup.module.scss';
import { getUserProxies, switchProxy } from 'd/proxies';
const mapStateToProps = s => ({
proxies: getUserProxies(s)
});
// should move this to sth like constants.js
// const userProxyTypes = ['Shadowsocks', 'Vmess', 'Socks5'];
export default function ProxyGroup2({ name }) {
const { proxies } = useComponentState(mapStateToProps);
const actions = useActions({ switchProxy });
const group = proxies[name];
const { all, now } = group;
const list = useMemo(
() => {
if (all) {
const a = [now];
all.forEach(i => i !== now && a.push(i));
return a;
} else {
return [now];
}
},
[all, now]
);
return (
<div className={s0.group}>
<div className={s0.header}>
<h2>
<span>{name}</span>
<span>{group.type}</span>
</h2>
</div>
<div className={s0.list}>
{list.map(proxyName => {
return (
<div
className={s0.proxy}
key={proxyName}
onClick={() => actions.switchProxy(name, proxyName)}
>
<Proxy name={proxyName} now={proxyName === group.now} />
</div>
);
})}
</div>
</div>
);
}
ProxyGroup2.propTypes = {
name: PropTypes.string
};