fix: address code review feedback - add explicit TypeScript return types
- Add explicit JSX.Element return types to all Kanban components - Add explicit void return type to handleDragStart - Add explicit Promise<void> return type to handleDragEnd (async) - Import React for JSX namespace access - Complies with typescript.md: explicit return types REQUIRED Components updated: - KanbanBoard.tsx - KanbanColumn.tsx - TaskCard.tsx Per code review checklist (code-review.md section 4a): ✓ NO any types ✓ Explicit return types on all exported functions ✓ Explicit parameter types ✓ Interfaces for props ✓ Proper event handler types
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState, useMemo } from "react";
|
import React, { useState, useMemo } from "react";
|
||||||
import type { Task } from "@mosaic/shared";
|
import type { Task } from "@mosaic/shared";
|
||||||
import { TaskStatus } from "@mosaic/shared";
|
import { TaskStatus } from "@mosaic/shared";
|
||||||
import {
|
import {
|
||||||
@@ -40,7 +40,7 @@ const columns = [
|
|||||||
* - Task cards with title, priority badge, assignee avatar
|
* - Task cards with title, priority badge, assignee avatar
|
||||||
* - PATCH /api/tasks/:id on status change
|
* - PATCH /api/tasks/:id on status change
|
||||||
*/
|
*/
|
||||||
export function KanbanBoard({ tasks = [], onStatusChange }: KanbanBoardProps) {
|
export function KanbanBoard({ tasks = [], onStatusChange }: KanbanBoardProps): JSX.Element {
|
||||||
const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
|
const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
|
||||||
|
|
||||||
const sensors = useSensors(
|
const sensors = useSensors(
|
||||||
@@ -80,11 +80,11 @@ export function KanbanBoard({ tasks = [], onStatusChange }: KanbanBoardProps) {
|
|||||||
[tasks, activeTaskId]
|
[tasks, activeTaskId]
|
||||||
);
|
);
|
||||||
|
|
||||||
function handleDragStart(event: DragStartEvent) {
|
function handleDragStart(event: DragStartEvent): void {
|
||||||
setActiveTaskId(event.active.id as string);
|
setActiveTaskId(event.active.id as string);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleDragEnd(event: DragEndEvent) {
|
async function handleDragEnd(event: DragEndEvent): Promise<void> {
|
||||||
const { active, over } = event;
|
const { active, over } = event;
|
||||||
|
|
||||||
if (!over) {
|
if (!over) {
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
import type { Task } from "@mosaic/shared";
|
import type { Task } from "@mosaic/shared";
|
||||||
import { TaskStatus } from "@mosaic/shared";
|
import { TaskStatus } from "@mosaic/shared";
|
||||||
import { useDroppable } from "@dnd-kit/core";
|
import { useDroppable } from "@dnd-kit/core";
|
||||||
@@ -34,7 +35,7 @@ const statusBadgeColors = {
|
|||||||
* A droppable column for tasks of a specific status.
|
* A droppable column for tasks of a specific status.
|
||||||
* Uses @dnd-kit/core for drag-and-drop functionality.
|
* Uses @dnd-kit/core for drag-and-drop functionality.
|
||||||
*/
|
*/
|
||||||
export function KanbanColumn({ status, title, tasks }: KanbanColumnProps) {
|
export function KanbanColumn({ status, title, tasks }: KanbanColumnProps): JSX.Element {
|
||||||
const { setNodeRef, isOver } = useDroppable({
|
const { setNodeRef, isOver } = useDroppable({
|
||||||
id: status,
|
id: status,
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
import type { Task } from "@mosaic/shared";
|
import type { Task } from "@mosaic/shared";
|
||||||
import { TaskPriority } from "@mosaic/shared";
|
import { TaskPriority } from "@mosaic/shared";
|
||||||
import { useSortable } from "@dnd-kit/sortable";
|
import { useSortable } from "@dnd-kit/sortable";
|
||||||
@@ -47,7 +48,7 @@ function getInitials(name: string): string {
|
|||||||
* - Assignee avatar (if assigned)
|
* - Assignee avatar (if assigned)
|
||||||
* - Due date (if set)
|
* - Due date (if set)
|
||||||
*/
|
*/
|
||||||
export function TaskCard({ task }: TaskCardProps) {
|
export function TaskCard({ task }: TaskCardProps): JSX.Element {
|
||||||
const {
|
const {
|
||||||
attributes,
|
attributes,
|
||||||
listeners,
|
listeners,
|
||||||
|
|||||||
Reference in New Issue
Block a user