extract user names frm old message when they come in

This commit is contained in:
Ginger Wong 2020-08-15 18:41:31 -07:00
parent 703aa40271
commit 979651a925
3 changed files with 17 additions and 41 deletions

View File

@ -228,7 +228,6 @@ export default class ChatInput extends Component {
}; };
const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage); const placeholderText = generatePlaceholderText(inputEnabled, hasSentFirstChatMessage);
return ( return (
html` html`
<div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid"> <div id="message-input-container" class="shadow-md bg-gray-900 border-t border-gray-700 border-solid">

View File

@ -3,8 +3,7 @@ import htm from 'https://unpkg.com/htm?module';
// Initialize htm with Preact // Initialize htm with Preact
const html = htm.bind(h); const html = htm.bind(h);
import { getLocalStorage, setLocalStorage } from '../utils.js';
import { KEY_CHAT_FIRST_MESSAGE_SENT } from '../utils/chat.js';
import SOCKET_MESSAGE_TYPES from '../utils/socket-message-types.js'; import SOCKET_MESSAGE_TYPES from '../utils/socket-message-types.js';
import Message from './message.js'; import Message from './message.js';
import ChatInput from './chat-input.js'; import ChatInput from './chat-input.js';
@ -12,6 +11,7 @@ import { CALLBACKS } from '../websocket.js';
import { URL_CHAT_HISTORY, setVHvar, hasTouchScreen } from '../utils.js'; import { URL_CHAT_HISTORY, setVHvar, hasTouchScreen } from '../utils.js';
import { extraUserNamesFromMessageHistory } from '../utils/chat.js';
export default class Chat extends Component { export default class Chat extends Component {
constructor(props, context) { constructor(props, context) {
@ -59,7 +59,6 @@ export default class Chat extends Component {
this.websocket.addListener(CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED, this.receivedWebsocketMessage); this.websocket.addListener(CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED, this.receivedWebsocketMessage);
this.websocket.addListener(CALLBACKS.WEBSOCKET_DISCONNECTED, this.websocketDisconnected); this.websocket.addListener(CALLBACKS.WEBSOCKET_DISCONNECTED, this.websocketDisconnected);
} }
} }
// fetch chat history // fetch chat history
@ -72,22 +71,18 @@ export default class Chat extends Component {
return response.json(); return response.json();
}) })
.then(data => { .then(data => {
console.log("=====chat history data",data) // extra user names
const chatUserNames = extraUserNamesFromMessageHistory(data);
this.setState({ this.setState({
messages: data, messages: data,
chatUserNames,
}); });
// const formattedMessages = data.map(function (message) {
// return new Message(message);
// })
// this.vueApp.messages = formattedMessages.concat(this.vueApp.messages);
}) })
.catch(error => { .catch(error => {
// this.handleNetworkingError(`Fetch getChatHistory: ${error}`); // this.handleNetworkingError(`Fetch getChatHistory: ${error}`);
}); });
} }
sendUsernameChange(oldName, newName, image) { sendUsernameChange(oldName, newName, image) {
const nameChange = { const nameChange = {
type: SOCKET_MESSAGE_TYPES.NAME_CHANGE, type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
@ -98,8 +93,6 @@ export default class Chat extends Component {
this.websocket.send(nameChange); this.websocket.send(nameChange);
} }
receivedWebsocketMessage(message) { receivedWebsocketMessage(message) {
this.addMessage(message); this.addMessage(message);
// if (model.type === SOCKET_MESSAGE_TYPES.CHAT) { // if (model.type === SOCKET_MESSAGE_TYPES.CHAT) {
@ -158,40 +151,13 @@ export default class Chat extends Component {
image: userAvatarImage, image: userAvatarImage,
type: SOCKET_MESSAGE_TYPES.CHAT, type: SOCKET_MESSAGE_TYPES.CHAT,
}; };
// var message = new Message({
// body: content,
// author: username,
// image: userAvatarImage,
// type: SOCKET_MESSAGE_TYPES.CHAT,
// });
this.websocket.send(message); this.websocket.send(message);
// clear out things.
// const newStates = {
// inputValue: '',
// inputWarning: '',
// };
// this.formMessageInput.innerHTML = '';
// this.tagMessageFormWarning.innerText = '';
// const hasSentFirstChatMessage = getLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT);
// if (!this.state.hasSentFirstChatMessage) {
// newStates.hasSentFirstChatMessage = true;
// setLocalStorage(KEY_CHAT_FIRST_MESSAGE_SENT, true);
// // this.setChatPlaceholderText();
// }
// this.setState(newStates);
} }
disableChat() { disableChat() {
this.setState({ this.setState({
inputEnabled: false, inputEnabled: false,
}); });
// if (this.formMessageInput) {
// this.formMessageInput.contentEditable = false;
// this.formMessageInput.innerHTML = '';
// this.formMessageInput.setAttribute("placeholder", CHAT_PLACEHOLDER_OFFLINE);
// }
} }
enableChat() { enableChat() {
@ -219,7 +185,6 @@ export default class Chat extends Component {
} }
render(props, state) { render(props, state) {
const { username } = props; const { username } = props;
const { messages, inputEnabled, chatUserNames } = state; const { messages, inputEnabled, chatUserNames } = state;

View File

@ -181,3 +181,15 @@ export function generatePlaceholderText(isEnabled, hasSentFirstChatMessage) {
} }
return CHAT_PLACEHOLDER_OFFLINE; return CHAT_PLACEHOLDER_OFFLINE;
} }
export function extraUserNamesFromMessageHistory(messages) {
const list = [];
if (messages) {
messages.forEach(function(message) {
if (!list.includes(message.author)) {
list.push(message.author);
}
});
}
return list;
}