rx-swiftmoyaswiftui-list

Update SwiftUI List after network request using RxSwift


I need to update a SwiftUI List after making a network request. For requests, I use Moya approach with combination of triggers(Input&Output - "Kickstarter"). I cant use Combine framework due to the structure of the project, while they have a lot of helpful advises(not sure about my case).

Simple ContactList:

struct ContactList: View {
    var viewModel: UserViewModel
    var body: some View {
        NavigationView {
            List(viewModel.users) { contact in
                NavigationLink(destination: ContactDetail(user: contact)) {
                    ContactRow(user: contact)
                }
            }
            .navigationBarTitle(Text("Team Members"))
        }
    }
}

Then ViewModel

class UserViewModel {
    let disposeBag = DisposeBag()
    var users: [TeamMember] = []

    init(users: [TeamMember] = []) {
        let networkModel = UserNetworkModel()
        networkModel.output.teamMembers.subscribe { (event) in
            self.users.append(contentsOf: event.element.orEmpty)
        }.disposed(by: disposeBag)

        networkModel.output.error.subscribe(onNext: { error in
            print(error.localizedDescription)
        }).disposed(by: disposeBag)
        networkModel.input.loadTrigger.onNext(Void())
        self.users = users
    }
}

And NetworkModel

class UserNetworkModel {
    let disposeBag = DisposeBag()
    let input: Input
    let output: Output

    struct Input {
        let loadTrigger: AnyObserver<Void>
        let searchTrigger: AnyObserver<String>
    }

    struct Output {
        let teamMembers: Observable<[TeamMember]>
        let error: Observable<Error>
    }


    internal let loadSubject = PublishSubject<Void>()
    internal let searchSubject = BehaviorSubject<String>(value: "")

    internal let errorSubject = PublishSubject<Error>()
    internal let teamMembersSubject = BehaviorSubject<[TeamMember]>(value: [])

    init() {
        let service = MoyaProvider<TeamTarget>()
        self.input = Input(loadTrigger: loadSubject.asObserver(), searchTrigger: searchSubject.asObserver())
        self.output = Output(teamMembers: teamMembersSubject.asObservable(), error: errorSubject.asObservable())

        let result = loadSubject.flatMapLatest { _ -> Observable<[TeamMember]> in
            service.rx.request(.get).debug().mapArray(TeamMember.self).asObservable()
        }.share(replay: 1)

        Observable.combineLatest(result, searchSubject).map { (arg) in
            let (members, filter) = arg
            if filter.isEmpty {
                return members
            } else {
                let searchText = try! self.searchSubject.value()
                return members.filter({
                    return [$0.firstName, $0.lastName]
                        .compactMap({ $0 })
                        .first(where: { $0.hasPrefix(searchText) }) != nil
                })
            }
        }.bind(to: teamMembersSubject).disposed(by: disposeBag)

        result.subscribe(onError: { error in
            self.errorSubject.onNext(error)
        }).disposed(by: self.disposeBag)

    }
}

Is it possible to update users array in this way? Or only Combine can do it for me easily? Thanks for your time.


Solution

  • While I've found some Combine solution. Still waiting for Rx solution. So, I fixed it just added @ObservedObject for ContactList property and @Published for users' array in Network model. Much less code, natively but not what I was looking for.

    Full answer:

    struct ContactList: View {
        @ObservedObject var networkModel: NetworkModel
        var body: some View {
            NavigationView {
                List(networkModel.users) { contact in
                    NavigationLink(destination: ContactDetail(user: contact)) {
                        ContactRow(user: contact)
                    }
                }
                .navigationBarTitle(Text("Team Members"))
            }
        }
    }
    
    #if DEBUG
    struct ContactList_Previews: PreviewProvider {
        static var previews: some View {
            ContactList(networkModel: .init(users: contactData))
        }
    }
    #endif
    
    class NetworkModel: ObservableObject {
        @Published var users = [User]()
    
        init(users: [User] = []) {
            getMembers()
        }
    
        private func getMembers() {
            let provider = MoyaProvider<TeamTarget>()
            provider.request(.get) { [weak self] (result) in
               switch result {
               case .success(let response):
                    do {
                       let result = try JSONDecoder().decode([User].self, from: response.data)
                       self?.users.append(contentsOf: result)
                    } catch {
                       print(error.localizedDescription)
                    }
               case .failure(let error):
                    print(error.errorDescription.orEmpty)
               }
            }
        }
    }