Update list of items when an item is selected

Question

I'm building a React/Redux livechat application that has a layout of a sidebar and a main area. The sidebar contains a list of incoming requests that can be selected to show a preview of the chat in the main area. When an item is selected , a socket connection gets created and the application fetches a preview of the chat. However when a button is clicked to accept the chat a new view gets rendered that displays more information about the selected item with more actions that can be performed such as continuing the conversation. The selected item is also removed from the list of incoming requests.

I tried storing the ID of the selected items in an array and updating the sidebar based on that array. And when an item gets clicked, the ID of the item gets dispatched to the reducer which filters the conversation object which returns the selected item that gets rendered in the main area.

However, I haven't been able to update the list of incoming requests after a chat gets accepted so that the only items left could still be previewed and accepted and the list could also get updated when there are new incoming requests.

How do I structure my Redux store to efficiently manage this situation.

Examples of end result: jivochat.com agent area.

Thanks.

Answer 1

You could implement this behavior as follows:

• "accept chat" button in the main area calls an action.
• chat list reducer should handle this action.
• chat list reducer maintains three arrays:
  • incomingChatRequests (list of objects, received through websocket or AJAX)
  • acceptedChatRequestIDs (click on "accept chat" adds element to this array)
  • pendingChatRequests (computed: incomingChatRequests.filter(req => !acceptedChatRequestIDs.includes(req.ID))
• component sidebar chat list should render pendingChatRequests.