Paul Bailey
78bfcb7ac3
- ToggleItemButton now uses useOptimistic for instant toggle feedback - InlineItemCreate clears form immediately before server action - Both components call router.refresh() after mutations - UI updates appear instantly, no waiting for server response
83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useOptimistic } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { toggleItem } from '@/lib/actions'
|
|
import { CheckCircle2, Circle } from 'lucide-react'
|
|
import { useToast } from './ToastContainer'
|
|
|
|
interface ToggleItemButtonProps {
|
|
itemId: string
|
|
completed: boolean
|
|
variant?: 'full' | 'icon'
|
|
}
|
|
|
|
export default function ToggleItemButton({ itemId, completed, variant = 'full' }: ToggleItemButtonProps) {
|
|
const router = useRouter()
|
|
const { showToast } = useToast()
|
|
const [isToggling, setIsToggling] = useState(false)
|
|
const [optimisticCompleted, setOptimisticCompleted] = useOptimistic(completed)
|
|
|
|
const handleToggle = async (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
|
|
if (isToggling) return
|
|
|
|
setIsToggling(true)
|
|
|
|
// Optimistically update UI
|
|
setOptimisticCompleted(!completed)
|
|
|
|
try {
|
|
await toggleItem(itemId)
|
|
showToast(completed ? 'Task marked incomplete' : 'Task completed', 'success')
|
|
router.refresh()
|
|
} catch (error) {
|
|
console.error('Error toggling item:', error)
|
|
showToast('Failed to update task', 'error')
|
|
// Revert optimistic update on error
|
|
setOptimisticCompleted(completed)
|
|
} finally {
|
|
setIsToggling(false)
|
|
}
|
|
}
|
|
|
|
if (variant === 'icon') {
|
|
return (
|
|
<button
|
|
onClick={handleToggle}
|
|
disabled={isToggling}
|
|
className="hover:scale-110 active:scale-95 transition-transform disabled:opacity-50 tap-target-sm"
|
|
aria-label={optimisticCompleted ? 'Mark incomplete' : 'Mark complete'}
|
|
>
|
|
{optimisticCompleted ? (
|
|
<CheckCircle2 size={22} className="text-green-500" />
|
|
) : (
|
|
<Circle size={22} className="text-gray-400 hover:text-gray-600 active:text-gray-700" />
|
|
)}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={handleToggle}
|
|
disabled={isToggling}
|
|
className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 disabled:bg-gray-50 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
|
|
>
|
|
{optimisticCompleted ? (
|
|
<>
|
|
<CheckCircle2 size={18} className="text-green-500 flex-shrink-0" />
|
|
<span>Mark Incomplete</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Circle size={18} className="flex-shrink-0" />
|
|
<span>Mark Complete</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|