Add files badge to the ToolArea

app/lib/components/ToolArea/ToolArea.jsx

@@ -18,7 +18,8 @@ class ToolArea extends React.Component
 	{
 		const {
 			currentToolTab,
-			unread,
+			unreadMessages,
+			unreadFiles,
 			setToolTab
 		} = this.props;
 
@@ -38,8 +39,8 @@ class ToolArea extends React.Component
 					<label htmlFor='tab-chat'>
 						Chat
 						
-						{unread > 0 && (
-							<span className='badge'>{unread}</span>
+						{unreadMessages > 0 && (
+							<span className='badge'>{unreadMessages}</span>
 						)}
 					</label>
 
@@ -54,7 +55,13 @@ class ToolArea extends React.Component
 						onChange={() => setToolTab('files')}
 						checked={currentToolTab === 'files'}
 					/>
-					<label htmlFor='tab-files'>Files</label>
+					<label htmlFor='tab-files'>
+						Files
+
+						{unreadFiles > 0 && (
+							<span className='badge'>{unreadFiles}</span>
+						)}
+					</label>
 
 					<div className='tab'>
 						<FileSharing />
@@ -102,12 +109,14 @@ ToolArea.propTypes =
 	advancedMode   : PropTypes.bool,
 	currentToolTab : PropTypes.string.isRequired,
 	setToolTab     : PropTypes.func.isRequired,
-	unread         : PropTypes.number.isRequired
+	unreadMessages : PropTypes.number.isRequired,
+	unreadFiles    : PropTypes.number.isRequired
 };
 
 const mapStateToProps = (state) => ({
 	currentToolTab : state.toolarea.currentToolTab,
-	unread         : state.toolarea.unread
+	unreadMessages : state.toolarea.unreadMessages,
+	unreadFiles    : state.toolarea.unreadFiles
 });
 
 const mapDispatchToProps = {

app/lib/components/ToolArea/ToolAreaButton.jsx

@@ -50,7 +50,7 @@ const mapStateToProps = (state) =>
 	return {
 		toolAreaOpen : state.toolarea.toolAreaOpen,
 		visible      : state.room.toolbarsVisible,
-		unread       : state.toolarea.unread
+		unread       : state.toolarea.unreadMessages + state.toolarea.unreadFiles
 	};
 };
 

app/lib/redux/reducers/toolarea.js

@@ -2,7 +2,8 @@ const initialState =
 {
 	toolAreaOpen   : false,
 	currentToolTab : 'chat', // chat, settings, users
-	unread         : 0
+	unreadMessages : 0,
+	unreadFiles    : 0
 };
 
 const toolarea = (state = initialState, action) =>
@@ -12,17 +13,18 @@ const toolarea = (state = initialState, action) =>
 		case 'TOGGLE_TOOL_AREA':
 		{
 			const toolAreaOpen = !state.toolAreaOpen;
-			const unread = toolAreaOpen && state.currentToolTab === 'chat' ? 0 : state.unread;
+			const unreadMessages = toolAreaOpen && state.currentToolTab === 'chat' ? 0 : state.unreadMessages;
 
-			return { ...state, toolAreaOpen, unread };
+			return { ...state, toolAreaOpen, unreadMessages };
 		}
 
 		case 'SET_TOOL_TAB':
 		{
 			const { toolTab } = action.payload;
-			const unread = toolTab === 'chat' ? 0 : state.unread;
+			const unreadMessages = toolTab === 'chat' ? 0 : state.unreadMessages;
+			const unreadFiles = toolTab === 'files' ? 0 : state.unreadFiles;
 
-			return { ...state, currentToolTab: toolTab, unread };
+			return { ...state, currentToolTab: toolTab, unreadMessages, unreadFiles };
 		}
 
 		case 'ADD_NEW_RESPONSE_MESSAGE':
@@ -32,7 +34,17 @@ const toolarea = (state = initialState, action) =>
 				return state;
 			}
 
-			return { ...state, unread: state.unread + 1 };
+			return { ...state, unreadMessages: state.unreadMessages + 1 };
+		}
+
+		case 'ADD_FILE':
+		{
+			if (state.toolAreaOpen && state.currentToolTab === 'files')
+			{
+				return state;
+			}
+
+			return { ...state, unreadFiles: state.unreadFiles + 1 };
 		}
 
 		default: