diff --git a/src/components/moving-motivators/MotivatorBoard.tsx b/src/components/moving-motivators/MotivatorBoard.tsx index 2d51fef..c196a0b 100644 --- a/src/components/moving-motivators/MotivatorBoard.tsx +++ b/src/components/moving-motivators/MotivatorBoard.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useTransition } from 'react'; +import { useState, useTransition, useEffect } from 'react'; import { DndContext, closestCenter, @@ -35,6 +35,11 @@ export function MotivatorBoard({ sessionId, cards: initialCards, canEdit }: Moti const [step, setStep] = useState('ranking'); const [isPending, startTransition] = useTransition(); + // Sync local state with props when they change (e.g., from SSE refresh) + useEffect(() => { + setCards(initialCards); + }, [initialCards]); + const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { diff --git a/src/components/swot/SwotQuadrant.tsx b/src/components/swot/SwotQuadrant.tsx index 3ad1bf1..7ea2f91 100644 --- a/src/components/swot/SwotQuadrant.tsx +++ b/src/components/swot/SwotQuadrant.tsx @@ -1,6 +1,6 @@ 'use client'; -import { forwardRef, useState, useTransition, ReactNode } from 'react'; +import { forwardRef, useState, useTransition, useRef, ReactNode } from 'react'; import type { SwotCategory } from '@prisma/client'; import { createSwotItem } from '@/actions/swot'; import { QuadrantHelpPanel } from './QuadrantHelp'; @@ -43,15 +43,17 @@ export const SwotQuadrant = forwardRef( const [newContent, setNewContent] = useState(''); const [isPending, startTransition] = useTransition(); const [showHelp, setShowHelp] = useState(false); + const isSubmittingRef = useRef(false); const styles = categoryStyles[category]; async function handleAdd() { - if (!newContent.trim()) { + if (isSubmittingRef.current || !newContent.trim()) { setIsAdding(false); return; } + isSubmittingRef.current = true; startTransition(async () => { await createSwotItem(sessionId, { content: newContent.trim(), @@ -59,6 +61,7 @@ export const SwotQuadrant = forwardRef( }); setNewContent(''); setIsAdding(false); + isSubmittingRef.current = false; }); } @@ -138,7 +141,12 @@ export const SwotQuadrant = forwardRef( value={newContent} onChange={(e) => setNewContent(e.target.value)} onKeyDown={handleKeyDown} - onBlur={handleAdd} + onBlur={(e) => { + // Don't trigger on blur if clicking on a button + if (!e.currentTarget.contains(e.relatedTarget as Node)) { + handleAdd(); + } + }} placeholder="Décrivez cet élément..." className="w-full resize-none rounded border-0 bg-transparent p-1 text-sm text-foreground placeholder:text-muted focus:outline-none focus:ring-0" rows={2} @@ -156,6 +164,9 @@ export const SwotQuadrant = forwardRef( Annuler