Massive change. Changed to react-scripts (webpack) for building. Changed to material-ui where applicable. Changed to CSS-in-JS.

app/src/components/Notifications/Notifications.js

@@ -0,0 +1,85 @@
+import { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { withSnackbar } from 'notistack';
+import * as stateActions from '../../actions/stateActions';
+
+class Notifications extends Component
+{
+	displayed = [];
+
+	storeDisplayed = (id) =>
+	{
+		this.displayed = [ ...this.displayed, id ];
+	};
+
+	shouldComponentUpdate({ notifications: newNotifications = [] })
+	{
+		const { notifications: currentNotifications } = this.props;
+
+		let notExists = false;
+
+		for (let i = 0; i < newNotifications.length; i += 1)
+		{
+			if (notExists) continue;
+
+			notExists = notExists ||
+				!currentNotifications.filter(({ id }) => newNotifications[i].id === id).length;
+		}
+
+		return notExists;
+	}
+
+	componentDidUpdate()
+	{
+		const { notifications = [] } = this.props;
+
+		notifications.forEach((notification) =>
+		{
+			// Do nothing if snackbar is already displayed
+			if (this.displayed.includes(notification.id)) return;
+			// Display snackbar using notistack
+			this.props.enqueueSnackbar(notification.text,
+				{
+					variant          : notification.type,
+					autoHideDuration : notification.timeout,
+					anchorOrigin     : {
+						vertical   : 'bottom',
+						horizontal : 'left'
+					}
+				}
+			);
+			// Keep track of snackbars that we've displayed
+			this.storeDisplayed(notification.id);
+			// Dispatch action to remove snackbar from redux store
+			this.props.removeNotification(notification.id);
+		});
+	}
+
+	render()
+	{
+		return null;
+	}
+}
+
+Notifications.propTypes =
+{
+	notifications      : PropTypes.array.isRequired,
+	enqueueSnackbar    : PropTypes.func.isRequired,
+	removeNotification : PropTypes.func.isRequired
+};
+
+const mapStateToProps = (state) =>
+	({
+		notifications : state.notifications
+	});
+
+const mapDispatchToProps = (dispatch) =>
+	({
+		removeNotification : (notificationId) =>
+			dispatch(stateActions.removeNotification({ notificationId }))
+	});
+
+export default withSnackbar(
+	connect(mapStateToProps, mapDispatchToProps)(Notifications)
+);