How to Create Movable Elements in a React App

[00:00 - 00:07] Moving items. Now that we can add new items, it's time to move them around. We'll start with the columns. First define the moveItemHelper function.

[00:08 - 00:22] Moving the item means that we remove it from the old position and then add to the new position. Let's define the helper functions for it. Open SRC, Utils, array of Tils, and here define the first removeItemAtIndex function.

[00:23 - 01:01] Export function removeItemAtIndex is going to receive TItem, array of T items, and an index, from which it needs to remove the item. We return a new array where we slice from 0 to index, and then we add a segment that we get using array slice from index plus 1. This is an immutable way of removing an item from the array. Now let's define another function, insertItemAtIndex. Export function insertItemAtIndex. It's also a generic function.

[01:02 - 03:36] It will need the item type. It receives an array of the items, an item of type T item, and an index where it needs to edit. The index has type number. Now we do something very, very similar to the previous function, but now instead of skipping the item that we want to remove, we added between the two segments that we get using slice function. And also instead of adding plus 1, previously we did it to skip one position in the array. We don't do it, so we fill in the array tightly. So we get everything from the previous array up until the index where we want to add a new item. Then we put there an item, and then starting from the next index, we fill it with the items from the old array. And now we can define the moveItem function. Expert. Const move Item of type T item where we get an array of the items from, which is a number, the starting position, and to the number representing the target position. Get the item array from the index from, and then we return insertItemAtIndex where we pass an array that we got by removing itemAtIndex pass in the array from, pass in the item, and to. Now let's handle the moveListAction. Openers sees state upstate reducer. Here we'll first need to add a new type to the action union. So we'll actually open the action first. Defining you type here, type moveList payload dragged ID of type string, hover ID of type string, and also define the action creator. Expert const moveList, we accept dragged ID, string, and hover ID string. It has type action, and we return type moveList payload dragged ID, hover ID. Now we can define a new block on the upstate reducer. After a task, define a new case, moveList, here we get dragged ID, hover ID from action payload. We calculate the drag index by calling findItemIndex by ID, pass in draft, lists, and dragged ID, calculate the hover index by looking for the hover ID, and then move the item, draft, lists, equals moveItem from drag index to hover index, and then break.