packages/components/containers/vpn/gateways/useGateways.ts

   1 import { useEffect, useRef, useState } from 'react';
   2
   3 import { c, msgid } from 'ttag';
   4
   5 import useApi from '@proton/components/hooks/useApi';
   6 import { SECOND } from '@proton/shared/lib/constants';
   7
   8 import type { Gateway } from './Gateway';
   9 import type { GatewayLocation } from './GatewayLocation';
  10 import type { GatewayUser } from './GatewayUser';
  11 import { queryVPNGateways } from './api';
  12
  13 interface TableConfig {
  14     Name: boolean;
  15     Status: boolean;
  16     Country: boolean;
  17     IPv4: boolean;
  18     IPv6: boolean;
  19     Load: boolean;
  20     Deleted?: boolean;
  21 }
  22
  23 interface GatewayConfig {
  24     Table: TableConfig;
  25     ServerTable: TableConfig;
  26     Provisioning: {
  27         TranslatedDuration: string;
  28     };
  29 }
  30
  31 interface GatewayResult {
  32     Config: GatewayConfig;
  33     Countries: readonly string[];
  34     Locations: readonly GatewayLocation[];
  35     Gateways: readonly Gateway[];
  36     Users: readonly GatewayUser[];
  37 }
  38
  39 export const useGateways = (maxAge: number) => {
  40     const [result, setResult] = useState<GatewayResult | null>(null);
  41     const [loading, setLoading] = useState<boolean>(true);
  42
  43     const api = useApi();
  44
  45     const refreshStateRef = useRef({ lastUpdate: 0, lastSuccess: 0 });
  46
  47     const refresh = async () => {
  48         try {
  49             refreshStateRef.current.lastUpdate = Date.now();
  50             const result = await api<GatewayResult>(queryVPNGateways());
  51             refreshStateRef.current.lastSuccess = Date.now();
  52             setResult(result);
  53         } catch {
  54             // ignore
  55         } finally {
  56             setLoading(false);
  57         }
  58     };
  59
  60     useEffect(() => {
  61         refresh();
  62
  63         const refreshHandle = setInterval(() => {
  64             const { lastSuccess, lastUpdate } = refreshStateRef.current;
  65
  66             // Don't start to refresh until first success
  67             if (!lastSuccess) {
  68                 return;
  69             }
  70
  71             const now = Date.now();
  72             if (now > lastUpdate + maxAge / 5 && now > lastSuccess + maxAge) {
  73                 refresh();
  74             }
  75         }, 30 * SECOND);
  76
  77         return () => {
  78             clearInterval(refreshHandle);
  79         };
  80     }, []);
  81
  82     const nbDay = 7;
  83
  84     return {
  85         loading: !result || loading,
  86         config: result?.Config || {
  87             Table: {
  88                 Name: false,
  89                 Status: true,
  90                 Country: true,
  91                 IPv4: true,
  92                 IPv6: false,
  93                 Load: false,
  94             },
  95             ServerTable: {
  96                 Name: false,
  97                 Status: true,
  98                 Country: true,
  99                 IPv4: true,
 100                 IPv6: false,
 101                 Load: true,
 102             },
 103             Provisioning: {
 104                 TranslatedDuration: c('Label').ngettext(msgid`${nbDay} day`, `${nbDay} days`, nbDay),
 105             },
 106         },
 107         countries: result?.Countries,
 108         locations: result?.Locations,
 109         gateways: result?.Gateways,
 110         users: result?.Users || [],
 111         refresh,
 112     };
 113 };
 114
 115 export default useGateways;