Compute the number of unread messages in reducer

app/lib/components/ToolArea/ToolArea.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import * as stateActions from '../../redux/stateActions';
+import * as toolTabActions from '../../redux/stateActions';
 import ParticipantList from '../ParticipantList/ParticipantList';
 import Chat from '../Chat/Chat';
 import Settings from '../Settings';
@@ -16,7 +16,8 @@ class ToolArea extends React.Component
 	render()
 	{
 		const {
-			toolarea,
+			currentToolTab,
+			unread,
 			setToolTab
 		} = this.props;
 
@@ -31,9 +32,11 @@ class ToolArea extends React.Component
 						{
 							setToolTab('chat');
 						}}
-						checked={toolarea.currentToolTab === 'chat'}
+						checked={currentToolTab === 'chat'}
 					/>
-					<label htmlFor='tab-chat'>Chat</label>
+					<label htmlFor='tab-chat'>
+						Chat ({unread} new)
+					</label>
 
 					<div className='tab'>
 						<Chat />
@@ -47,7 +50,7 @@ class ToolArea extends React.Component
 						{
 							setToolTab('users');
 						}}
-						checked={toolarea.currentToolTab === 'users'}
+						checked={currentToolTab === 'users'}
 					/>
 					<label htmlFor='tab-users'>Users</label>
 
@@ -63,7 +66,7 @@ class ToolArea extends React.Component
 						{
 							setToolTab('settings');
 						}}
-						checked={toolarea.currentToolTab === 'settings'}
+						checked={currentToolTab === 'settings'}
 					/>
 					<label htmlFor='tab-settings'>Settings</label>
 
@@ -79,25 +82,18 @@ class ToolArea extends React.Component
 ToolArea.propTypes =
 {
 	advancedMode   : PropTypes.bool,
-	toolarea     : PropTypes.object.isRequired,
+	currentToolTab : PropTypes.string.isRequired,
-	setToolTab   : PropTypes.func.isRequired
+	setToolTab     : PropTypes.func.isRequired,
+	unread         : PropTypes.number.isRequired
 };
 
-const mapStateToProps = (state) =>
+const mapStateToProps = (state) => ({
-{
+	currentToolTab : state.toolarea.currentToolTab,
-	return {
+	unread         : state.toolarea.unread
-		toolarea : state.toolarea
+});
-	};
-};
 
-const mapDispatchToProps = (dispatch) =>
+const mapDispatchToProps = {
-{
+	setToolTab : toolTabActions.setToolTab
-	return {
-		setToolTab : (toolTab) =>
-		{
-			dispatch(stateActions.setToolTab(toolTab));
-		}
-	};
 };
 
 const ToolAreaContainer = connect(

app/lib/redux/reducers/toolarea.js

@@ -1,7 +1,8 @@
 const initialState =
 {
 	toolAreaOpen   : false,
-	currentToolTab : 'chat' // chat, settings, users
+	currentToolTab : 'chat', // chat, settings, users
+	unread         : 0
 };
 
 const toolarea = (state = initialState, action) =>
@@ -11,15 +12,27 @@ const toolarea = (state = initialState, action) =>
 		case 'TOGGLE_TOOL_AREA':
 		{
 			const toolAreaOpen = !state.toolAreaOpen;
+			const unread = toolAreaOpen && state.currentToolTab === 'chat' ? 0 : state.unread;
 
-			return { ...state, toolAreaOpen };
+			return { ...state, toolAreaOpen, unread };
 		}
 
 		case 'SET_TOOL_TAB':
 		{
 			const { toolTab } = action.payload;
+			const unread = toolTab === 'chat' ? 0 : state.unread;
 
-			return { ...state, currentToolTab: toolTab };
+			return { ...state, currentToolTab: toolTab, unread };
+		}
+
+		case 'ADD_NEW_RESPONSE_MESSAGE':
+		{
+			if (state.toolAreaOpen && state.currentToolTab === 'chat') 
+			{
+				return state;
+			}
+
+			return { ...state, unread: state.unread + 1 };
 		}
 
 		default: