Structure in "tree", how to iterate on it?

Question

Look at the picture:

I’m trying to clone a page using the concepts of immutable.

Each page has some features and the feature I must prepare before saving the page in the state(state) is "localId"

By clicking on the "clone" link the following code is called:

export const clonePageByLocalId = (state:any, sourcePageLocalId:string, position:number) => {

  // get the source page and clone it
  let sourcePageNode = getPageByLocalId( state, sourcePageLocalId )
  sourcePageNode = sourcePageNode.set('localId', v4() )

  let sourcePageNodeModify = prepareLocalId(sourcePageNode )

  let sourcePageNodeModify = sourcePageNodeModify.set('title', sourcePageNodeModify.get('title') +  '(clone)');
  sourcePageNodeModify = sourcePageNodeModify.set('title', sourcePageNodeModify.get('title') +  '(clone)');

  // ---> insert the cloned page into new location
  const newState = insertPage(state, sourcePageLocalId, position + 1, sourcePageNodeModify )

  return newState
}

Prepare the localIds:

const prepareLocalId = (sourcePageNode:any) => {

let sourcePageNodeModify = sourcePageNode.set('localId', v4() )

if ( sourcePageNodeModify.get('pages') && sourcePageNodeModify.get('pages').size > 0) {

sourcePageNodeModify.get('pages').forEach(function (page) {

    prepareLocalId( page )
});
}
return sourcePageNode
}

The clone is happening, however when clicking on "page 2 (clone)" and trying to expand the page "Page Two B" who suffers effect is "page 2". This is happening because localId is not actually being changed.

Guys, could you help me find a better way that I can iterate over the pages and set a value on your "localId property"?.

Hugs.

Answer 1

I’m new in development with React, Redux, Immutable and so on. After reading several articles about the immutable structure I found a solution.

It was the following:

The first point was to transform an immutable structure into a js object, as this object is not associated with a state, we can perform the modifications without worries.

After making the modifications it was necessary to return the JS structure to the immutable format.

So it was possible to insert the new page in the state and return this new state.

In the end, the code was as follows:

export const clonePageByLocalId = (state:any, sourcePageLocalId:string, position:number) => {

// get the source page and clone it
let sourcePageNode = getPageByLocalId( state, sourcePageLocalId )

let sourcePageNodeModify = setupEditingPages( sourcePageNode.toJS() )

sourcePageNodeModify.title =  sourcePageNodeModify.title + ' (clone)'

// ---> insert the cloned page into new location
const newState = insertPage(state, sourcePageLocalId, position + 1, fromJS(sourcePageNodeModify) )

return newState
}

Recursive interaction

const setupEditingPages = (page:any) => {
   page.localId = v4()
   page.collapsed = true
   if ( page.pages && page.pages.length > 0 ) {
      for(let i = 0; i < page.pages.length; i++) {
        page.pages[i] = setupEditingPages(page.pages[i])
     }
   }

  return page
}

This project I’m working on is an Opensource project that is available on https://github.com/omar331/evoluttree In case anyone wants to take a look and understand better what it is, feel free.

Hugs.