import { Observable, fromEvent, Subject, EMPTY } from 'rxjs';

import { tap, mergeMap, groupBy, timeoutWith, ignoreElements, switchMap } from 'rxjs/operators';

const actions$ = dispatcher.asObservable().pipe(

  // optimize ui rendering

  tap(({ movieId }) => setButtonEmoji(movieId)),

  // group all the request by movieId

  groupBy(

    movie => movie.movieId,

    movie => movie,

    // cancel the extra requests to prevent memory leak by set 15s idel time

    actionsByGroup$ =>

      actionsByGroup$.pipe(

        timeoutWith(, EMPTY),

        ignoreElements()

      )

  ),

  // for each group of request, we apply switchMap to cancel previous request

  // finally flatten the requests into one

  mergeMap(group$ => group$.pipe(switchMap(movie => toggleStatus(movie.movieId))))

);