feat: add responses in realtime

carloscuatin · carloscuatin · commit 44b4d53be8fa · 2026-02-12T13:48:23.000-05:00
diff --git a/src/app/dashboard/[id]/page.tsx b/src/app/dashboard/[id]/page.tsx
@@ -1,16 +1,11 @@
 import { notFound } from 'next/navigation';
 import Link from 'next/link';
-import { ArrowLeft, Edit, BarChart3, Table } from 'lucide-react';
+import { ArrowLeft, Edit } from 'lucide-react';
 
 import { getForm, getResponses } from '@/app/actions/forms';
-import {
-  ResponseTable,
-  ResponseCharts,
-  CopyLinkButton,
-} from '@/components/dashboard';
+import { CopyLinkButton, ResponsesTabs } from '@/components/dashboard';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 interface ResponseDetailPageProps {
   params: Promise<{ id: string }>;
@@ -59,10 +54,6 @@ export default async function ResponseDetailPage({
                 {form.published ? 'Publicado' : 'Borrador'}
               </Badge>
             </div>
-            <p className="text-muted-foreground text-sm">
-              {responses.length}{' '}
-              {responses.length === 1 ? 'respuesta' : 'respuestas'} recibidas
-            </p>
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-2">
@@ -77,26 +68,11 @@ export default async function ResponseDetailPage({
       </div>
 
       {/* Content */}
-      <Tabs defaultValue="table" className="space-y-6">
-        <TabsList className="bg-muted">
-          <TabsTrigger value="table" className="text-sm">
-            <Table className="mr-1.5 h-4 w-4" />
-            Respuestas
-          </TabsTrigger>
-          <TabsTrigger value="charts" className="text-sm">
-            <BarChart3 className="mr-1.5 h-4 w-4" />
-            Gráficas
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="table">
-          <ResponseTable fields={form.fields} responses={responses} />
-        </TabsContent>
-
-        <TabsContent value="charts">
-          <ResponseCharts fields={form.fields} responses={responses} />
-        </TabsContent>
-      </Tabs>
+      <ResponsesTabs
+        formId={form.id}
+        fields={form.fields}
+        initialResponses={responses}
+      />
     </div>
   );
 }
diff --git a/src/components/builder/constants.ts b/src/components/builder/constants.ts
diff --git a/src/components/builder/fields/index.ts b/src/components/builder/fields/index.ts
@@ -5,3 +5,4 @@ export { FieldTypeDragOverlay } from './field-type-drag-overlay';
 export { FormBuilderDragOverlay } from './form-builder-drag-overlay';
 export { SortableFieldItem } from './sortable-field-item';
 export { FIELD_TYPE_ICON_MAP } from './field-type-icons';
+export { InsertionSpacer } from './insertion-spacer';
diff --git a/src/components/builder/fields/insertion-spacer.tsx b/src/components/builder/fields/insertion-spacer.tsx
@@ -2,7 +2,8 @@
 
 import { type FC } from 'react';
 
-import { FIELD_ROW_MIN_HEIGHT } from '../constants';
+/** Min height of a field row; used for insertion spacer during drag. */
+const FIELD_ROW_MIN_HEIGHT = 52;
 
 /** Invisible spacer shown during drag to shift the list and indicate insertion point. */
 export const InsertionSpacer: FC = () => (
diff --git a/src/components/builder/fields/sortable-field-item.tsx b/src/components/builder/fields/sortable-field-item.tsx
@@ -11,7 +11,6 @@ import { FormField } from '@/core/domain/entities/form';
 import { FIELD_TYPE_LABELS } from '@/core/domain/value-objects/field-types';
 import { cn } from '@/utils/cn';
 
-import { SORTABLE_TRANSITION } from '../constants';
 import { useFormBuilderContext } from '../form-builder-context';
 
 interface SortableFieldItemProps {
@@ -35,7 +34,10 @@ export const SortableFieldItem: FC<SortableFieldItemProps> = ({ field }) => {
     isDragging,
   } = useSortable({
     id: field.id,
-    transition: SORTABLE_TRANSITION,
+    transition: {
+      duration: 280,
+      easing: 'cubic-bezier(0.33, 1, 0.68, 1)',
+    },
   });
 
   const style = {
diff --git a/src/components/builder/form-builder.tsx b/src/components/builder/form-builder.tsx
@@ -13,9 +13,9 @@ import {
   FormBuilderSidebar,
   FormBuilderFieldsColumn,
   type FormBuilderTab,
+  FormPreview,
 } from './layout';
 import { FormBuilderDragOverlay } from './fields';
-import { FormPreview } from './preview';
 
 export interface FormBuilderProps {
   formId?: string;
diff --git a/src/components/builder/hooks/use-form-builder-dnd.ts b/src/components/builder/hooks/use-form-builder-dnd.ts
@@ -19,7 +19,6 @@ import {
   resolveNewItemInsertionIndex,
 } from '@/utils/dnd/insertion-index';
 
-import { DND_POINTER_ACTIVATION_DISTANCE } from '../constants';
 import { useFormBuilderContext } from '../form-builder-context';
 import { DROP_ZONE_ID } from '../fields';
 
@@ -38,9 +37,7 @@ export function useFormBuilderDnD() {
   const [dragWidth, setDragWidth] = useState<number | null>(null);
 
   const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: { distance: DND_POINTER_ACTIVATION_DISTANCE },
-    }),
+    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     }),
diff --git a/src/components/builder/hooks/use-form-builder.ts b/src/components/builder/hooks/use-form-builder.ts
@@ -38,9 +38,20 @@ export const useFormBuilder = (initialData?: FormBuilderData) => {
     name: 'fields',
   });
 
-  const fields = useWatch({ control: form.control, name: 'fields' });
+  const fields = useWatch({ control: form.control, name: 'fields' }) ?? [];
   const selectedField = fields.find((f) => f.id === selectedFieldId) ?? null;
 
+  const setFieldPathValue = (
+    index: number,
+    path: string,
+    value: unknown,
+  ): void => {
+    form.setValue(`fields.${index}.${path}` as never, value as never, {
+      shouldDirty: true,
+      shouldTouch: true,
+    });
+  };
+
   /** Create a default field of the given type */
   const createDefaultField = (type: FieldType): FormField => {
     const base: FormField = {
@@ -82,7 +93,10 @@ export const useFormBuilder = (initialData?: FormBuilderData) => {
   const updateField = (id: string, updates: Partial<FormField>) => {
     const index = fields.findIndex((f) => f.id === id);
     if (index === -1) return;
-    fieldArray.update(index, { ...fields[index], ...updates });
+
+    for (const [key, value] of Object.entries(updates)) {
+      setFieldPathValue(index, key, value);
+    }
   };
 
   /** Remove a field */
@@ -121,37 +135,34 @@ export const useFormBuilder = (initialData?: FormBuilderData) => {
     if (index === -1) return;
     const field = fields[index];
     const options = field.options ?? [];
-    fieldArray.update(index, {
-      ...field,
-      options: [
-        ...options,
-        { id: uuidv4(), label: `Opción ${options.length + 1}` },
-      ],
-    });
+    setFieldPathValue(index, 'options', [
+      ...options,
+      { id: uuidv4(), label: `Opción ${options.length + 1}` },
+    ]);
   };
 
   /** Update an option */
   const updateOption = (fieldId: string, optionId: string, label: string) => {
     const index = fields.findIndex((f) => f.id === fieldId);
     if (index === -1) return;
     const field = fields[index];
-    fieldArray.update(index, {
-      ...field,
-      options: field.options?.map((o) =>
-        o.id === optionId ? { ...o, label } : o,
-      ),
-    });
+    setFieldPathValue(
+      index,
+      'options',
+      field.options?.map((o) => (o.id === optionId ? { ...o, label } : o)),
+    );
   };
 
   /** Remove an option */
   const removeOption = (fieldId: string, optionId: string) => {
     const index = fields.findIndex((f) => f.id === fieldId);
     if (index === -1) return;
     const field = fields[index];
-    fieldArray.update(index, {
-      ...field,
-      options: field.options?.filter((o) => o.id !== optionId),
-    });
+    setFieldPathValue(
+      index,
+      'options',
+      field.options?.filter((o) => o.id !== optionId),
+    );
   };
 
   return {
diff --git a/src/components/builder/layout/form-builder-fields-column.tsx b/src/components/builder/layout/form-builder-fields-column.tsx
@@ -8,9 +8,8 @@ import {
 } from '@dnd-kit/sortable';
 
 import { useFormBuilderContext } from '../form-builder-context';
-import { FieldsDropZone, SortableFieldItem } from '../fields';
+import { FieldsDropZone, SortableFieldItem, InsertionSpacer } from '../fields';
 import type { FormBuilderTab } from './form-builder-tabs';
-import { InsertionSpacer } from './insertion-spacer';
 
 interface FormBuilderFieldsColumnProps {
   activeTab: FormBuilderTab;
diff --git a/src/components/builder/layout/form-preview.tsx b/src/components/builder/layout/form-preview.tsx
diff --git a/src/components/builder/layout/index.ts b/src/components/builder/layout/index.ts
@@ -3,3 +3,4 @@ export { FormBuilderHeader } from './form-builder-header';
 export { FormBuilderSidebar } from './form-builder-sidebar';
 export { FormBuilderTabs, type FormBuilderTab } from './form-builder-tabs';
 export { FormConfigCard } from './form-config-card';
+export { FormPreview } from './form-preview';
diff --git a/src/components/builder/preview/index.ts b/src/components/builder/preview/index.ts
diff --git a/src/components/dashboard/index.ts b/src/components/dashboard/index.ts
@@ -1,3 +1,3 @@
-export { CopyLinkButton, ResponseCharts, ResponseTable } from './responses';
+export { CopyLinkButton, ResponsesTabs } from './responses';
 export { EmptyState, FormCard } from './list';
 export { Navbar } from './layout';
diff --git a/src/components/dashboard/responses/index.ts b/src/components/dashboard/responses/index.ts
@@ -1,3 +1,4 @@
 export { CopyLinkButton } from './copy-link-button';
 export { ResponseCharts } from './response-charts';
 export { ResponseTable } from './response-table';
+export { ResponsesTabs } from './responses-tabs';
diff --git a/src/components/dashboard/responses/responses-tabs.tsx b/src/components/dashboard/responses/responses-tabs.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import { type FC, useEffect, useState } from 'react';
+import { BarChart3, Table } from 'lucide-react';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { type FormField } from '@/core/domain/entities/form';
+import { type FormResponse } from '@/core/domain/entities/response';
+
+import { ResponseCharts } from './response-charts';
+import { ResponseTable } from './response-table';
+import { useSubscribeToNewResponses } from './use-subscribe-to-new-responses';
+
+interface ResponsesTabsProps {
+  formId: string;
+  fields: FormField[];
+  initialResponses: FormResponse[];
+}
+
+export const ResponsesTabs: FC<ResponsesTabsProps> = ({
+  formId,
+  fields,
+  initialResponses,
+}) => {
+  const [responses, setResponses] = useState<FormResponse[]>(initialResponses);
+
+  useSubscribeToNewResponses(formId, (newResponse) => {
+    setResponses((prev) => {
+      if (prev.some((r) => r.id === newResponse.id)) return prev;
+      return [newResponse, ...prev];
+    });
+  });
+
+  useEffect(() => {
+    setResponses(initialResponses);
+  }, [initialResponses]);
+
+  return (
+    <div className="space-y-6">
+      <p className="text-muted-foreground text-sm">
+        {responses.length} {responses.length === 1 ? 'respuesta' : 'respuestas'}{' '}
+        recibidas
+      </p>
+
+      <Tabs defaultValue="table" className="space-y-6">
+        <TabsList className="bg-muted">
+          <TabsTrigger value="table" className="text-sm">
+            <Table className="mr-1.5 h-4 w-4" />
+            Respuestas
+          </TabsTrigger>
+          <TabsTrigger value="charts" className="text-sm">
+            <BarChart3 className="mr-1.5 h-4 w-4" />
+            Gráficas
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="table">
+          <ResponseTable fields={fields} responses={responses} />
+        </TabsContent>
+
+        <TabsContent value="charts">
+          <ResponseCharts fields={fields} responses={responses} />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
diff --git a/src/components/dashboard/responses/use-subscribe-to-new-responses.ts b/src/components/dashboard/responses/use-subscribe-to-new-responses.ts
@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useMemo, useRef } from 'react';
+
+import type { FormResponse } from '@/core/domain/entities/response';
+import { createSubscribeToNewResponsesUseCase } from '@/infrastructure/browser-container';
+
+/**
+ * Subscribes to new responses for a form via Realtime (clean architecture: use case + port).
+ * Calls onNewResponse when a new response is inserted; cleanup unsubscribes.
+ * You can pass the callback inline — the hook keeps the latest reference and does not re-subscribe on every render.
+ */
+export function useSubscribeToNewResponses(
+  formId: string,
+  onNewResponse: (response: FormResponse) => void,
+): void {
+  const onNewResponseRef = useRef(onNewResponse);
+
+  const subscribeToNewResponses = useMemo(
+    () => createSubscribeToNewResponsesUseCase(),
+    [],
+  );
+
+  useEffect(() => {
+    onNewResponseRef.current = onNewResponse;
+  }, [onNewResponse]);
+
+  useEffect(() => {
+    const unsubscribe = subscribeToNewResponses.execute(formId, (response) => {
+      onNewResponseRef.current(response);
+    });
+    return unsubscribe;
+  }, [formId, subscribeToNewResponses]);
+}
diff --git a/src/components/forms/renderer/field-renderer.tsx b/src/components/forms/renderer/field-renderer.tsx
@@ -99,7 +99,7 @@ export const FieldRenderer: FC<FieldRendererProps> = ({
             onValueChange={(v) => handleChange(v)}
             disabled={disabled}
           >
-            <SelectTrigger className="h-10">
+            <SelectTrigger className="h-10 w-full">
               <SelectValue
                 placeholder={field.placeholder || 'Selecciona una opción'}
               />
diff --git a/src/core/domain/ports/response-repository.ts b/src/core/domain/ports/response-repository.ts
@@ -21,4 +21,10 @@ export interface ResponseRepository {
 
   /** Count responses for a specific form */
   countByFormId(formId: string): Promise<number>;
+
+  /** Subscribe to new responses for a specific form */
+  subscribe(
+    formId: string,
+    onNewResponse: (response: FormResponse) => void,
+  ): () => void;
 }
diff --git a/src/core/use-cases/subscribe-to-new-responses.ts b/src/core/use-cases/subscribe-to-new-responses.ts
@@ -0,0 +1,18 @@
+/**
+ * Use Case - Subscribe to New Responses
+ * Subscribes to realtime inserts for a form's responses (browser).
+ */
+
+import { FormResponse } from '../domain/entities/response';
+import type { ResponseRepository } from '../domain/ports/response-repository';
+
+export class SubscribeToNewResponsesUseCase {
+  constructor(private readonly responseRepository: ResponseRepository) {}
+
+  execute(
+    formId: string,
+    onNewResponse: (response: FormResponse) => void,
+  ): () => void {
+    return this.responseRepository.subscribe(formId, onNewResponse);
+  }
+}
diff --git a/src/infrastructure/adapters/supabase/client.ts b/src/infrastructure/adapters/supabase/client.ts
diff --git a/src/infrastructure/adapters/supabase/supabase-response-repository.ts b/src/infrastructure/adapters/supabase/supabase-response-repository.ts
diff --git a/src/infrastructure/browser-container.ts b/src/infrastructure/browser-container.ts
