Paul Bailey
87f91ecbe0
- Add database indexes for frequently queried fields (listId, completed, priority, dueDate, createdAt) - Add compound indexes for common query patterns (listId+completed, listId+priority) - Implement pagination support in getItemsByFilter with configurable page size (default 50) - Optimize components with React.memo (ItemCard, ListCard, FilterPanel, SearchBar, SearchResults, EmptyState) - Configure Next.js for better bundle optimization: - Enable optimizePackageImports for lucide-react - Enable SWC minification - Remove console logs in production (except errors/warnings) - Optimize images with AVIF/WebP formats - Enable compression - Disable production source maps for smaller bundles - Loading states already implemented to prevent layout shift Task 18 complete - all performance optimizations implemented
99 lines
3.3 KiB
TypeScript
99 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { memo, useState } from 'react'
|
|
import Link from 'next/link'
|
|
import { Edit2 } from 'lucide-react'
|
|
import Modal from './Modal'
|
|
import ListForm from './ListForm'
|
|
import DeleteListButton from './DeleteListButton'
|
|
|
|
interface List {
|
|
id: string
|
|
title: string
|
|
color: string
|
|
items: Array<{
|
|
id: string
|
|
completed: boolean
|
|
}>
|
|
}
|
|
|
|
function ListCard({ list }: { list: List }) {
|
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false)
|
|
const completedCount = list.items.filter(item => item.completed).length
|
|
const totalCount = list.items.length
|
|
const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
|
|
|
|
const handleEditClick = (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
setIsEditModalOpen(true)
|
|
}
|
|
|
|
const handleDeleteClick = (e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Link href={`/list/${list.id}`}>
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-6 hover:shadow-md active:shadow-lg transition-all cursor-pointer group min-h-[140px] sm:min-h-[160px]">
|
|
<div className="flex items-start justify-between mb-4 gap-2">
|
|
<div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
|
|
<div
|
|
className="w-3 h-3 sm:w-4 sm:h-4 rounded-full flex-shrink-0"
|
|
style={{ backgroundColor: list.color }}
|
|
/>
|
|
<h3 className="font-semibold text-gray-900 truncate text-base sm:text-lg">{list.title}</h3>
|
|
</div>
|
|
<div className="flex items-center gap-0.5 sm:gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity flex-shrink-0" onClick={handleDeleteClick}>
|
|
<button
|
|
onClick={handleEditClick}
|
|
className="text-gray-600 hover:text-gray-900 active:text-black transition-colors tap-target-sm hover:bg-gray-100 active:bg-gray-200 rounded-lg"
|
|
aria-label="Edit list"
|
|
>
|
|
<Edit2 size={18} />
|
|
</button>
|
|
<DeleteListButton
|
|
listId={list.id}
|
|
listTitle={list.title}
|
|
itemCount={totalCount}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2.5 sm:space-y-3">
|
|
<div className="flex items-center justify-between text-xs sm:text-sm text-gray-600">
|
|
<span>{completedCount} of {totalCount} completed</span>
|
|
<span className="font-medium">{Math.round(progress)}%</span>
|
|
</div>
|
|
|
|
<div className="w-full bg-gray-200 rounded-full h-2 sm:h-2.5">
|
|
<div
|
|
className="h-2 sm:h-2.5 rounded-full transition-all duration-300"
|
|
style={{
|
|
width: `${progress}%`,
|
|
backgroundColor: list.color
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
|
|
<Modal
|
|
isOpen={isEditModalOpen}
|
|
onClose={() => setIsEditModalOpen(false)}
|
|
title="Edit List"
|
|
>
|
|
<ListForm
|
|
list={list}
|
|
onCancel={() => setIsEditModalOpen(false)}
|
|
onSuccess={() => setIsEditModalOpen(false)}
|
|
/>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default memo(ListCard) |