From 14760b3b43971ef49013355fea9f3adb3f426cc0 Mon Sep 17 00:00:00 2001
From: Felix Wotschofsky <felix@wotschofsky.com>
Date: Sun, 5 Nov 2023 16:46:13 +0100
Subject: [PATCH] =?UTF-8?q?Add=20Whois=20quick=20info=20=F0=9F=91=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/error.tsx                      | 25 ++++++++++++++
 app/lookup/[domain]/certs/page.tsx |  4 ---
 app/lookup/[domain]/layout.tsx     |  9 ++++-
 components/WhoisQuickInfo.tsx      | 55 ++++++++++++++++++++++++++++++
 4 files changed, 88 insertions(+), 5 deletions(-)
 create mode 100644 app/error.tsx
 create mode 100644 components/WhoisQuickInfo.tsx

diff --git a/app/error.tsx b/app/error.tsx
new file mode 100644
index 0000000..f9fd18b
--- /dev/null
+++ b/app/error.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { type FC, useEffect } from 'react';
+
+type GlobalErrorProps = {
+  error: Error & { digest?: string };
+  reset: () => void;
+};
+
+const GlobalError: FC<GlobalErrorProps> = ({ error }) => {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="mt-12 flex flex-col items-center gap-2">
+      <h2>Something went VERY wrong!</h2>
+      <p className="mt-2 text-center text-sm text-muted-foreground">
+        Digest: {error.digest}
+      </p>
+    </div>
+  );
+};
+
+export default GlobalError;
diff --git a/app/lookup/[domain]/certs/page.tsx b/app/lookup/[domain]/certs/page.tsx
index 10d2421..7082f8c 100644
--- a/app/lookup/[domain]/certs/page.tsx
+++ b/app/lookup/[domain]/certs/page.tsx
@@ -45,10 +45,6 @@ type CertsResultsPageProps = {
   };
 };
 
-export const runtime = 'edge';
-// crt.sh located in GB, always use LHR1 for lowest latency
-export const preferredRegion = 'lhr1';
-
 const CertsResultsPage: FC<CertsResultsPageProps> = async ({
   params: { domain },
 }) => {
diff --git a/app/lookup/[domain]/layout.tsx b/app/lookup/[domain]/layout.tsx
index 3541790..41f344f 100644
--- a/app/lookup/[domain]/layout.tsx
+++ b/app/lookup/[domain]/layout.tsx
@@ -1,10 +1,13 @@
 import { ExternalLinkIcon } from 'lucide-react';
 import type { Metadata } from 'next';
-import type { FC, ReactNode } from 'react';
+import { type FC, type ReactNode, Suspense } from 'react';
 
 import RelatedDomains from '@/components/RelatedDomains';
 import ResultsTabs from '@/components/ResultsTabs';
 import SearchForm from '@/components/SearchForm';
+import WhoisQuickInfo, {
+  WhoisQuickInfoPlaceholder,
+} from '@/components/WhoisQuickInfo';
 
 type LookupLayoutProps = {
   children: ReactNode;
@@ -54,6 +57,10 @@ const LookupLayout: FC<LookupLayoutProps> = ({
         </h1>
 
         <RelatedDomains domain={domain} />
+        <Suspense fallback={<WhoisQuickInfoPlaceholder />}>
+          {/* TODO Add error boundary */}
+          <WhoisQuickInfo domain={domain} />
+        </Suspense>
         <ResultsTabs domain={domain} />
 
         {children}
diff --git a/components/WhoisQuickInfo.tsx b/components/WhoisQuickInfo.tsx
new file mode 100644
index 0000000..6bd5fd5
--- /dev/null
+++ b/components/WhoisQuickInfo.tsx
@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import whoiser, { type WhoisSearchResult } from 'whoiser';
+
+import { Skeleton } from './ui/skeleton';
+
+type WhoisQuickInfoProps = {
+  domain: string;
+};
+
+const WhoisQuickInfo: FC<WhoisQuickInfoProps> = async ({ domain }) => {
+  const results = await whoiser(domain, {
+    timeout: 3000,
+  });
+  const firstResult = results[Object.keys(results)[0]] as WhoisSearchResult;
+
+  return (
+    <div className="my-8 flex gap-8">
+      <div>
+        <h3 className="text-xs text-muted-foreground">Registrar</h3>
+        <p className="text-sm">{firstResult['Registrar'].toString()}</p>
+      </div>
+      <div>
+        <h3 className="text-xs text-muted-foreground">Creation Date</h3>
+        <p className="text-sm">
+          {new Date(firstResult['Created Date'].toString()).toLocaleDateString(
+            'en-US'
+          )}
+        </p>
+      </div>
+      <div>
+        <h3 className="text-xs text-muted-foreground">DNSSEC</h3>
+        <p className="text-sm">{firstResult['DNSSEC'].toString()}</p>
+      </div>
+    </div>
+  );
+};
+
+export default WhoisQuickInfo;
+
+export const WhoisQuickInfoPlaceholder: FC = () => (
+  <div className="my-8 flex gap-8">
+    <div>
+      <h3 className="text-xs text-muted-foreground">Registrar</h3>
+      <Skeleton className="mt-1 h-4 w-24 rounded-sm" />
+    </div>
+    <div>
+      <h3 className="text-xs text-muted-foreground">Creation Date</h3>
+      <Skeleton className="w-18 mt-1 h-4 rounded-sm" />
+    </div>
+    <div>
+      <h3 className="text-xs text-muted-foreground">DNSSEC</h3>
+      <Skeleton className="mt-1 h-4 w-16 rounded-sm" />
+    </div>
+  </div>
+);