notify.model.js

import { createEvent, createStore, forward, guard, sample } from 'effector';

import nanoid from 'nanoid';

export const show = createEvent('show Notify');
export const hide = createEvent('hide Notify');
/**
 * @type {Event<{variant: string, message: string}>}
 * @property {string} variant info | success | warning | error
 */
export const notify = createEvent('notify');

export const $notifications = createStore([]);

const hideFirst = $notifications.map(store => store.length > 5);

const firstId = sample($notifications, show).map(notifications => {
  const { id } = notifications[0];
  return id;
});

$notifications.on(show, (state, notification) => state.concat(notification));
$notifications.on(hide, (state, id) =>
  state.filter(notification => notification.id !== id)
);

forward({
  from: notify.map(payload => ({ id: nanoid(), ...payload })),
  to: show
});

guard({
  source: firstId,
  filter: hideFirst,
  target: hide
});