feat: Add proper search form & filtering out expired certs

app/api/search/route.ts

@@ -1,22 +1,35 @@
-import lookupCerts from "@/lib/postgres/cert";
+import { lookupCerts, lookupCertsWithoutExpired } from "@/lib/postgres/cert";
 import { getCache } from "@/lib/redis/redis";
 import { NextResponse } from "next/server";
 
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url);
   const domain = searchParams.get('domain');
+  const excludeExpired = searchParams.get('excludeExpired');
   const cache = await getCache();
 
   if (domain) {
-    const cached = await cache.get(domain);
+    if (excludeExpired) {
+      const cached = await cache.get(`non-expired-${domain}`);
+
+      if (cached) {
+        console.log('Cache hit for', domain);
+        return NextResponse.json(JSON.parse(cached));
+      } else {
+        const response = await lookupCertsWithoutExpired(domain, false);
+        return NextResponse.json(response);
+      }
 
-    if (cached) {
-      console.log('Cache hit for', domain);
-      console.log(cached)
-      return NextResponse.json(JSON.parse(cached));
     } else {
-      const response = await lookupCerts(domain);
-      return NextResponse.json(response);
+      const cached = await cache.get(`all-${domain}`);
+
+      if (cached) {
+        console.log('Cache hit for', domain);
+        return NextResponse.json(JSON.parse(cached));
+      } else {
+        const response = await lookupCerts(domain, false);
+        return NextResponse.json(response);
+      }
     }
   } else {
     return NextResponse.json({ error: 'No domain provided' });

app/page.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
+import { SearchForm } from "@/components/search-form";
+import { Separator } from "@/components/ui/separator"
 
 export default function IndexPage() {
   return (
-    <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
+    <div className="container grid gap-6 pb-8 pt-6 md:py-10">
       <div className="flex max-w-[980px] flex-col items-start gap-2">
         <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
           crt.sh, but make it <span className="text-primary">✨ actually work ✨</span>
@@ -14,15 +14,10 @@ export default function IndexPage() {
           Compiling data from crt.sh into a nicer, easier to use app.
         </p>
       </div>
-      <div className="flex max-w-lg gap-4">
-        <Input type="text" id="search" placeholder="Enter a full, or part of a, domain" />
-        <Button
-          type="submit"
-          onClick={() => {
-            window.location.href = `/search?domain=${(document.getElementById("search") as HTMLInputElement).value}`
-          }}
-        >Search</Button>
+      <Separator className="my-4" />
+      <div className="max-w-xl">
+        <SearchForm />
       </div>
-    </section>
+    </div>
   )
 }

app/search/page.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
 import { Certs } from "@/components/certs";
 import { Suspense } from "react";
+import { SearchForm } from "@/components/search-form";
 
 export default async function SearchPage() {
 
@@ -18,17 +17,9 @@ export default async function SearchPage() {
             Compiling data from crt.sh into a nicer, easier to use app.
           </p>
         </div>
-        <Suspense>
-          <div className="flex max-w-lg gap-4">
-            <Input type="text" id="search" placeholder="Enter a full, or part of a, domain" />
-            <Button
-              type="submit"
-              onClick={() => {
-                window.location.href = `/search?domain=${(document.getElementById("search") as HTMLInputElement).value}`
-              }}
-            >Search</Button>
-          </div>
-        </Suspense>
+        <div className="max-w-xl">
+          <SearchForm />
+        </div>
       </section>
       <Suspense fallback={<div>Loading...</div>}>
         <Certs />

components/certs.tsx

@@ -8,10 +8,12 @@ import { useSearchParams } from "next/navigation";
 export function Certs() {
   const params = useSearchParams();
 
-  const window = params.get("domain") ?? "";
+  const domain = params.get("domain") ?? "";
+  const excludeExpired = params.get("excludeExpired") ?? "false";
+  const includeSql = params.get("includeSql") ?? "false";
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { data } = useSWR(`/api/search?domain=${window}`, (apiUrl: string) => fetch(apiUrl).then(res => res.json()));
+  const { data } = useSWR(`/api/search?domain=${domain}&excludeExpired=${excludeExpired}&includeSql=${includeSql}`, (apiUrl: string) => fetch(apiUrl).then(res => res.json()));
   if (!data) return null;
 
   return (

components/search-form.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod"
+import * as z from "zod";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
+import { Input } from "./ui/input";
+import { Switch } from "./ui/switch";
+import { Button } from "./ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
+import { useState } from "react";
+import { ChevronsUpDown } from "lucide-react";
+
+const searchSchema = z.object({
+  query: z.string().min(2, {
+    message: "Search query must be at least 2 characters long",
+  }),
+  excludeExpired: z.boolean().optional().default(false),
+  includeSql: z.boolean().optional().default(false),
+})
+
+type searchSchemaValues = z.infer<typeof searchSchema>;
+
+export function SearchForm() {
+  const form = useForm<searchSchemaValues>({
+    resolver: zodResolver(searchSchema),
+    mode: "onChange",
+  });
+
+  function onSubmit(data: searchSchemaValues) {
+    return window.location.href = `/search?domain=${(data.query as string).toLowerCase()}&excludeExpired=${data.excludeExpired}&includeSql=${data.includeSql}`
+  }
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="query"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Search Query</FormLabel>
+              <FormControl>
+                <Input placeholder="google.com" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is the domain you wish to view ceritifcate issuance history for.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div>
+          <Collapsible
+            open={isOpen}
+            onOpenChange={setIsOpen}
+            className="space-y-4"
+          >
+            <div className="flex items-center justify-between space-x-4 px-4">
+            <h3 className="mb-4 text-lg font-medium">Search Options</h3>
+              <CollapsibleTrigger asChild>
+                <Button variant="ghost" size="sm" className="w-9 p-0">
+                  <ChevronsUpDown className="h-4 w-4" />
+                  <span className="sr-only">Toggle</span>
+                </Button>
+              </CollapsibleTrigger>
+            </div>
+            <CollapsibleContent className="space-y-4 px-4">
+              <FormField
+                control={form.control}
+                name="excludeExpired"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">
+                        Exclude expired certificates
+                      </FormLabel>
+                      <FormDescription>
+                        Exclude expired certificates from search results.
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="includeSql"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">
+                        Output SQL
+                      </FormLabel>
+                      <FormDescription>
+                        Output the SQL query used to generate the results.
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Switch
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
+        <Button type="submit">Search</Button>
+      </form>
+    </Form>
+  )
+}

components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }