Looking for the right timer pattern (update UI based on elapsed time)

[sbeitzel]

Having navigated to a detail view, I've got fields that display the state of the item being viewed and I've got buttons to update that state. I'd also like to have a field that displays the elapsed time since the last update. To do that, I'm obviously going to need a way of getting "now" (easily injected via @Dependency(\.date)), and some State field for the elapsed time, but I'm also going to want something that triggers a recalculation of that elapsed time on a periodic basis. What's the right way to hook that up?

struct ListFeature: Reducer {
  struct State: Equatable {
    var items: [Item]
    var selectedItem: Item.ID?
...
  }
}

struct DetailFeature: Reducer {
  struct State: Equatable {
    var item: Item
    var elapsedTime: String = "--"
  }

  enum Action {
    case tick
    case updateItemCount(Int)
  }

  @Dependency(\.date) var dateGen

  func calculateElapsed(_ item: Item) -> String {
    let now = dateGen.now
    let elapsed = now.timeIntervalSince(item.lastUpdatedAt)
    return "\(elapsed) seconds"
  }

  var body: some Reducer<State, Action> {
    Reduce { state, action in
      switch action {
        case .tick: // <-- How do I generate these and send them to the store, but only if there's a currently selected item?
          state.elapsedTime = calculateElapsed(state.item)
          return .none
        case let .updateItemCount(newCount):
          state.item.count = newCount
          state.item.lastUpdatedAt = dateGen.now
          return .none
      }
    }
  }
}

[tgrapperon]

Hey @sbeitzel! There are two approaches to your problem. The first one consists in performing this operation in TCA, the other one, in SwiftUI (for example if the elapsed time value doesn't participate to your business logic).

For the first approach, you will need a timer. The simplest is probably to use @Dependency(\.continuousClock) that has a timer utility. This thing is an async sequence, so you can iterate in a .run effect that you start when the view appears (in .task for example):

@Dependency(\.continuousClock) var clock
var body: some Reducer {
  Reduce { state, action in
    switch action {
    case .task:
      return .run { send in
        for await _ in self.clock.timer(interval: .seconds(1)) {
          await send(.tick)
        }
      }
    case …
    }
  }
}

For the second approach, you can for example rely on some specific Text initializer starting from iOS 16. You need to pass the date of the last update into your ViewState, and then:

Text(timerInterval: viewStore.lastUpdateDate...Date.now)

Alternatively, you can spawn another timer in a task where the id: is the last update date, and compute the value yourself:

@State var elapsedSinceLastUpdate: Duration?
var body: some View {
  VStack {
    if let duration = elapsedSinceLastUpdate {
      Text(duration.formatted(.time(pattern: .minuteSecond)))
    }
  }.task(id: viewStore.lastUpdateInstant) {
    let lastUpdateInstant = viewStore.lastUpdateInstant
    let timer = ContinuousClock().timer(interval: .seconds(1))
    self.elapsedSinceLastUpdate = nil
    for await tick in timer {
      self.elapasedSinceLastUpdate = lastUpdateInstant.distance(to:tick)
    }
  }
}

I didn't check if this code builds. In particular, the lastUpdateInstant from the second example should come from an erased ContinuousClock (because .timer produces AnyClock.Instants ticks, so lastUpdatedDate's type need to match to compute the distance). But this should give an idea of the solution, and you can of course use Date.now and TimeIntervals. The SwiftUI-based approach is not testable, but it may avoid to involve TCA in maybe something that is purely UI, and which doesn't affect your app logic. This can be potentially desirable when you build large applications.

[tgrapperon]

After thinking a little more about the TCA approach, you can probably be more conservative by spawning a new timer effect only when you update the state:

case let .updateItemCount(newCount):
state.itemCount = newCount
return .run {
  let lastUpdated = AnyClock(clock).now
  await withTaskCancellation(id: Self.self, cancelInFlight: true) {
    for await tick in clock.timer(interval: .seconds(1)) {
      await send(.tick(elapsed: lastUpdated.distance(to: tick)))
    }
  } 
}

This thing will restart a new timer each time the .updateItemCount action is reduced, cancel any existing one, and will produce .tick(elapsed: Duration) actions already carrying the elapsed duration since the last update. I'm lazily using Self.self as an identifier, but you can use any type/hashable value you want to identify the effect.

[rpatel8del]

Hey, how do we cancel/call finish on the timer? For me, this runs beyond the View. (My reducer/state isn't optional).

[tgrapperon]

@rpatel8del You simply need to produce an Effect.cancel(id: …) effect at the appropriate time. You pass the same id you used in the withTaskCancellation. You can for example send this action at onDisappear. Because your reducer/state is not optional, this will not produce purple warnings. Please note that the upcoming navigation utilities will likely automatically cancel effects from presented features when they go away.

Alternatively, you can tie the effect's lifetime to the lifetime of the View if you await for it to finish in the .task modifier (thus, when using the first TCA solution I presented). You simply write in the View:

.task {
  await viewStore.send(.task).finish()
}

When the View goes away (or when its identity changes), this will cancel through Swift concurrency the effect spawned by send(.task), hence the timer. You can check the long-living effect case study for more informations.

[rpatel8del]

Thank you, that worked for me. :)

[kakhi-visionprism]

@tgrapperon I've been getting errors on let lastUpdated = AnyClock(clock).now

Type 'any Clock' cannot conform to 'Clock'

[ArmenNik]

What's the right way to run timer on iOS 14
before I used Effect.timer but now it is deprecated

[xuanyuelin]

.run {
Timer.publisher(every: seconds, on: .main, mode: .common)
.autoConnect()
.map { yourTransform() }
}

[mbrandonw]

The code above isn't quite right. First, you probably want to use @Dependency(\.mainQueue) so that it can be testable, and then you can use it like so:

return .publisher { 
  mainQueue.timerPublisher(every: .seconds(1))
    .map { /* transform to action */ }
}

[BeetLab]

You'll also need autoconnect() to run timer publisher:

return .publisher { 
  mainQueue.timerPublisher(every: .seconds(1))
    .autoconnect()
    .map { /* transform to action */ }
}

[mbrandonw]

@BeetLab good catch! Yes, auto connect is needed. You can also do this as an async sequence if you want:

.run { send in
  for await _ in mainQueue.timer(interval: .seconds(1)) {
    await send(.timerTick)
  }
}