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
|
import * as React from 'react';
import APIConfig from '~/components/APIConfig';
import { connect } from '~/components/StateProvider';
import {
addClashAPIConfig,
getClashAPIConfigs,
getSelectedClashAPIConfigIndex,
removeClashAPIConfig,
selectClashAPIConfig,
} from '~/store/app';
import type { ClashAPIConfigWithAddedAt, DispatchFn, State } from '~/store/types';
import type { ClashAPIConfig } from '~/types';
const { useCallback } = React;
type Props = {
dispatch: DispatchFn;
apiConfigs: ClashAPIConfigWithAddedAt[];
selectedClashAPIConfigIndex: number;
};
function BackendPage({ dispatch, apiConfigs, selectedClashAPIConfigIndex }: Props) {
const handleAddConfig = useCallback(
(config: ClashAPIConfig) => {
dispatch(addClashAPIConfig(config));
},
[dispatch]
);
const handleRemoveConfig = useCallback(
(config: ClashAPIConfig) => {
dispatch(removeClashAPIConfig(config));
},
[dispatch]
);
const handleSelectConfig = useCallback(
(config: ClashAPIConfig) => {
dispatch(selectClashAPIConfig(config));
},
[dispatch]
);
return (
<APIConfig
apiConfigs={apiConfigs}
selectedClashAPIConfigIndex={selectedClashAPIConfigIndex}
onAddConfig={handleAddConfig}
onRemoveConfig={handleRemoveConfig}
onSelectConfig={handleSelectConfig}
/>
);
}
const mapState = (state: State) => ({
apiConfigs: getClashAPIConfigs(state),
selectedClashAPIConfigIndex: getSelectedClashAPIConfigIndex(state),
});
export default connect(mapState)(BackendPage);
|
