Drag and drop

adoniscontroller.ts

public async updateAll({ request }: HttpContextContract) {
  const {items} = request.all()

  return await Link.updateOrCreateMany(['title'], items)
}

dragandrop.tsx

import {
  DragDropContext,
  Droppable,
  Draggable,
  DropResult
} from 'react-beautiful-dnd'

function App() {
  const [links, setLinks] = useState<LinkProps[]>([])

  useEffect(() => {
    api.get('links').then((res) => {
      setLinks(res.data)
      setLinkLength(res.data.length)
    })
  }, [linkLength, linkUpdated])

  const handleOnDragEnd = (result: DropResult) => {
    if (!result.destination) return
    const items = Array.from(links)
    const [reorderedItem] = items.splice(result.source.index, 1)
    items.splice(result.destination.index, 0, reorderedItem)

    api.put('link', {
      items: items.map((item, index) => {
        return {
          title: item.title,
          order: index
        }
      })
    })

    setLinks(items)
  }

  return (
    <AnimatePresence>
      <Container>
        <DragDropContext onDragEnd={handleOnDragEnd}>
          <Droppable droppableId="links">
            {(provided) => {
              return (
                <div {...provided.droppableProps} ref={provided.innerRef}>
                  {links.map((link, index) => {
                    return (
                      <Draggable
                        key={link.id}
                        draggableId={String(link.id)}
                        index={index}
                      >
                        {(provided) => {
                          return (
                            <div
                              {...provided.draggableProps}
                              {...provided.dragHandleProps}
                              ref={provided.innerRef}
                            >
                              <Link
                                title={link.title}
                                url={link.url}
                                icon={link.icon}
                                views={link.views}
                              />
                            </div>
                          )
                        }}
                      </Draggable>
                    )
                  })}
                  {provided.placeholder}
                </div>
              )
            }}
          </Droppable>
        </DragDropContext>
      </Container>
    </AnimatePresence>
  )
}

export default App