Function handleDragEnd

src/components/SortableList.tsx:31–51

(event: DragEndEvent)

  const [, startTransition] = useTransition()

  function handleDragEnd(event: DragEndEvent) {
    const { active, over } = event
    const activeId = active.id.toString()
    const overId = over?.id.toString()
    if (overId == null || activeId == null) return

    function getNewArray(array: T[], activeId: string, overId: string) {
      const oldIndex = array.findIndex(section => section.id === activeId)
      const newIndex = array.findIndex(section => section.id === overId)
      return arrayMove(array, oldIndex, newIndex)
    }

    startTransition(async () => {
      setOptimisticItems(items => getNewArray(items, activeId, overId))
      const actionData = await onOrderChange(
        getNewArray(optimisticItems, activeId, overId).map(s => s.id)
      )

      actionToast({ actionData })
    })
  }

  return (
    <DndContext id={dndContextId} onDragEnd={handleDragEnd}>