How to move recursively inside a tree

Question

I'm trying to create a tree component. But I dont know how move a item recursively inside a tree.

Each item its created dinamically and I would like remove an item/branch of the tree in each level. Tree is a vertical list with drag and drop. Each item can have children.

The problem is that for example I want to move item with id 4 to other position like between 0 an 1... doesnt drop on that position. Or I move same item between 3 and 5 put after item

I dont kwno what I'm doing wrong. I would like to work with a recursive method.

export const updateBranchsInSameLevel = (
    branchs: Array<IBranch>,
    fromBranch: IBranch,
    toBranch: IBranch
): Array<IBranch> => {
    let copyBranch: Array<IBranch> = [...branchs];
    copyBranch.splice(fromBranch.position, 1);
    const position: number = toBranch.position;
    copyBranch.splice(position, 0, fromBranch);
    return updatePostitionsAtFirstLevel(copyBranch);
};

As you can see, I'm using drag and drop that is the reason why remove fromBranch. fromBranch is the branch that a want to move and toBranch where I want put it.

const data = [{
    "id": 0,
    "parentId": null,
    "level": 0,
    "title": "New Branch 0",
    "children": [],
    "position": 0
}, {
    "id": 1,
    "parentId": null,
    "level": 0,
    "title": "New Branch 1",
    "children": [],
    "position": 1
}, {
    "id": 2,
    "parentId": null,
    "level": 0,
    "title": "New Branch 2",
    "children": [],
    "position": 2
}, {
    "id": 3,
    "parentId": null,
    "level": 0,
    "title": "New Branch 3",
    "children": [],
    "position": 3
}, {
    "id": 4,
    "parentId": null,
    "level": 0,
    "title": "New Branch 4",
    "children": [{
        "id": 6,
        "parentId": 4,
        "level": 1,
        "title": "New Branch 6",
        "children": [],
        "position": 0
    }],
    "position": 4
}, {
    "id": 5,
    "parentId": null,
    "level": 0,
    "title": "New Branch 5",
    "children": [],
    "position": 5
}]

Answer 1

I solved with this recursive method, it works but maybe other has a better solution.

const moveBranchToBranch = (branchs: Array<IBranch>, toBranch: IBranch, updatedBranch: IBranch): Array<IBranch> => {

    const dmaExtractor = (children: Array<IBranch>) => {
        children.forEach((child: IBranch, index: number) => {
            if (child.id === toBranch.id) {
                branchs = [...children.slice(0, index + 1), updatedBranch, ...children.slice(index + 1 )];
            }

            if (child.children && child.children.length > 0) {
                dmaExtractor(child.children);
            }
        });
    };

    if (branchs.length) {
        dmaExtractor(branchs);
    }
    return branchs;
}


export const updateBranchsInSameLevel = (
    branchs: Array<IBranch>,
    fromBranch: IBranch,
    toBranch: IBranch
): Array<IBranch> => {
    let copyBranch: Array<IBranch> = [...branchs];
    copyBranch.splice(fromBranch.position, 1);
    let updatedBranch: IBranch  = Object.assign({}, fromBranch, {
        level: toBranch.level,
        position: toBranch.position,
        parentId: toBranch.parentId
    });
    let updated: Array<IBranch> = moveBranchToBranch(copyBranch, toBranch, updatedBranch);
    return updatePostitionsAtFirstLevel(updated);
};