Skip to content

Refactor: Split handleDragEnd into column/card sub-handlers #145

@ryota-murakami

Description

@ryota-murakami

Background

Code quality analysis (2026-02-20) identified handleDragEnd in KanbanBoard as an 80+ line function with deeply nested conditionals that harms readability.

Current State

handleDragEnd in src/components/Board/KanbanBoard.tsx handles both column and card drag operations in a single function:

const handleDragEnd = async (event: DragEndEvent) => {
  // Reset state
  if (!over) return

  // Column drag operations (~30 lines)
  if (active.data.current?.type === COLUMN_DRAG_TYPE) {
    if (new row)  handleNewRowDrop
    if (insert zone)  handleColumnInsertDrop  
    if (column swap)  handleColumnSwap
    return
  }

  // Card drag operations (~50 lines, inline logic)
  // - Resolve target column
  // - Save history
  // - Same-column reorder vs cross-column move
  // - DB sync with error handling
}

The column branch already delegates to sub-handlers. The card branch has ~50 lines of inline logic.

Proposed Change

Extract handleCardDragEnd as a separate useCallback:

const handleCardDragEnd = useCallback(async (active, over) => {
  // Card-specific logic here
}, [cards, cardsByStatus, dispatch, EMPTY_CARDS])

const handleDragEnd = async (event: DragEndEvent) => {
  setActiveId(null)
  setActiveDragType(null)
  if (!over) return

  if (active.data.current?.type === COLUMN_DRAG_TYPE) {
    // Column logic (already delegated)
    return
  }
  
  await handleCardDragEnd(active, over)
}

Acceptance Criteria

  • handleCardDragEnd extracted as a separate useCallback
  • handleDragEnd reduced to ~20 lines (dispatch + delegation)
  • No behavior changes — pure readability improvement
  • All existing tests pass

Notes

Metadata

Metadata

Assignees

No one assigned

    Labels

    refactoringCode quality and structural improvements

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions