Question about making changes to the inner datasource which is a MutableDataSource

[Isuru-Nanayakkara]

There is a simple static tableview where it shows profile data. Since this data was not changing, it has used the StaticDataSource.

final class ProfileInfoCardViewModel {
    let dataSource: DataSource
    let profileViewModel: ProfileViewModel

    init(profileViewModel: ProfileViewModel) {
        self.profileViewModel = profileViewModel
        let user = profileViewModel.user.producer.skipNil()

        let proxyDataSource = ProxyDataSource()
        self.dataSource = proxyDataSource
        proxyDataSource.innerDataSource <~ user.map { user in
            if user.isLoggedInUser {
                if user.userLikes ?? 0 > 0 {
                    items.append(ProfileInfoRatingCellViewModel(userLikes : user.userLikes ?? 0))
                } else {
                    items.append(ProfileInfoNoRatingsYetCellViewModel())
                }
                items.append(ProfileInfoUpdateCellViewModel())
            }
            return StaticDataSource(items: items)
        }
    }
}

There is a new requirement to make this tableview dynamic. Upon a tap of a button, I need to insert/remove a cell from this tableview. So I opted to use the MutableDataSource. Also I changed the dataSource class variable from DataSource type to ProxyDataSource directly.

final class ProfileInfoCardViewModel {
    let dataSource: ProxyDataSource
    let profileViewModel: ProfileViewModel

    init(profileViewModel: ProfileViewModel) {
        self.profileViewModel = profileViewModel
        let user = profileViewModel.user.producer.skipNil()
        
        self.dataSource = ProxyDataSource()
        self.dataSource.innerDataSource <~ user.map { user in
            if user.isLoggedInUser {
                if user.userLikes ?? 0 > 0 {
                    items.append(ProfileInfoRatingCellViewModel(userLikes : user.userLikes ?? 0))
                } else {
                    items.append(ProfileInfoNoRatingsYetCellViewModel())
                }
                items.append(ProfileInfoUpdateCellViewModel())
            }
            return MutableDataSource(items)
        }
    }
    
    func userTappedToggleButton(_ show: Bool) {
        // do changes (insert/remove) to the inner mutable data source here

    }
}

The data loads fine still. However I'm having trouble figuring out how to make changes to the inner data source (add/remove an item).

[notbenoit]

You can keep a reference to the MutableDataSource so that you can call deleteItem(at:) when needed.

You could also have two separate DataSource that you bind to the ProxyDataSource depending on the state of your toggle button, like so :

dataSource.innerDataSource <~ toggled.map { $0 ? someDataSource : someOtherDataSource }

[Isuru-Nanayakkara]

Hi, thanks for the quick response. I was actually trying out something similar to your first suggestion as well. I declared a class level variable for MutableDataSource called mutableDataSource.

final class ProfileInfoCardViewModel {

    let profileViewModel: ProfileViewModel
    var mutableDataSource = MutableDataSource<Any>()
    var dataSource: DataSource {
        return mutableDataSource
    }


    init(profileViewModel: ProfileViewModel) {
        self.profileViewModel = profileViewModel
        let user = profileViewModel.user.producer.skipNil()

        if let user = profileViewModel.user.value {
            if user.isLoggedInUser {
                if user.userLikes ?? 0 > 0 {                           
                    items.append(ProfileInfoRatingCellViewModel(userLikes : user.userLikes ?? 0))
                } else {
                    items.append(ProfileInfoNoRatingsYetCellViewModel())
                }
                items.append(ProfileInfoUpdateCellViewModel())
            }
            
            mutableDataSource = MutableDataSource(items)
        }
    }
    
    func userTappedToggleButton(_ show: Bool, index: Int) {
        if show {
            mutableDataSource.insertItem(ProfileLevelIndexCellViewModel(), at: index)
        } else {
            mutableDataSource.deleteItem(at: index)
        }
    }
}

I initialized the MutableDataSource by passing in the items in it's init method and assigned it like this mutableDataSource = MutableDataSource(items). This fixes my initial problem of editing the datasource.

But the issue with this assigning approach is that, the changes to the user object's values are not reflected on the tableview.

How should I bind the user object like this self.dataSource.innerDataSource <~ user.map { user in ... } to the datasource instead of assigning it?

Doing this mutableDataSource <~ user.map { user in throws the following error.

Binary operator '<~' cannot be applied to operands of type 'MutableDataSource' and 'SignalProducer<(), NoError>'

Sorry abut the trivial questions. I'm quite new to ReactiveSwift so I'm still learning the ropes 😬

[notbenoit]

Indeed in your code above you are just changing the reference to the MutableDataSource, and this change cannot be propagated through ReactiveSwift Signal/Property system.
If you want to swap the DataSource when the user changes, you need to wrap it in a MutableProperty at some point, and bind the innerDataSource of that ProxyDataSource to this MutableProperty.

[Isuru-Nanayakkara]

No no, the user itself doesn't change :) Only the user's property values may change. The tableview should only reflect those changes.

So no need for multiple datasources and swapping them. I'm only trying to bind the one user object to the mutableDataSource. Is there a way to do that?

[notbenoit]

The above would still apply.

[Isuru-Nanayakkara]

I think I managed to get it working!

final class ProfileInfoCardViewModel {

    let dataSource: DataSource
    let profileViewModel: ProfileViewModel
    var mutableDataSource = MutableDataSource<Any>()

    init(profileViewModel: ProfileViewModel) {
	self.profileViewModel = profileViewModel
	let user = profileViewModel.user.producer.skipNil()

        let proxyDataSource = ProxyDataSource()
        self.dataSource = proxyDataSource
        proxyDataSource.innerDataSource <~ user.map { user in
            if user.isLoggedInUser {
                if user.userLikes ?? 0 > 0 {
                    items.append(ProfileInfoRatingCellViewModel(userLikes : user.userLikes ?? 0))
                } else {
                    items.append(ProfileInfoNoRatingsYetCellViewModel())
                }
                items.append(ProfileInfoUpdateCellViewModel())
            }
            self.mutableDataSource = MutableDataSource(items)
            return self.mutableDataSource
        }
    }

    func userTappedToggleButton(_ show: Bool, index: Int) {
        if show {
            mutableDataSource.insertItem(ProfileLevelIndexCellViewModel(), at: index)
        } else {
            mutableDataSource.deleteItem(at: index)
        }
    }
}

I kept the mutableDataSource property as well as the dataSource property from the original code as it is. And I assign the items to mutableDataSource inside the innerDataSource binding code.

Thanks a lot for your help!

[Vadim-Yelagin]

You might be creating a retain cycle by capturing self there.
What you can do instead is have a private let userDataSource: MutableProperty<MutableDataSource<Any>>, then bind userDataSource <~ user.map { ... } (there will be no need to capture self in that closure), and then bind proxyDataSource.innerDataSource <~ userDataSource.
That might be even nicer to wrap that MutableDataSource into a UserViewModel and move some of the code there.

[Isuru-Nanayakkara]

Hi @Vadim-Yelagin, thanks for the response. Understood. I modified my code.

final class ProfileInfoCardViewModel {

    let dataSource: DataSource
    let profileViewModel: ProfileViewModel
    private let userDataSource: MutableProperty<MutableDataSource<Any>>

    init(profileViewModel: ProfileViewModel) {
	self.profileViewModel = profileViewModel
	let user = profileViewModel.user.producer.skipNil()
        
        userDataSource <~ user.map { user in
            if user.isLoggedInUser {
                if user.isLoggedInUser {
                if user.userLikes ?? 0 > 0 {
                    items.append(ProfileInfoRatingCellViewModel(userLikes : user.userLikes ?? 0))
                } else {
                    items.append(ProfileInfoNoRatingsYetCellViewModel())
                }
                items.append(ProfileInfoUpdateCellViewModel())
            }
            return MutableDataSource(items)
        }
        
        let proxyDataSource = ProxyDataSource()
        proxyDataSource.innerDataSource <~ userDataSource.map { $0 }
        self.dataSource = proxyDataSource
    }

    func userTappedToggleButton(_ show: Bool, index: Int) {
        if show {
            userDataSource.value.insertItem(ProfileLevelIndexCellViewModel(), at: index)
        } else {
            userDataSource.value.deleteItem(at: index)
        }
    }

}

One small issue. I'm currently getting the following error.

Constant 'self.userDataSource' used before being initialized

I'm not sure why.

Side question: I'm accessing the mutable datasource like this userDataSource.value.deleteItem to make changes to it. I hope that's the proper way?

[Isuru-Nanayakkara]

Hi again, I still need help on the last snag 😬