feat: identify spam submissions

apps/web/src/app/(main)/form/[id]/page.tsx

@@ -48,7 +48,12 @@ export default async function FormPage({ params }: { params: { id: string } }) {
             <>
               <div className="flex w-full items-center justify-between">
                 <span className="text-muted-foreground">
-                  Total Submissions: {formSubmissions.length}
+                  {formSubmissions.length} Submissions with{' '}
+                  {
+                    formSubmissions.filter((submission) => submission.isSpam)
+                      .length
+                  }{' '}
+                  Spam
                 </span>
                 <ExportSubmissionsDropDownButton
                   submissions={formSubmissions as FormData[]}

apps/web/src/app/(main)/form/[id]/submissions-table.tsx

@@ -40,6 +40,7 @@ import {
   TableHeader,
   TableRow,
 } from '@formbase/ui/primitives/table';
+import { cn } from '@formbase/ui/utils/cn';
 import { formatFileName } from '@formbase/utils';
 
 import { api } from '~/lib/trpc/react';
@@ -314,6 +315,10 @@ export function SubmissionsTable({
                 <TableRow
                   key={row.id}
                   data-state={row.getIsSelected() && 'selected'}
+                  className={cn({
+                    'bg-red-100 hover:bg-red-200 dark:bg-red-800 dark:hover:bg-red-700':
+                      row.original.isSpam,
+                  })}
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>

apps/web/src/app/api/s/[id]/route.ts

@@ -10,7 +10,7 @@ import { assignFileOrImage, uploadFileFromBlob } from '~/lib/upload-file';
 type Json = string | number | boolean | null | { [key: string]: Json } | Json[];
 
 async function getFormData(request: Request): Promise<{
-  data: Record<string, Blob | string | undefined>;
+  data: Record<string, Blob | string | undefined> & { _gotcha?: string };
   source: 'formData' | 'json';
 }> {
   try {
@@ -88,14 +88,22 @@ export async function POST(
     if (source === 'formData')
       await processFileUploads(formData, formData as unknown as FormData);
 
-    const formDataKeys = Object.keys(formData);
+    const formDataKeys = Object.keys(formData).filter(
+      (key) => key !== '_gotcha',
+    );
     const formKeys = form.keys;
     const updatedKeys = [...new Set([...formKeys, ...formDataKeys])];
 
+    const submissionIsSpam = !!formData._gotcha;
+    if (submissionIsSpam) delete formData._gotcha;
+
+    console.log('Submission is spam: ', submissionIsSpam);
+
     await api.formData.setFormData({
       data: formData as Json,
       formId,
       keys: updatedKeys,
+      isSpam: submissionIsSpam,
     });
 
     void handleEmailNotifications(form, formId);

packages/api/routers/formData.ts

@@ -104,6 +104,7 @@ export const formDataRouter = createTRPCRouter({
           data: input.data,
           formId: input.formId,
           id: generateId(15),
+          isSpam: input.isSpam ?? false,
           createdAt: new Date(),
         });
 

packages/db/drizzle/0001_blushing_dust.sql

@@ -0,0 +1 @@
+ALTER TABLE "form_datas" ADD COLUMN "is_spam" boolean DEFAULT false NOT NULL;