CODEWITHSUNDEEP
javascriptreactjsimmutabilityimmutable.js
Leonardo Alves
Leonardo Alves

Reputation: 1946

Immutablejs - Updating deep nested tree with immutablejs

Hello I am trying to update this ImmutableJs tree but having some problems maybe someone can help me out.

Here is the code:

let state = Immutable.Map();
var state1 = state.merge({
    event: {
        days: [
            {
                date: 1,
                sessions: [
                    {
                        id: 1,
                        name: 2,
                        startTime: 1,
                        endTime: 1,
                        description: 1,
                        detailsLink: 1,
                        details: {visible: false}
                    },
                    {
                        id: 2,
                        name: 2,
                        startTime: 2,
                        endTime: 2,
                        description: 2,
                        detailsLink: 2,
                        details: {visible: false}
                    },
                    {
                        id: 3,
                        name: 3,
                        startTime: 3,
                        endTime: 3,
                        description: 3,
                        detailsLink: 3,
                        details: {visible: false}
                    }
                ]
            },
            {
                date: 2,
                sessions: [
                    {
                        id: 1,
                        name: 2,
                        startTime: 1,
                        endTime: 1,
                        description: 1,
                        detailsLink: 1,
                        details: {visible: false}
                    },
                    {
                        id: 2,
                        name: 2,
                        startTime: 2,
                        endTime: 2,
                        description: 2,
                        detailsLink: 2,
                        details: {visible: false}
                    },
                    {
                        id: 3,
                        name: 3,
                        startTime: 3,
                        endTime: 3,
                        description: 3,
                        detailsLink: 3,
                        details: {visible: false}
                    }
                ]
            }
        ]
    }
});

const state2 = state1.setIn(['event','days'], state1.getIn(['event','days']).map(day => {
    return day.get('sessions').map(session => {
        let isVisible = session.get('details').toJS();
        if(!isVisible.visible) {
            return session.setIn(['details','visible'],true);
        }
    })
}))

console.log(state1.toJS());
console.log(state2.toJS());

I am able to update the collection. The problem is that the two trees are not the same anymore. In the first one the days key is an object and in the second one the days key is an array.

I know the problem is with the days.get('session') that returns a list and not a map. But not sure how to make it work.

Here is a jsbin of the code.

https://jsbin.com/mejaxelobe/1/edit?html,js,output

Thanks

Upvotes: 1

Views: 861

Answers (2)

harrygogonis
harrygogonis

Reputation: 109

Sounds like you are replacing days with sessions which is probably not what you want to do.

If your goal is to set visible true in all the sessions, you could do something like this:

const state2 = state1.updateIn(
  ['event','days'],
  days => days.map(
    day => day.update('sessions',
      sessions => sessions.map(
        session => session.updateIn(['details', 'visible'], true)
      )
    )
  )
);

Upvotes: 1

R.R
R.R

Reputation: 867

One solution might be when you return, wrap it with "Immutable.Map" ? For example, the following ??

const state2 = state1.setIn(['event','days'], state1.getIn(['event','days']).map(day => {
    return Immutable.Map(day.get('sessions').map(session => {
        let isVisible = session.get('details').toJS();
        if(!isVisible.visible) {
            return session.setIn(['details','visible'],true);
        }
    }))
}))

Upvotes: 0

Related Questions