Can someone please provide the alternate method of splice. As splice doesn’t work in rescript

,
1

let handleSort = (column:Column.columnSelection) => {

let list = Js.Array.copy([selectedcolum])
	
 let columnIndex = selectedcolum->Js.Array2.findIndex((c)=> c.id == column.id)
 Js.log(columnIndex)
 let draggedItemContent = selectedcolum->Js.Array2.map((x)=> x.id == column.id ? x : column)
 let draggedItemContent = draggedItemContent->Js.Array.spliceInPlace(~pos= (draggedItemContent->Js.Array2.length)-1, ~remove=draggedItemContent->Js.Array2.length, ~add=[])

	//switch the position
  list->Js.Array2.spliceInPlace(~pos= (draggedItemContent->Js.Array2.length)-1, ~remove=0, ~add=draggedItemContent)
	//reset the position ref
	dragItem.current = Js.Nullable.null
	dragOverItem.current = Js.Nullable.null

	setItems(list)
}
3

I don’t understand your problems? What isn’t compatible? The spliceInPlace function exists and without testing your code, it looks like you’re using it right.

4

As you can see, I tried to convert the React code into Rescript, but i was unable to implement the splice here

const dragItem = React.useRef(null)
const dragOverItem = React.useRef(null)
//const handle drag sorting
const handleSort = () => {
//duplicate items
let list = […items]
console.log(list)
//remove and save the dragged item content
const draggedItemContent = list.splice(dragItem.current, 1)
console.log(“aaaa”,draggedItemContent)
//switch the position
list.splice(dragOverItem.current, 0, draggedItemContent)

	//reset the position ref
	dragItem.current = null
	dragOverItem.current = null

	//update the actual array
	setItems(list)
}
5

Okay, I thought you have problems with react but didn’t mention it anywhere. Maybe you mean “As splice doesn’t work in react”?!

Well, I have to guess again: Your component doesn’t update?
If that is your case, then it’s the same problem as in native JavaScript. The spliceInPlace mutates the array but you have to reference a new array to update your component.

So there are two solutions:

  1. Create a copy of your items, splice it and then use setItems(copy)
  2. Get all Items until the index (inclusive?), get all items after the index, concat it with your new item.

Here an example in TypeScript, but you can easily adopt it to rescript:

export const insertBefore = <T>(array: T[], item: T, index: number) => {
    return array.slice(0, index).concat(item, array.slice(index));
};

export const insertAfter = <T>(array: T[], item: T, index: number) => {
    return insertBefore(array, item, index + 1);
};
6

The above react code is successfully converted into rescript and the functionality for drag and drop works as expected :
@react.component
let make = () => {
let [items, setItems] = React.useState([“Item 1”, “Item 2”, “Item 3”])
let dragItem = React.useRef(0)
let dragOverItem = React.useRef(0)
let handleSort = () => {
//duplicate items
let list = Js.Array.copy(items)
//remove and save the dragged item content
let draggedItemContent = list -
> Js.Array2.spliceInPlace(~pos = dragItem.current, ~remove = 1, ~add = [])
Js.log2(“draggedItemContent”, draggedItemContent)
//switch the position
let _ = list - > Js.Array2.spliceInPlace(~pos = dragOverItem.current, ~remove = 0, ~add = draggedItemContent)
Js.log2(“List”, list)
//reset the position ref
dragItem.current = 0
dragOverItem.current = 0
//update the actual array
setItems(_ => list)
}
let removeItem = (item) => {
let selectedItems = Js.Array2.copy(items)
let updatedArr = selectedItems - > Js.Array2.filter(x => x !== item)
setItems(a => updatedArr)
} {
items - > Js.Array2.mapi((item, itemIndex) => {
< div key = {
Belt.Int.toString(itemIndex)
}
draggable = {
true
}
onDragStart = {
(e) => (dragItem.current = itemIndex)
}
onDragEnter = {
(e) => (dragOverItem.current = itemIndex)
}
onDragEnd = {
() => handleSort()
}
onDragOver = {
(e) => ReactEvent.Mouse.preventDefault(e)
} > {
React.string(Belt.Int.toString(itemIndex + 1) ++". "++item)
} < i onClick = {
() => removeItem(item)
}
className = “fa-solid fa-trash-can” > < /i>
}) - > React.array
}
}