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
|
import * as React from 'react';
import { useMutation, useQuery, useQueryClient } from 'react-query';
import { useRecoilState } from 'recoil';
import {
fetchRuleProviders,
refreshRuleProviderByName,
updateRuleProviders,
} from '~/api/rule-provider';
import { fetchRules } from '~/api/rules';
import { ruleFilterText } from '~/store/rules';
import type { ClashAPIConfig } from '~/types';
const { useCallback, useState } = React;
export function useUpdateRuleProviderItem(
name: string,
apiConfig: ClashAPIConfig
): [(ev: React.MouseEvent<HTMLButtonElement>) => unknown, boolean] {
const queryClient = useQueryClient();
const { mutate, isLoading } = useMutation(refreshRuleProviderByName, {
onSuccess: () => {
queryClient.invalidateQueries('/providers/rules');
},
});
const onClickRefreshButton = (ev: React.MouseEvent<HTMLButtonElement>) => {
ev.preventDefault();
mutate({ name, apiConfig });
};
return [onClickRefreshButton, isLoading];
}
export function useUpdateAllRuleProviderItems(
apiConfig: ClashAPIConfig
): [(ev: React.MouseEvent<HTMLButtonElement>) => unknown, boolean] {
const queryClient = useQueryClient();
const { data: provider } = useRuleProviderQuery(apiConfig);
const { mutate, isLoading } = useMutation(updateRuleProviders, {
onSuccess: () => {
queryClient.invalidateQueries('/providers/rules');
},
});
const onClickRefreshButton = (ev: React.MouseEvent<HTMLButtonElement>) => {
ev.preventDefault();
mutate({ names: provider.names, apiConfig });
};
return [onClickRefreshButton, isLoading];
}
export function useInvalidateQueries() {
const queryClient = useQueryClient();
return useCallback(() => {
queryClient.invalidateQueries('/rules');
queryClient.invalidateQueries('/providers/rules');
}, [queryClient]);
}
export function useRuleProviderQuery(apiConfig: ClashAPIConfig) {
return useQuery(['/providers/rules', apiConfig], () =>
fetchRuleProviders('/providers/rules', apiConfig)
);
}
export function useRuleAndProvider(apiConfig: ClashAPIConfig) {
const { data: rules, isFetching } = useQuery(['/rules', apiConfig], () =>
fetchRules('/rules', apiConfig)
);
const { data: provider } = useRuleProviderQuery(apiConfig);
const [filterText] = useRecoilState(ruleFilterText);
if (filterText === '') {
return { rules, provider, isFetching };
}
const f = filterText.toLowerCase();
return {
rules: rules.filter((r) => r.payload.toLowerCase().indexOf(f) >= 0),
isFetching,
provider: {
byName: provider.byName,
names: provider.names.filter((t) => t.toLowerCase().indexOf(f) >= 0),
},
};
}
export function useRulesPage(apiConfig: ClashAPIConfig) {
const { rules, provider } = useRuleAndProvider(apiConfig);
const [activeTab, setActiveTab] = useState('rules');
const isRulesTab = activeTab === 'rules';
const handleTabKeyDown = useCallback(
(tab: string) => (e: React.KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
setActiveTab(tab);
}
},
[]
);
return {
rules,
provider,
activeTab,
setActiveTab,
isRulesTab,
handleTabKeyDown,
};
}
|
