login-action.js

import { LOGIN, REGISTER } from './';

import { notify } from './notes';

export function login(username, password, router) {
	return {
		type: LOGIN,
		promise: (client) => client.post('/login', {
			data: {
				username: username,
				password: password
			}
		}),
		onSuccess: (user) => [
			notify('Login successful!', 'ok'),
			router.transitionTo('/user/' + user.username)
			// https://github.com/acdlite/redux-react-router
		],
		onFailure: notify
	};
}

export function register(username, password, email, router) {
	return {
		type: REGISTER,
		promise: (client) => client.post('/register', {
			data: {
				username: username,
				password: password,
				email: email
			}
		}),
		onSuccess: (user) => [
			notify('Registration successful!', 'ok'),
			router.transitionTo('/user/' + user.username)
		],
		onFailure: notify
	};
}

note-actions.js

import { NOTIFY } from './';

export function notify(message, type = 'error') {
	return {
		type: NOTIFY,
		data: { message, type }
	};
}

note-reducer.js

import { NOTIFY } from 'actions';

const initialState = null;

export default function lastNote(state = initialState, action = {}) {
	// console.log(action.type, state, action);
	if (action.type === NOTIFY) {
		return {
			...action.data,
			id: state ? state.id + 1 : 0
		};
	}

	return state;
}

Notes.js

import React, { Component } from 'react';
import SimpleTransitions from 'components/SimpleTransitions';
import TimedMutationsContainer from 'components/TimedMutationsContainer';

import styles from './styles';

import { connect } from 'tools/redux';

import Note from './Note';

@connect( state => ({lastNote: state.lastNote}))
export default class Notifications extends Component {
	notes = new TimedMutationsContainer(this);

	constructor(props) {
		super(props);
		if (props.lastNote !== null)
			this.consumeLastNote(props);
	}

	componentWillReceiveProps(props) {
		this.consumeLastNote(props);
	}

	addNote(note) {
		const originalElement = <Note {...note} key={note.id} onClick={this.delNote(note.id)} />;

		this.notes.set(note.id, {
			data: note,
			element: originalElement
		});

		this.notes.timedDelete(note.id, 30000);
	}

	consumeLastNote(props) {
		const {lastNote} = props;
		if (this.updatedStateProp(props))
				this.addNote(lastNote);
	}

	updatedStateProp(props) {
		return props.lastNote !== null && (!this.props.lastNote || props.lastNote.id !== this.props.lastNote.id);
	}

	shouldComponentUpdate(props) {
		return this.updatedStateProp(props);
	}

	componentWillUnmount() {
		this.notes.cleanup();
	}

	delNote(id) {
		return () => {
			this.notes.delete(id);
			this.forceUpdate();
		};
	}

	render() {
		return (
			<span style={styles.holder}>
				<SimpleTransitions
					transitionTime={500}>
					{ this.notes.render() }
				</SimpleTransitions>
			</span>
		);
	}
}