diff --git a/apps/web/components/tasks/tasks-list-view.tsx b/apps/web/components/tasks/tasks-list-view.tsx index 1df4f1f..2e7909a 100644 --- a/apps/web/components/tasks/tasks-list-view.tsx +++ b/apps/web/components/tasks/tasks-list-view.tsx @@ -62,25 +62,39 @@ export function TasksListView({ onRefresh?: () => void; }) { const [tasks, setTasks] = useState([]); + const [totalCount, setTotalCount] = useState(0); + const [offset, setOffset] = useState(0); const [loading, setLoading] = useState(true); + const [loadingMore, setLoadingMore] = useState(false); const [selectedTask, setSelectedTask] = useState(null); const [deleteId, setDeleteId] = useState(null); const [deleting, setDeleting] = useState(false); const [domainMap, setDomainMap] = useState>(new Map()); + const LIMIT = 50; const { subscribe } = useRealtimeContext(); - const fetchTasks = useCallback(async () => { + const fetchTasks = useCallback(async (appendOffset) => { if (!domainId) return; + if (appendOffset === undefined) setLoading(true); + else setLoadingMore(true); try { - const response = await fetch(`/api/domains/${domainId}/tasks?sort=order&limit=200`); + const currentOffset = appendOffset ?? 0; + const response = await fetch(`/api/domains/${domainId}/tasks?sort=order&limit=${LIMIT}&offset=${currentOffset}`); if (!response.ok) throw new Error('Unable to load tasks'); const data = await response.json(); - setTasks(data.items || []); + if (appendOffset !== undefined) { + setTasks(prev => [...prev, ...(data.items || [])]); + } else { + setTasks(data.items || []); + setOffset(0); + } + setTotalCount(data.totalItems || 0); } catch (error) { console.error('Failed to fetch tasks:', error); toast.error('Unable to load tasks'); } finally { setLoading(false); + setLoadingMore(false); } }, [domainId]); @@ -115,6 +129,12 @@ export function TasksListView({ return unsubscribe; }, [domainId, subscribe, fetchTasks, onRefresh]); + function loadMore() { + const newOffset = offset + LIMIT; + setOffset(newOffset); + fetchTasks(newOffset); + } + async function toggleTaskComplete(task: Task) { const newStatus = task.status === 'done' ? 'todo' : 'done'; try { @@ -138,7 +158,7 @@ export function TasksListView({ return

Loading tasks...

; } - if (tasks.length === 0) { + if (tasks.length === 0 && !loading) { return (

No tasks yet. Create your first task to get started!

@@ -235,6 +255,19 @@ export function TasksListView({ ))} +
+ Showing {tasks.length} of {totalCount} tasks + {tasks.length < totalCount && ( + + )} +