Using RxJS Timer to Provide Periodic Async Data
Tags: angular, rxjs, javascript
Published: 2020-08-18 22:37:53

In my last project, our team needed to create a real time bid system where the user had the ability to bid for contracts for a given period of time. The remaining time for each contract would be displayed as a countdown, like this:

![Countdown](https://dev-to-uploads.s3.amazonaws.com/i/gax97ppseljcwosryajm.gif)

In this post I’ll show the different approaches we took to solve this challenge, and why the rxjs implementation was the most convenient in our case.

## Solution #1: The Countdown Component ⏲️

We could have easily declared a countdown component with the expiration date as an input and run a setInterval that updates the remaining time every second.

```javascript
@Component({
  selector: 'app-countdown',
  template: '<span>{{ remainingTime }}</span>',
})
export class CountdownComponent implements OnInit {
  @Input() expireDate: Date;
  public remainingTime: string;
 
  ngOnInit(): void {
    setInterval(() => {
      this.remainingTime = this.calculateRemainingTime(this.expireDate);
    }, 1000);
  }
}
```

This implementation is simple and very easy to implement, but it has some disadvantages:
* Each countdown is independent from each other, which means they are not in sync as a group. Eventually, they start changing at different times which is not ideal in terms of user experience. (see why here: [JS Event Loop](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif))
* The parent component has no information about the status of each contract (expired or not). Therefore, an output in the countdown is necessary to provide the parent such information, so it can take corresponding action (remove/block from list, refresh list, etc).
* It’s not the most performant solution since we end up with a bunch of **stateful** components, each one of them with a timer, each timer performing the same task every second.

## Solution #2: Master Timer (One timer to rule them all 🤴💍⚔️)

In order to address the issues from solution #1, we could have moved the logic for calculating the remaining time from the countdown component to the parent component.

The countdown component wouldn’t have any logic anymore, but it would simply display the provided value with some styles. It would now be a __stateless__ component and could be renamed to time-display component.

```javascript
@Component({
  selector: 'app-time-display',
  template: '<span>{{ time }}</span>',
})
export class TimeDisplayComponent {
  @Input() time: string;
}
```

In the parent component, we can then use a single setInterval which would iterate over the list of contracts to update the corresponding remaining time, every second. This solves the synchronization issue.

```javascript
@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let contract of contracts">
      <span>{{ contract.id }}</span>
      <app-time-display [time]="contract.remainingTime"></app-time-display>
    </div>
  `,
})
export class AppComponent implements OnInit {
  public contracts: Contract[] = MOCK_CONTRACTS;
 
  ngOnInit(): void {
    setInterval(() => {
      this.contracts.forEach(contract => {
        contract.remainingTime = this.calculateRemainingTime(contract.expiresAt);
      });
    }, 1000);
  }
}
```

Now the parent component holds information about any contract that expires and can take the corresponding action for such a situation. In our example, we simply block the navigation to the detail of the contract and apply some styles to it.

![Countdown expired](https://dev-to-uploads.s3.amazonaws.com/i/1b7l5kw5f4k1whlrtlzv.gif)

At this point we solved all the issues from solution #1, but our parent component has more responsibilities now and some __imperative__ code. We could use the power of rxjs to make it more __declarative__ and reduce it’s responsibilities.

## Solution #3: RxJS Timer Operator 🚀👨‍🚀

We will be using the rxjs `timer` operator to transform this into a stream of data and provide it directly to our template with help of the async pipe.

Here the [learnrxjs](https://www.learnrxjs.io/learn-rxjs/operators/creation/timer#after-given-duration-emit-numbers-in-sequence-every-specified-duration) definition of timer operator.

> After given duration, emit numbers in sequence every specified duration.

Additionally, we can see in the docs that the operator takes two arguments: *initialDelay* and *period*. That means, after *initialDelay* ms it emits the number 0, and then it emits this value increased by one every *period* ms. We can call this number the “tick” value and infer the response type as `Observable<number>`.

We actually won’t be needing this “tick” value, but we use the tick event to make our “remaining time” calculations, like this:

```javascript
import { Observable, timer } from 'rxjs';
 
@Component({
  selector: 'app-root',
  template: `
    <div *ngFor="let contract of contracts$ | async">
      <span>{{ contract.id }}</span>
      <app-time-display [time]="contract.remainingTime"></app-time-display>
    </div>
  `,
})
export class AppComponent implements OnInit {
  private contracts: Contract[] = MOCK_CONTRACTS;
  public contracts$: Observable<Contract[]>;
 
  ngOnInit(): void {
    this.contracts$ = this.countdown();
  }
 
  private countdown(): Observable<Contract[]> {
    return timer(0, 1000)
      .pipe(
        map(() => {
          this.contracts.forEach(contract => {
            contract.remainingTime = this.calculateRemainingTime(contract.expiresAt);
          });
          return this.contracts;
        }),
      );
  }
}
```

We use the `map` operator to both make our calculations and change the return type from `Observable<number>` to `Observable<Contract[]>`. We can now encapsulate the countdown function logic in a service to abstract it from the component, make it reusable (we use this feature in several screens) and consume the stream directly into the template.

```javascript
export class AppComponent implements OnInit {
  private contracts: Contract[] = MOCK_CONTRACTS;
  public contracts$: Observable<Contract[]>;
 
  constructor(private timerService: TimerService) { }
 
  ngOnInit(): void {
    this.contracts$ = this.timerService.countdown(this.contracts);
  }
}
```

## Conclusions
At the end, we achieved the following improvements with our final solution:
* Better performance and user experience
* Code readability and reusability
* It is rxjs friendly (easy integration with ngrx, socket.io, etc)

## Acknowledgement
I would like to thank my teammates [Kevin](https://dev.to/kevin1945) and [Pablo](https://dev.to/jpap1021) for implementing these ideas, as well as [Nicolás](https://github.com/nicolas9519) and [Pablo Wolff](https://dev.to/wolffvel) for their feedback.

## Demo 🧪

{% stackblitz rxjs-timer-op view=preview %}

The full code for each solution can be found in the links below. There are extra lines there for clearing the intervals, completing the observable when necessary, and more.

[Solution #1: The Countdown Component](https://github.com/jcamilom/rxjs-timer/tree/solution-1)
[Solution #2: Master Timer](https://github.com/jcamilom/rxjs-timer/tree/solution-2)
[Solution #3: RxJS Timer Operator](https://github.com/jcamilom/rxjs-timer)