Paul Bailey
e51e88fddd
- Implement toast notification system for success/error messages - Add loading states with skeleton loaders for async operations - Create smooth CSS transitions and animations - Enhance empty states with EmptyState component - Add loading.tsx files for Next.js loading states - Integrate toast notifications across all CRUD operations - Add fade-in and scale-in animations for better UX - Improve visual feedback for user actions
96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { createItem } from '@/lib/actions'
|
|
import { Plus } from 'lucide-react'
|
|
import { useToast } from './ToastContainer'
|
|
|
|
interface InlineItemCreateProps {
|
|
listId: string
|
|
}
|
|
|
|
export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
|
|
const router = useRouter()
|
|
const { showToast } = useToast()
|
|
const [isCreating, setIsCreating] = useState(false)
|
|
const [title, setTitle] = useState('')
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!title.trim() || isSubmitting) {
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
|
|
try {
|
|
await createItem(listId, title.trim())
|
|
showToast('Task added successfully', 'success')
|
|
setTitle('')
|
|
setIsCreating(false)
|
|
router.refresh()
|
|
} catch (error) {
|
|
console.error('Error creating item:', error)
|
|
showToast('Failed to add task', 'error')
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
setTitle('')
|
|
setIsCreating(false)
|
|
}
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
handleCancel()
|
|
}
|
|
}
|
|
|
|
if (!isCreating) {
|
|
return (
|
|
<button
|
|
onClick={() => setIsCreating(true)}
|
|
className="w-full flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-3 sm:py-4 bg-white border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-blue-400 hover:text-blue-600 active:border-blue-500 active:text-blue-700 transition-colors tap-target text-sm sm:text-base font-medium"
|
|
>
|
|
<Plus size={20} className="flex-shrink-0" />
|
|
<span>Add a task</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4 sm:p-5 shadow-sm">
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Enter task title..."
|
|
autoFocus
|
|
className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3 sm:mb-4 text-sm sm:text-base"
|
|
/>
|
|
<div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={handleCancel}
|
|
className="w-full sm:w-auto px-4 sm:px-5 py-2.5 sm:py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={!title.trim() || isSubmitting}
|
|
className="w-full sm:w-auto px-4 sm:px-5 py-2.5 sm:py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-blue-300 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
|
|
>
|
|
{isSubmitting ? 'Adding...' : 'Add Task'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|