Snackbar Implementation

store.ts

import { just, Maybe, nothing } from 'maybeasy';
import { action, computed, observable } from 'mobx';
import { Alert } from './types';

class AlertsStore {
  @observable
  alerts: Alert[] = [];

  @computed
  get current(): Maybe<Alert> {
    return this.alerts.length === 0 ? nothing() : just(this.alerts[0]);
  }

  @action
  hide = () => {
    if (this.alerts.length > 0) {
      this.alerts[0].display = false;
    }
  };

  @action
  process = () => {
    this.alerts = this.alerts.slice(1);
  };

  @action
  push = (alert: Alert) => {
    this.hide();
    this.alerts.push({ ...alert, display: true });
  };
}

const alertsStore = new AlertsStore();

export default alertsStore;

types.ts

interface BaseAlert {
  message: string;
  display: boolean;
}

export interface Success extends BaseAlert {
  kind: 'success';
}

export interface Info extends BaseAlert {
  kind: 'info';
}

export interface Warn extends BaseAlert {
  kind: 'warn';
}

export interface Error extends BaseAlert {
  kind: 'error';
}

export type Alert = Success | Info | Warn | Error;

export const alert = (message: string, kind: Alert['kind']): Alert =>
  ({
    message,
    kind,
    display: true,
  } as Alert);