Deviopath › React

Chat with Unread Counts

Hard · Reducers

Build a chat with channels and unread counts. Goal: practise useReducer for the chat state.

At the start #general is open and read, and the 2 messages in #random (see INITIAL_MESSAGES) are unread.

- One <button className="channel" data-channel="..."> per channel in CHANNELS, with its name. With unread messages it also contains <span className="badge">2</span> (the unread count).

- Show <h2>#general</h2> and the open channel's messages as <li> items ("author: text") in <ul className="messages">.

- Clicking a channel opens it and marks only its messages as read.

- Each "Incoming" click delivers the next message from INCOMING. In the open channel it is read at once; otherwise it adds to that channel's unread count. When all are delivered, the button is disabled.

Next: Shortest Path Finder