For the case where you don't want explicit Cancel and Save buttons

[iandundas]

Taking sample code from Episode 0172, I like how you attach the navigation title and the cancel+save buttons onto the ItemView, so that ItemView isn't concerned (or aware) with how the data it manages gets saved or discarded.

This allows you to attach explicit Cancel and Save actions, which the ItemView is oblivious of:

NavigationLink(
  unwrap: self.$viewModel.route,
  case: /ItemRowViewModel.Route.edit,
  onNavigate: self.viewModel.setEditNavigation(isActive:),
  destination: { $itemViewModel in
    ItemView(viewModel: itemViewModel)
      .navigationBarTitle("Edit")
      .navigationBarBackButtonHidden(true)
      .toolbar {
        ToolbarItem(placement: .cancellationAction) {
          Button("Cancel") {
            self.viewModel.cancelButtonTapped()
          }
        }
        ToolbarItem(placement: .primaryAction) {
          HStack {
            if self.viewModel.isSaving {
              ProgressView()
            }
            Button("Save") {
              self.viewModel.edit(item: itemViewModel.item)
            }
          }
          .disabled(self.viewModel.isSaving)
        }
      }
  }
) { 
// ... 
}

Note: The ItemRowViewModel is taking a struct (not a binding) in the init: public init(item: Item).

My question is (still keeping the ItemView oblivious to any changes needed), if in a separate presentation of the same ItemView, but this time wanting to take the changes immediately as the user makes them (rather than having to tap Save), what would be the best practise?

i.e. so that on swiping back the change is made and not lost.

First idea

I had two ideas. The first was to sink on the ItemViewModel's item at the time that we set the route, to immediately get the updates when item changes:

final class ItemRowViewModel: ObservableObject, Identifiable {
  
  private var cancellables = [AnyCancellable]()
  
  func setEditNavigation(isActive: Bool) {
    
    if isActive {
      let viewModel = ItemViewModel(item: self.item)

      // Save the cancellable		
      cancellables += [viewModel.$item.sink { [unowned self] item in
        self.item = item
      }]
      
      self.route = .edit(viewModel)
    }
    else {
      self.route = nil

      // Clear the cancellable
      cancellables = []
    }
  }
  
}

This feels a bit awkward to me, though perhaps it's the best way.

Second idea

An alternative could be to add an .onDisappear {} to the view we're presenting, and pull out the item immediately before it is lost:

NavigationLink(
  unwrapping: $viewModel.route,
  case: /ItemRowViewModel.Route.edit,
  onNavigate: { isNavigating in
    viewModel.setEditNavigation(isActive: isNavigating)
  },
  destination: { $itemViewModel in
    ItemView(viewModel: itemViewModel)
      .navigationTitle("Edit Item")
      .onDisappear {
        // We don't take the Cancel/Save approach, we want to save the changes immediately:
        viewModel.commit(item: $itemViewModel.wrappedValue.item)
      }
  }
) {
  // ...
}

with the following inside the ItemRowViewModel:

func commit(item: Item) {
  self.item = item
}

However, this visibly updates the ItemRowView as the user pops back - you can see the change get committed in the UI after the pop completes.

Just to reiterate, I'm looking to keep ItemViewModel unchanged, because in some scenarios I'd still want to add Cancel+Save buttons.

Just wondering what would be recommended as the best approach here :)

Thanks!

[mbrandonw]

Hi @iandundas, the .sink idea does work, and is in fact what we do it in our Standups demo app. You can see it here.

We covered this style in episode #216 at around 38:40.

[iandundas]

ah! Then I was on the right track. Thanks a lot!