summaryrefslogtreecommitdiff
path: root/src/components/proxies/ProxyPageFab.tsx
blob: a8536e054777e5c15094f0d301ceb73f378e74e0 (plain)
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
import * as React from 'react';
import { Zap } from '~/components/shared/FeatherIcons';
import { useTranslation } from 'react-i18next';

import { Action, Fab, IsFetching, position as fabPosition } from '~/components/shared/Fab';
import { RotateIcon } from '~/components/shared/RotateIcon';
import { useTestLatencyAction, useUpdateProviderItems } from '~/modules/proxies/hooks';
import { DispatchFn, FormattedProxyProvider } from '~/store/types';
import { ClashAPIConfig } from '~/types';

function StatefulZap({ isLoading }: { isLoading: boolean }) {
  return isLoading ? (
    <IsFetching>
      <Zap width={16} height={16} />
    </IsFetching>
  ) : (
    <Zap width={16} height={16} />
  );
}

export function ProxyPageFab({
  dispatch,
  apiConfig,
  proxyProviders,
}: {
  dispatch: DispatchFn;
  apiConfig: ClashAPIConfig;
  proxyProviders: FormattedProxyProvider[];
}) {
  const { t } = useTranslation();
  const [requestDelayAllFn, isTestingLatency] = useTestLatencyAction({
    dispatch,
    apiConfig,
  });

  const [updateProviders, isUpdating] = useUpdateProviderItems({
    apiConfig,
    dispatch,
    names: proxyProviders.map((item) => item.name),
  });

  return (
    <Fab
      icon={<StatefulZap isLoading={isTestingLatency} />}
      onClick={requestDelayAllFn}
      text={t('Test Latency')}
      style={fabPosition}
    >
      {proxyProviders.length > 0 ? (
        <Action text={t('update_all_proxy_provider')} onClick={updateProviders}>
          <RotateIcon isRotating={isUpdating} />
        </Action>
      ) : null}
    </Fab>
  );
}