diff --git a/client/modules/User/UserReducer.js b/client/modules/User/UserReducer.js index 3188abf..d64a79b 100644 --- a/client/modules/User/UserReducer.js +++ b/client/modules/User/UserReducer.js @@ -15,7 +15,7 @@ import { getColorFromUserIndex } from './components/ChatComponent/ChatComponent' import React from 'react'; // Initial State -const initialState = { data: [], user: null, currentStudyGroup: -1, chat: { messages: [] }, search: [] }; +const initialState = { data: [], user: null, currentStudyGroup: -1, chat: { messages: [], users: [] }, search: [] }; const UserReducer = (state = initialState, action) => { switch (action.type) { @@ -76,20 +76,33 @@ const UserReducer = (state = initialState, action) => { } case PREPARE_CHAT_MESSAGES: { const messages = []; + const usersInChat = []; for (let i = 0; i < action.messages.length; i++) { - messages.push(
{`${action.messages[i].author}: ${action.messages[i].messageContent}`}
); + let userIndex = usersInChat.indexOf(action.messages[i].author); + if (userIndex === -1) { + usersInChat.push(action.messages[i].author); + userIndex = usersInChat.length - 1; + } + + messages.push(
{`${action.messages[i].author}: ${action.messages[i].messageContent}`}
); } return { user: state.user, currentStudyGroup: state.currentStudyGroup, - chat: { messages }, + chat: { messages, usersInChat }, search: [], }; } case PREPARE_CHAT_MESSAGE: { - state.chat.messages.push(
{`${action.message.user}: ${action.message.message}`}
); + let userIndex = state.chat.users.indexOf(action.message.user); + if (userIndex === -1) { + state.chat.users.push(action.message.user); + userIndex = state.chat.users.length - 1; + } + + state.chat.messages.push(
{`${action.message.user}: ${action.message.message}`}
); return { user: state.user, currentStudyGroup: state.currentStudyGroup, diff --git a/client/modules/User/components/ChatComponent/ChatComponent.js b/client/modules/User/components/ChatComponent/ChatComponent.js index 999af62..1c10588 100644 --- a/client/modules/User/components/ChatComponent/ChatComponent.js +++ b/client/modules/User/components/ChatComponent/ChatComponent.js @@ -6,7 +6,13 @@ import io from 'socket.io-client'; import styles from './ChatComponent.css'; const COLORS = [ - 'Black', + 'DodgerBlue', + 'Crimson', + 'LimeGreen', + 'DarkOrange', + 'DarkOrchid', + 'Gold', + 'Navy', ]; // Ensure we have a color for every user, if we are out of colors just wrap back around.