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

Question

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

Navigation

#1 by (0 votes)

1

Look at the image:

I'mtryingtocloneapageusingimmutableconcepts.

EachpagehassomecharacteristicsandthecharacteristicthatImustpreparebeforesavingthepageinthestateisthe"localId"

By clicking 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 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, but by clicking on "page 2 (clone)" and trying to expand the "Page Two B" page that has effect is "page 2". This is happening because the localId is not actually being changed.

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

Hugs.

javascript react imutabilidade

asked by anonymous 21.11.2016 / 14:01

1 answer

Is there a way to know in which file a html part is? Error in CMS page in Code Igniter

score 0 · Answer 1

I'm new to development with react, redux, immutable, and so on. After reading several articles on the structure of the immutable I found a solution.

It was as follows:

The first point was to transform an immutable structure into an object js, since 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 structure in JS to the immutable format.

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

At 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 the link . If someone wants to take a look and better understand what it is, feel free.

Hugs.