Ability to use custom DNS Servers

src/app/api/check/[domain]/[recordType]/route.ts

@@ -2,17 +2,28 @@ import { Resolver } from 'dns';
 import { NextRequest, NextResponse } from 'next/server';
 import { dnsServers } from '@/constants/dnsServers';
 import { RecordType, RecordTypes } from '@/constants/recordType';
+import { DNS } from '@/stores/dnsStore';
 
 import { ratelimit } from '@/lib/redis';
 
-export const GET = async (
+export const POST = async (
   req: NextRequest,
   {
     params,
   }: {
     params: { domain: string; recordType: RecordType };
   }
 ) => {
+  let remoteDnsServer: DNS[] = [];
+  try {
+    const res = await req.json();
+    if (res.dnsServers) {
+      remoteDnsServer = res.dnsServers;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+
   const { domain, recordType } = params;
 
   if (!domain) {
@@ -40,8 +51,10 @@ export const GET = async (
     }
   }
 
+  let dnsServersToUse = remoteDnsServer.length > 0 ? remoteDnsServer : dnsServers;
+
   const addressesResults = await Promise.allSettled(
-    dnsServers.map((server: { ip: string; name: string }) => {
+    dnsServersToUse.map((server: { id: string; ip: string; name: string }) => {
       const resolver: Resolver = new Resolver();
       resolver.setServers([server.ip]);
       return new Promise<
@@ -72,31 +85,31 @@ export const GET = async (
             const item = addresses;
             if (!item) {
               return resolve({
-                [server.name]: { value: '', time: end - start },
+                [server.id]: { value: '', time: end - start },
               });
             }
 
             switch (recordType) {
               case 'A':
               case 'AAAA':
                 return resolve({
-                  [server.name]: { value: (item as string[])[0] || '', time: end - start },
+                  [server.id]: { value: (item as string[])[0] || '', time: end - start },
                 });
               case 'MX':
                 return resolve({
-                  [server.name]: { value: (item as { exchange: string }[])[0]?.exchange || '', time: end - start },
+                  [server.id]: { value: (item as { exchange: string }[])[0]?.exchange || '', time: end - start },
                 });
               case 'NS':
                 return resolve({
-                  [server.name]: { value: (item as string[])[0] || '', time: end - start },
+                  [server.id]: { value: (item as string[])[0] || '', time: end - start },
                 });
               case 'PTR':
                 return resolve({
-                  [server.name]: { value: (item as string[])[0] || '', time: end - start },
+                  [server.id]: { value: (item as string[])[0] || '', time: end - start },
                 });
               case 'TXT':
                 return resolve({
-                  [server.name]: { value: (item as string[])[0] || '', time: end - start },
+                  [server.id]: { value: (item as string[])[0] || '', time: end - start },
                 });
               default:
                 return resolve({});

src/app/page.tsx

@@ -1,18 +1,22 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { dnsServers } from '@/constants/dnsServers';
 import { RecordTypes, type RecordType } from '@/constants/recordType';
+import { useDNSStore } from '@/stores/dnsStore';
 import { usePreviouslyCheckedStore } from '@/stores/previouslyCheckedStore';
 import { TestResult, useTestStore } from '@/stores/testStore';
-import { LoaderIcon } from 'lucide-react';
+import { LoaderIcon, PlusCircleIcon } from 'lucide-react';
 import { toast } from 'sonner';
 
+import { findLastIndex } from '@/lib/findLastIndex';
 import { useQueryString } from '@/hooks/queryString';
+import { Button } from '@/components/ui/button';
 import { Footer } from '@/components/footer';
 import { Header } from '@/components/header';
+import { dnsSchemaArray, useAddEditDnsModal } from '@/components/modals/add-edit-dns-modal';
 import { ResultItem } from '@/components/result-item';
 import { SearchForm } from '@/components/search-form';
 
@@ -24,6 +28,15 @@ export default function Home() {
   const { tests, runTests } = useTestStore();
   const { previouslyCheckedList, addPreviouslyChecked, updatePreviouslyChecked } = usePreviouslyCheckedStore();
 
+  const { dns: dnsList, addDNS, saveDnsServersToLocalStorage, loadDnsServersFromLocalStorage } = useDNSStore();
+  const { AddEditDnsModalComponent, setShowAddEditDnsModal } = useAddEditDnsModal({
+    onSubmit: (data) => {
+      addDNS(data);
+      setShowAddEditDnsModal(false);
+      saveDnsServersToLocalStorage();
+    },
+  });
+
   const [loading, setLoading] = useState(false);
 
   const [refreshIntervalTime, setRefreshIntervalTime] = useState<number>();
@@ -53,7 +66,19 @@ export default function Home() {
       domain = domain.split('/')[0];
     }
 
-    const res = await fetch(`/api/check/${domain}/${recordType || 'A'}`);
+    const res = await fetch(`/api/check/${domain}/${recordType || 'A'}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        dnsServers: dnsList.map((dns) => ({
+          id: dns.id,
+          name: dns.name,
+          ip: dns.ip,
+        })),
+      }),
+    });
     if (res.status === 429) {
       const { limit, reset } = await res.json();
       toast.error(
@@ -65,23 +90,29 @@ export default function Home() {
       setLoading(false);
       return;
     }
-    const { addresses } = await res.json();
-
-    const previouslyCheckedItem = previouslyCheckedList.find((item) => item.value === domain);
-    if (previouslyCheckedItem && !runBecauseUrlChange) {
-      updatePreviouslyChecked(previouslyCheckedItem.id, {
-        ...previouslyCheckedItem,
-        timestamp: Date.now(),
-        value: domain,
-        tests,
-      });
-    } else {
-      addPreviouslyChecked(domain, tests);
-    }
+    try {
+      const { addresses } = await res.json();
+
+      const previouslyCheckedItem = previouslyCheckedList.find((item) => item.value === domain);
+      if (previouslyCheckedItem && !runBecauseUrlChange) {
+        updatePreviouslyChecked(previouslyCheckedItem.id, {
+          ...previouslyCheckedItem,
+          timestamp: Date.now(),
+          value: domain,
+          tests,
+        });
+      } else {
+        addPreviouslyChecked(domain, tests);
+      }
 
-    setResolvedAddresses(addresses);
-    setLastRefresh(new Date());
-    setLoading(false);
+      setResolvedAddresses(addresses);
+      setLastRefresh(new Date());
+      setLoading(false);
+    } catch (e) {
+      toast.error(`Something went wrong. Please try again later.`);
+      setResolvedAddresses({});
+      setLoading(false);
+    }
   };
 
   useEffect(() => {
@@ -119,13 +150,18 @@ export default function Home() {
   }, [refreshIntervalTime, lastRefresh, url]);
 
   useEffect(() => {
+    loadDnsServersFromLocalStorage();
+
     if (url.length > 0) {
       checkDomain(url, RecordTypes[0], true);
     }
   }, []);
 
+  const lastCustomDNSIndex = findLastIndex(dnsList, (dns) => !dns.id.startsWith('system--'));
+
   return (
     <main className="flex min-h-screen flex-col">
+      <AddEditDnsModalComponent />
       <Header>
         {refreshIntervalTime && (
           <div>
@@ -140,7 +176,7 @@ export default function Home() {
         )}
       </Header>
       <div className="mx-auto mt-10 flex w-full max-w-6xl flex-1 flex-col items-start gap-4 px-4 pb-14 lg:flex-row">
-        <div className="top-10 mb-8 w-full space-y-6 md:sticky lg:mb-0 lg:max-w-md">
+        <div className="top-10 mb-8 w-full space-y-6 lg:sticky lg:mb-0 lg:max-w-md">
           <SearchForm
             onSubmit={(data) => {
               if (data.refresh && data.refresh !== '0') {
@@ -157,33 +193,64 @@ export default function Home() {
         <div className="w-full flex-1">
           <h2 className="mb-4 block font-heading text-3xl lg:hidden">Results</h2>
           <div className="space-y-2">
-            {dnsServers.map((dnsServer) => {
-              const result = resolvedAddresses[dnsServer.name];
+            {dnsList.map((dnsServer, idx) => {
+              const result = resolvedAddresses[dnsServer.id];
 
               let testResults: TestResult[] = [];
               if (result && result.value !== '') {
                 testResults = runTests(result.value);
               }
 
+              const isLastCustomDNS = lastCustomDNSIndex === idx;
+
               return (
-                <ResultItem key={dnsServer.ip} dnsServer={dnsServer} testResults={testResults}>
-                  {loading ? (
-                    <div className="duration-[2000ms] animate-spin">
-                      <LoaderIcon />
-                    </div>
-                  ) : result && result.value !== '' ? (
-                    <div className="flex flex-col items-end">
-                      <span className="font-mono tabular-nums tracking-tight text-green-500">{result.value}</span>
-                      <span className="text-xs text-gray-400">{result.time}ms</span>
-                    </div>
-                  ) : url.length > 0 ? (
-                    <span className="text-red-500">Not found</span>
-                  ) : (
-                    <></>
+                <React.Fragment key={dnsServer.id}>
+                  <ResultItem dnsServer={dnsServer} testResults={testResults}>
+                    {loading ? (
+                      <div className="duration-[2000ms] animate-spin">
+                        <LoaderIcon />
+                      </div>
+                    ) : result && result.value !== '' ? (
+                      <div className="flex flex-col items-end">
+                        <span className="font-mono tabular-nums tracking-tight text-green-500">{result.value}</span>
+                        <span className="text-xs text-gray-400">{result.time}ms</span>
+                      </div>
+                    ) : url.length > 0 ? (
+                      <span className="text-red-500">Not found</span>
+                    ) : (
+                      <></>
+                    )}
+                  </ResultItem>
+                  {isLastCustomDNS && (
+                    <>
+                      <Button
+                        type="button"
+                        variant="secondary"
+                        size="lg"
+                        className="w-full"
+                        onClick={() => setShowAddEditDnsModal(true)}
+                      >
+                        <PlusCircleIcon className="mr-2" size={16} />
+                        Add custom DNS server
+                      </Button>
+                      <hr className="!my-6 block border-gray-200" />
+                    </>
                   )}
-                </ResultItem>
+                </React.Fragment>
               );
             })}
+            {lastCustomDNSIndex === -1 && (
+              <Button
+                type="button"
+                variant="secondary"
+                size="lg"
+                className="w-full"
+                onClick={() => setShowAddEditDnsModal(true)}
+              >
+                <PlusCircleIcon className="mr-2" size={16} />
+                Add custom DNS server
+              </Button>
+            )}
           </div>
         </div>
       </div>