// @flow import { orderBy } from "lodash"; import { observable, action, computed } from "mobx"; import { v4 as uuidv4 } from "uuid"; import type { Toast, ToastOptions } from "types"; export default class ToastsStore { @observable toasts: Map = new Map(); lastToastId: string; @action showToast = ( message: string, options: ToastOptions = { type: "info", } ) => { if (!message) return; const lastToast = this.toasts.get(this.lastToastId); if (lastToast && lastToast.message === message) { this.toasts.set(this.lastToastId, { ...lastToast, reoccurring: lastToast.reoccurring ? ++lastToast.reoccurring : 1, }); return this.lastToastId; } const id = uuidv4(); const createdAt = new Date().toISOString(); this.toasts.set(id, { id, message, createdAt, type: options.type, timeout: options.timeout, action: options.action, }); this.lastToastId = id; return id; }; @action hideToast = (id: string) => { this.toasts.delete(id); }; @computed get orderedData(): Toast[] { return orderBy(Array.from(this.toasts.values()), "createdAt", "desc"); } }