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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import * as React from 'react';
import { Zap } from 'react-feather';
import {
getCollapsibleIsOpen,
getHideUnavailableProxies,
getProxySortBy,
} from '../../store/app';
import { getProxies, switchProxy } from '../../store/proxies';
import Button from '../Button';
import CollapsibleSectionHeader from '../CollapsibleSectionHeader';
import { connect, useStoreActions } from '../StateProvider';
import { useFilteredAndSorted } from './hooks';
import s0 from './ProxyGroup.module.scss';
import { ProxyList, ProxyListSummaryView } from './ProxyList';
const { createElement, useCallback, useMemo, useState } = React;
function ZapWrapper() {
return (
<div className={s0.zapWrapper}>
<Zap size={16} />
</div>
);
}
function ProxyGroupImpl({
name,
all: allItems,
delay,
hideUnavailableProxies,
proxySortBy,
proxies,
type,
now,
isOpen,
apiConfig,
dispatch,
}) {
const all = useFilteredAndSorted(
allItems,
delay,
hideUnavailableProxies,
proxySortBy,
proxies
);
const isSelectable = useMemo(() => type === 'Selector', [type]);
const {
app: { updateCollapsibleIsOpen },
proxies: { requestDelayForProxies },
} = useStoreActions();
const toggle = useCallback(() => {
updateCollapsibleIsOpen('proxyGroup', name, !isOpen);
}, [isOpen, updateCollapsibleIsOpen, name]);
const itemOnTapCallback = useCallback(
(proxyName) => {
if (!isSelectable) return;
dispatch(switchProxy(apiConfig, name, proxyName));
},
[apiConfig, dispatch, name, isSelectable]
);
const [isTestingLatency, setIsTestingLatency] = useState(false);
const testLatency = useCallback(async () => {
setIsTestingLatency(true);
try {
await requestDelayForProxies(apiConfig, all);
} catch (err) {}
setIsTestingLatency(false);
}, [all, apiConfig, requestDelayForProxies]);
return (
<div className={s0.group}>
<div style={{ display: 'flex', alignItems: 'center' }}>
<CollapsibleSectionHeader
name={name}
type={type}
toggle={toggle}
qty={all.length}
isOpen={isOpen}
/>
<Button
title="Test latency"
kind="minimal"
onClick={testLatency}
isLoading={isTestingLatency}
>
<ZapWrapper />
</Button>
</div>
{createElement(isOpen ? ProxyList : ProxyListSummaryView, {
all,
now,
isSelectable,
itemOnTapCallback,
})}
</div>
);
}
export const ProxyGroup = connect((s, { name, delay }) => {
const proxies = getProxies(s);
const collapsibleIsOpen = getCollapsibleIsOpen(s);
const proxySortBy = getProxySortBy(s);
const hideUnavailableProxies = getHideUnavailableProxies(s);
const group = proxies[name];
const { all, type, now } = group;
return {
all,
delay,
hideUnavailableProxies,
proxySortBy,
proxies,
type,
now,
isOpen: collapsibleIsOpen[`proxyGroup:${name}`],
};
})(ProxyGroupImpl);
|
