sprinklers3/client/state/UiStore.ts

import { action, IObservableArray, observable } from "mobx";
import { MessageProps } from "semantic-ui-react";

import { getRandomId } from "@common/utils";

export interface UiMessage extends MessageProps {
  id: number;
}

export interface UiMessageProps extends MessageProps {
  timeout?: number;
}

export class UiStore {
  messages: IObservableArray<UiMessage> = observable.array();

  @action
  addMessage(message: UiMessageProps): UiMessage {
    const { timeout, ...otherProps } = message;
    const msg = observable({
      ...otherProps,
      id: getRandomId()
    });
    this.messages.push(msg);
    if (timeout) {
      setTimeout(() => {
        this.removeMessage(msg);
      }, timeout);
    }
    return msg;
  }

  @action
  removeMessage(message: UiMessage) {
    return this.messages.remove(message);
  }
}