From 7aa4573b8e3bc638aef3b87e5331d33615e11128 Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Tue, 29 Dec 2020 17:22:46 -0700
Subject: [PATCH] refactor resolvedTarget to use a custom hook for DOH
 resolution instead of using react-query directly [skip ci]

---
 .../ui/components/form/resolvedTarget.tsx     | 34 ++++-------------
 hyperglass/ui/hooks/index.ts                  |  3 +-
 hyperglass/ui/hooks/types.ts                  | 10 +++++
 hyperglass/ui/hooks/useDNSQuery.ts            | 38 +++++++++++++++++++
 4 files changed, 58 insertions(+), 27 deletions(-)
 create mode 100644 hyperglass/ui/hooks/useDNSQuery.ts

diff --git a/hyperglass/ui/components/form/resolvedTarget.tsx b/hyperglass/ui/components/form/resolvedTarget.tsx
index 1d0cffc..d1a72cd 100644
--- a/hyperglass/ui/components/form/resolvedTarget.tsx
+++ b/hyperglass/ui/components/form/resolvedTarget.tsx
@@ -1,9 +1,8 @@
 import { useEffect, useMemo } from 'react';
 import { Button, Stack, Text, VStack } from '@chakra-ui/react';
-import { useQuery } from 'react-query';
 import { FiArrowRightCircle as RightArrow } from '@meronex/icons/fi';
 import { useConfig, useColorValue } from '~/context';
-import { useStrf, useLGState } from '~/hooks';
+import { useStrf, useLGState, useDNSQuery } from '~/hooks';
 
 import type { DnsOverHttps } from '~/types';
 import type { TResolvedTarget } from './types';
@@ -34,32 +33,15 @@ export const ResolvedTarget = (props: TResolvedTarget) => {
     web.text.fqdn_message,
   ]);
 
-  const { data: data4, isLoading: isLoading4, isError: isError4 } = useQuery(
-    [fqdnTarget.value, 4],
-    dnsQuery,
+  const { data: data4, isLoading: isLoading4, isError: isError4 } = useDNSQuery(
+    fqdnTarget.value,
+    4,
   );
 
-  const { data: data6, isLoading: isLoading6, isError: isError6 } = useQuery(
-    [fqdnTarget.value, 6],
-    dnsQuery,
+  const { data: data6, isLoading: isLoading6, isError: isError6 } = useDNSQuery(
+    fqdnTarget.value,
+    6,
   );
-  async function dnsQuery(
-    target: string,
-    family: 4 | 6,
-  ): Promise<DnsOverHttps.Response | undefined> {
-    let json;
-    const type = family === 4 ? 'A' : family === 6 ? 'AAAA' : '';
-    const controller = new AbortController();
-    const timeout = setTimeout(() => controller.abort(), 1000);
-    const res = await fetch(`${dnsUrl}?name=${target}&type=${type}`, {
-      headers: { accept: 'application/dns-json' },
-      signal: controller.signal,
-      mode: 'cors',
-    });
-    json = await res.json();
-    clearTimeout(timeout);
-    return json;
-  }
 
   function handleOverride(value: string): void {
     setTarget({ field: 'query_target', value });
@@ -84,7 +66,7 @@ export const ResolvedTarget = (props: TResolvedTarget) => {
       <Text fontSize="sm" textAlign="center">
         {messageStart}
         <Text as="span" fontSize="sm" fontWeight="bold" color={color}>
-          {fqdnTarget.value}
+          {`${fqdnTarget.value}`.toLowerCase()}
         </Text>
         {messageEnd}
       </Text>
diff --git a/hyperglass/ui/hooks/index.ts b/hyperglass/ui/hooks/index.ts
index 6339718..eaff83a 100644
--- a/hyperglass/ui/hooks/index.ts
+++ b/hyperglass/ui/hooks/index.ts
@@ -1,10 +1,11 @@
 export * from './useASNDetail';
 export * from './useBooleanValue';
 export * from './useDevice';
+export * from './useDNSQuery';
 export * from './useGreeting';
 export * from './useLGQuery';
 export * from './useLGState';
 export * from './useOpposingColor';
+export * from './useScaledTitle';
 export * from './useStrf';
 export * from './useTableToString';
-export * from './useScaledTitle';
diff --git a/hyperglass/ui/hooks/types.ts b/hyperglass/ui/hooks/types.ts
index fc8e012..efde46c 100644
--- a/hyperglass/ui/hooks/types.ts
+++ b/hyperglass/ui/hooks/types.ts
@@ -17,3 +17,13 @@ export interface TUseASNDetailFn {
   pageParam?: QueryFunctionContext['pageParam'];
   queryKey: string;
 }
+
+interface TUseDNSQueryParams {
+  target: string;
+  family: 4 | 6;
+}
+
+export interface TUseDNSQueryFn {
+  pageParam?: QueryFunctionContext['pageParam'];
+  queryKey: [string | null, TUseDNSQueryParams];
+}
diff --git a/hyperglass/ui/hooks/useDNSQuery.ts b/hyperglass/ui/hooks/useDNSQuery.ts
new file mode 100644
index 0000000..032b486
--- /dev/null
+++ b/hyperglass/ui/hooks/useDNSQuery.ts
@@ -0,0 +1,38 @@
+import { useQuery } from 'react-query';
+import { useConfig } from '~/context';
+import { fetchWithTimeout } from '~/util';
+
+import type { DnsOverHttps } from '~/types';
+import type { TUseDNSQueryFn } from './types';
+
+async function dnsQuery(ctx: TUseDNSQueryFn): Promise<DnsOverHttps.Response | undefined> {
+  const [url, { target, family }] = ctx.queryKey;
+
+  const controller = new AbortController();
+
+  let json;
+  const type = family === 4 ? 'A' : family === 6 ? 'AAAA' : '';
+
+  if (url !== null) {
+    const res = await fetchWithTimeout(
+      `${url}?name=${target}&type=${type}`,
+      {
+        headers: { accept: 'application/dns-json' },
+        mode: 'cors',
+      },
+      5000,
+      controller,
+    );
+
+    json = await res.json();
+  }
+
+  return json;
+}
+
+export function useDNSQuery(target: string | null, family: 4 | 6) {
+  const { cache, web } = useConfig();
+  return useQuery([web.dns_provider.url, { target, family }], dnsQuery, {
+    cacheTime: cache.timeout * 1000,
+  });
+}