diff options
| -rw-r--r-- | src/Chat.js | 57 |
1 files changed, 44 insertions, 13 deletions
diff --git a/src/Chat.js b/src/Chat.js index 7f74a27..4117183 100644 --- a/src/Chat.js +++ b/src/Chat.js @@ -1,6 +1,6 @@ import React, { Component } from "react"; import { w3cwebsocket as W3CWebSocket } from "websocket"; -import { Header, List, Input } from "semantic-ui-react"; +import { Header, List, Input, Checkbox } from "semantic-ui-react"; import Moment from "react-moment"; import "moment/locale/es"; @@ -11,7 +11,8 @@ class Chat extends Component { chat: [], chatMessage: "", chatUserCount: 0, - isChatOnline: false + isChatOnline: false, + filterMessages: false }; this.client = {}; this.chatColors = [ @@ -124,7 +125,28 @@ class Chat extends Component { } render() { - const { chat, chatMessage, chatUserCount, isChatOnline } = this.state; + const { + chat, + chatMessage, + chatUserCount, + isChatOnline, + filterMessages + } = this.state; + const { stream } = this.props; + + const MessageItem = ({ message, index }) => { + return ( + <List.Item key={index}> + [<Moment format="HH:mm:ss" date={message.timestamp} />]{" "} + <span className={`ui text ${message.color}`}> + {`${message.stream && "[" + message.stream + "]"} ${ + message.content + }`} + </span> + </List.Item> + ); + }; + return ( <> <Header as="h3"> @@ -133,16 +155,15 @@ class Chat extends Component { </Header> <div id="chatContainer"> <List> - {chat.map((message, i) => ( - <List.Item key={i}> - [<Moment format="HH:mm:ss" date={message.timestamp} />]{" "} - <span className={`ui text ${message.color}`}> - {`${message.stream && "[" + message.stream + "]"} ${ - message.content - }`} - </span> - </List.Item> - ))} + {chat.map((message, i) => + filterMessages ? ( + message.stream === stream.server_name && ( + <MessageItem message={message} index={i} /> + ) + ) : ( + <MessageItem message={message} index={i} /> + ) + )} </List> </div> <Input @@ -168,6 +189,16 @@ class Chat extends Component { }} disabled={!isChatOnline} /> + <Checkbox + checked={filterMessages} + label="Filtrar mensajes de usuarios escuchando stream actual" + onClick={() => { + this.setState(prevState => ({ + filterMessages: !prevState.filterMessages + })); + }} + style={{ marginTop: "0.5em" }} + /> </> ); } |