+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 | 1x +1x +1x +1x +1x + +1x +1x +1x + + + + + + +1x +5x +5x + +5x + + + +5x +2x +1x +1x +1x +1x +2x + +5x +5x +5x + + +5x + +5x + +5x + +5x +5x +5x +5x +5x +4x +8x +8x +8x +8x +8x +8x +8x +8x +4x + +1x + +5x +5x + +5x + | import React, { useRef } from 'react';
+import { useToDoStore, Task } from '../../store/todoStore';
+import { DraggableTask } from '../DraggableTask';
+import { useDrop } from 'react-dnd';
+import { Checkbox } from '../ui/Checkbox';
+
+const ItemType = {
+ TASK: 'task',
+};
+
+interface CompletedTasksProps {
+ onDrop: (item: { id: number; completed: boolean }) => void;
+ onTaskToggle?: (taskId: number) => void;
+}
+
+export const CompletedTasks: React.FC<CompletedTasksProps> = ({ onDrop, onTaskToggle }) => {
+ const { tasks, markTaskIncomplete } = useToDoStore();
+ const ref = useRef<HTMLDivElement>(null);
+
+ const handleDrop = (item: { id: number; completed: boolean }) => {
+ onDrop(item);
+ };
+
+ const handleToggle = (taskId: number) => {
+ if (onTaskToggle) {
+ onTaskToggle(taskId);
+ } else {
+ markTaskIncomplete(taskId);
+ }
+ };
+
+ const [, drop] = useDrop({
+ accept: ItemType.TASK,
+ drop: (item: { id: number; completed: boolean }) => {
+ handleDrop(item);
+ },
+ });
+
+ drop(ref);
+
+ const completedTasks = tasks.filter((task) => task.completed);
+
+ return (
+ <div ref={ref} className="rounded-lg" data-testid="completed-tasks-container">
+ <h2 className="text-xs font-bold mb-3.75 text-stoneGray-700">Concluído</h2>
+ <ul className="space-y-2" data-testid="completed-tasks-list">
+ {completedTasks.length > 0 ? (
+ completedTasks.map((task: Task) => (
+ <DraggableTask key={task.id} task={task} onDrop={handleDrop}>
+ <Checkbox
+ checked={task.completed}
+ onChange={() => handleToggle(task.id)}
+ label={task.title}
+ data-testid={`task-checkbox-${task.id}`}
+ />
+ </DraggableTask>
+ ))
+ ) : (
+ <li className="text-sm text-stoneGray-700">Nenhuma tarefa concluída.</li>
+ )}
+ </ul>
+ </div>
+ );
+};
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| CompletedTasks.tsx | +
+
+ |
+ 91.66% | +44/48 | +100% | +8/8 | +60% | +3/5 | +91.66% | +44/48 | +