import { app, effects, sub } from 'ferp';
import { notificationPermissionEffect, notificationEffect } from './composableNotificationEffects.js';
const NotificationAdd = (notification) => (state) => [
{ ...state, notifications: state.notifications.concat(notification) },
const NotificationRemove = (notification) => (state) => [
{ ...state, notifications: state.notifications((n) => n !== notification) },
const NotificationCreate = (title) => (state) => [
notificationEffect(title, undefined, (notification) => effects.act(NotificationAdd, notification)),
const delayEffect = (timeout, nextEffect) effects.thunk(() => effects.defer((resolve) => {
setTimeout(resolve, timeout, nextEffect);
const notificationSubscription = (notification, onInteract) => (dispatch) => {
const onClose = (event) => {
dispatch(onInteract(notification));
const onClick = (event) => {
dispatch(onInteract(notification));
notification.addEventListener('click', onClick);
notification.addEventListener('close', onClose);
notification.removeEventListener('click', onClick);
notification.removeEventListener('close', onClose);
notifyEffect('First Notification'),
delayEffect(1000, () => effects.batch([
notifyEffect('Second Notification')),
delayEffect(3000, () => notifyEffect('Third Notification')),
...state.notifications.map(notification => sub(
notificationSubscription,