Do not count system messages for unread

package.json

@@ -24,8 +24,8 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "ci": "npm run lint && npm run test:coverage && npm run build",
-    "ts:watch": "tsc --build . --watch --preserveWatchOutput",
-    "ts": "tsc --build .",
+    "ts:watch": "tsc -p . --watch --preserveWatchOutput",
+    "ts": "tsc -p .",
     "clean": "rimraf lib/ tsconfig.tsbuildinfo build/*"
   },
   "babel": {

src/client/actions/PeerActions.test.ts

@@ -107,8 +107,8 @@ describe('PeerActions', () => {
         const payload = 'test'
         const object = JSON.stringify({ payload })
         peer.emit('data', Buffer.from(object, 'utf-8'))
-        const { messages } = store.getState()
-        expect(messages[messages.length - 1]).toEqual({
+        const { list } = store.getState().messages
+        expect(list[list.length - 1]).toEqual({
           userId: 'user2',
           timestamp: jasmine.any(String),
           image: undefined,

src/client/components/App.tsx

@@ -19,6 +19,7 @@ export interface AppProps {
   init: () => void
   notifications: Record<string, Notification>
   messages: Message[]
+  messagesCount: number
   peers: Record<string, Peer.Instance>
   sendMessage: (message: TextMessage) => void
   streams: Record<string, AddStreamPayload>
@@ -62,6 +63,7 @@ export default class App extends React.PureComponent<AppProps, AppState> {
       dismissAlert,
       notifications,
       messages,
+      messagesCount,
       onSendFile,
       peers,
       sendMessage,
@@ -75,7 +77,7 @@ export default class App extends React.PureComponent<AppProps, AppState> {
       <div className="app">
         <Toolbar
           chatVisible={this.state.chatVisible}
-          messages={messages}
+          messagesCount={messagesCount}
           onToggleChat={this.handleToggleChat}
           onSendFile={onSendFile}
           stream={streams[constants.ME]}

src/client/components/Chat.tsx

@@ -1,8 +1,9 @@
-import classnames from 'classnames'
+import Input from './Input'
+import PropTypes from 'prop-types'
 import React from 'react'
+import classnames from 'classnames'
 import { Message as MessageType } from '../actions/ChatActions'
 import { TextMessage } from '../actions/PeerActions'
-import Input from './Input'
 
 export interface MessageProps {
   message: MessageType

src/client/components/Toolbar.test.tsx

@@ -21,7 +21,7 @@ describe('components/Toolbar', () => {
         chatVisible={this.props.chatVisible}
         onToggleChat={this.props.onToggleChat}
         onSendFile={this.props.onSendFile}
-        messages={this.props.messages}
+        messagesCount={this.props.messagesCount}
         stream={this.state.stream || this.props.stream}
       />
     }
@@ -44,7 +44,7 @@ describe('components/Toolbar', () => {
           chatVisible
           onToggleChat={onToggleChat}
           onSendFile={onSendFile}
-          messages={[]}
+          messagesCount={1}
           stream={{ userId: '', stream: mediaStream, url }}
         />,
         div,

src/client/components/Toolbar.tsx

@@ -1,7 +1,6 @@
-import React, { ReactEventHandler, ChangeEvent } from 'react'
 import classnames from 'classnames'
+import React from 'react'
 import screenfull from 'screenfull'
-import { Message } from '../actions/ChatActions'
 import { AddStreamPayload } from '../actions/StreamActions'
 
 const hidden = {
@@ -9,7 +8,7 @@ const hidden = {
 }
 
 export interface ToolbarProps {
-  messages: Message[]
+  messagesCount: number
   stream: AddStreamPayload
   onToggleChat: () => void
   onSendFile: (file: File) => void
@@ -30,7 +29,7 @@ extends React.PureComponent<ToolbarProps, ToolbarState> {
   constructor(props: ToolbarProps) {
     super(props)
     this.state = {
-      readMessages: props.messages.length,
+      readMessages: props.messagesCount,
       camDisabled: false,
       micMuted: false,
       fullScreenEnabled: false,
@@ -79,12 +78,12 @@ extends React.PureComponent<ToolbarProps, ToolbarState> {
   }
   handleToggleChat = () => {
     this.setState({
-      readMessages: this.props.messages.length,
+      readMessages: this.props.messagesCount,
     })
     this.props.onToggleChat()
   }
   render () {
-    const { messages, stream } = this.props
+    const { messagesCount, stream } = this.props
 
     return (
       <div className="toolbar active">
@@ -93,7 +92,7 @@ extends React.PureComponent<ToolbarProps, ToolbarState> {
             on: this.props.chatVisible,
           })}
           data-blink={!this.props.chatVisible &&
-            messages.length > this.state.readMessages}
+            messagesCount > this.state.readMessages}
           title="Chat"
         >
           <span className="icon icon-question_answer" />

src/client/containers/App.tsx

@@ -13,7 +13,8 @@ function mapStateToProps (state: State) {
     peers: state.peers,
     alerts: state.alerts,
     notifications: state.notifications,
-    messages: state.messages,
+    messages: state.messages.list,
+    messagesCount: state.messages.count,
     active: state.active,
   }
 }

src/client/reducers/messages.test.ts

@@ -12,7 +12,7 @@ describe('reducers/messages', () => {
       }
       let state = messages(undefined, {type: 'test'} as any)
       state = messages(state, ChatActions.addMessage(payload))
-      expect(state).toEqual([payload])
+      expect(state.list).toEqual([payload])
     })
   })
 

src/client/reducers/messages.ts

@@ -2,9 +2,15 @@ import * as constants from '../constants'
 import { Message, MessageAddAction } from '../actions/ChatActions'
 import { NotificationAddAction } from '../actions/NotifyActions'
 
-export type MessagesState = Message[]
+export interface MessagesState {
+  list: Message[]
+  count: number
+}
 
-const defaultState: MessagesState = []
+const defaultState: MessagesState = {
+  list: [],
+  count: 0,
+}
 
 function convertNotificationToMessage(action: NotificationAddAction): Message {
   return {
@@ -19,12 +25,15 @@ export default function messages (
 ): MessagesState {
   switch (action.type) {
     case constants.NOTIFY:
-      return [
-      ...state,
-      convertNotificationToMessage(action),
-    ]
+      return {
+        ...state,
+        list: [...state.list, convertNotificationToMessage(action)],
+      }
     case constants.MESSAGE_ADD:
-      return [...state, action.payload]
+      return {
+        count: state.count + 1,
+        list: [...state.list, action.payload],
+      }
     default:
       return state
   }

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "composite": true,
+    "composite": false,
     "declaration": true,
     "declarationMap": true,
     "inlineSourceMap": true,