📄 Custom RxJS operators 5/7: "pollWhile operator"

#angular #rxjs #pollWhile

The good old polling mechanism is still quite relevant in applications which rely on data that changes over a period of time. Let’s consider a scenario when an application has to make http requests in a certain time interval until an http response body fulfils a given condition, e.g. analysis status is set to completed. The built-in repeat operator combined with a limiting operator allows to accomplish the goal with a few lines of code.

operator

interface PollWhileConfig<T> {
  predicateFn: (v: T) => boolean;
  delay: number;
  count?: number;
  lastOnly?: boolean;
}

function pollWhile<T>({
  predicateFn,
  delay,
  count = Infinity,
  lastOnly = false,
}: PollWhileConfig<T>): MonoTypeOperatorFunction<T> {
  const limiter = lastOnly
    ? pipe(
        filter((v: T) => !predicateFn(v)),
        take(1)
      )
    : takeWhile(predicateFn, true);

  return pipe(repeat({ delay, count }), limiter);
}

📄 Custom RxJS operators 6/7: "retryForStatus operator"

#angular #rxjs #retryForStatus

The built-in retry operator allows to resubscribe to the source stream once an error has been thrown. It is possible to make a decision whether or not to retry based on the information contained in the error object. In turn, when it comes to streams that represent an http request, the operator can be configured to call an API again only for certain response statuses.

operator

interface ErrorWithStatus extends Error {
  status: number;
}

interface RetryForStatusConfig {
  retryableStatuses: number[];
  delay: number;
  count?: number;
}

function retryForStatus<T>({
  retryableStatuses,
  delay,
  count = Infinity,
}: RetryForStatusConfig): MonoTypeOperatorFunction<T> {
  return retry({
    count,
    delay: (err: ErrorWithStatus, retryCount) =>
      retryableStatuses.includes(err.status)
        ? timer(retryCount * delay)
        : throwError(() => err),
  });
}

📄 Custom RxJS operators 7/7: "toLatestFrom operator"

#angular #rxjs #toLatestFrom

The built-in withLatestFrom operator allows to add data from supplementary streams to the source stream. However, sometimes the source stream is just a trigger to perform a certain action for which data from supplementary streams is needed. As a result, the array of elements in the output stream contains a dummy first element. A better solution is to neglect the value from the trigger.

operator

function toLatestFrom<T, D1>(d1$: ObservableInput<D1>): OperatorFunction<T, D1>;
function toLatestFrom<T, D1, D extends unknown[]>(
  d1$: ObservableInput<D1>,
  ...data$: [...ObservableInputTuple<D>]
): OperatorFunction<T, [D1, ...D]>;

function toLatestFrom<D1, D extends unknown[]>(
  d1$: ObservableInput<D1>,
  ...data$: [...ObservableInputTuple<D>]
) {
  return pipe(
    withLatestFrom(d1$, ...data$),
    map(([_, ...data]) => (data.length === 1 ? data[0] : data))
  );
}

🤓 Code Review Checklist: Magic Values 📛 💣

#angular #review

It is recommended to use constants or enums to make the code more readable and maintainable and avoid magic values

🤓 Code Review Checklist: Hard-Coded Styles 📛

#angular #review

Be careful when using inline styles like style="margin-top: 12px".it can be hard to maintain

📄 Exploring the New Object.groupBy Function in Chrome 117

#js #groupBy

✅ Article link: https://medium.com/@bhargavr445/exploring-the-new-object-groupby-function-in-chrome-117-028820848433