Filtro de mensajes por stream

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" }}
+        />
       </>
     );
   }