Chat movido a modulo propio

2 files changed, 168 insertions, 152 deletions

diff --git a/src/App.js b/src/App.js
index 3260705..028b82f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import { render } from "react-dom";
 import {
   Container,
   Header,
@@ -7,30 +6,14 @@ import {
   Grid,
   Segment,
   List,
-  Input,
   Message,
   Dropdown
 } from "semantic-ui-react";
 import "fomantic-ui-css/semantic.min.css";
-import { w3cwebsocket as W3CWebSocket } from "websocket";
-import Moment from "react-moment";
-import "moment/locale/es";
 import "./App.css";
 import StreamInfo from "./StreamInfo";
+import Chat from "./Chat";
 
-const client = new W3CWebSocket("wss://radio.bienvenidoainternet.org/daemon/");
-const chatColors = [
-  "grey",
-  "red",
-  "pink",
-  "orange",
-  "yellow",
-  "green",
-  "teal",
-  "blue",
-  "purple",
-  "black"
-];
 class App extends Component {
   constructor(props) {
     super(props);
@@ -38,18 +21,12 @@ class App extends Component {
       ready: false,
       response: {},
       history: [],
-      chat: [],
-      chatMessage: "",
       infoUpdate: {},
       currentSong: "",
       streamsAvailable: [],
       multipleSources: false,
-      selectedStream: 0,
-      chatUserCount: 0,
-      isChatOnline: false
+      selectedStream: 0
     };
-    this.handleOnChange = this.handleOnChange.bind(this);
-    this.sendMessage = this.sendMessage.bind(this);
     this.streamCount = 0;
   }
 
@@ -67,25 +44,6 @@ class App extends Component {
     return prevCount === this.streamCount;
   }
 
-  addMessage(message, color, own = false, sender = "") {
-    var ts = new Date();
-    this.setState(
-      prevState => ({
-        chat: [
-          ...prevState.chat,
-          { content: message, color: color, own, timestamp: ts, author: sender }
-        ],
-        chatMessage: ""
-      }),
-      () => {
-        let chatContainer = document.getElementById("chatContainer");
-        if (chatContainer != null) {
-          chatContainer.scrollTop = chatContainer.scrollHeight;
-        }
-      }
-    );
-  }
-
   log(object) {
     if (process.env.NODE_ENV === "development") {
       console.log(object);
@@ -111,70 +69,6 @@ class App extends Component {
     }
   }
 
-  sendMessage() {
-    const { chatMessage } = this.state;
-    client.send("MSG:1:" + chatMessage);
-    this.addMessage(chatMessage, "black", true);
-    this.setState({ chatMessage: "" });
-  }
-
-  componentWillMount() {
-    client.onopen = () => {
-      //console.info("[Chat] Connected to BaiTV Chat!");
-      this.setState({ isChatOnline: true });
-    };
-    client.onmessage = message => {
-      //console.info("[Chat] Message: " + message.data);
-      this.processChatMessage(message.data);
-    };
-    client.onerror = () => {
-      this.setState({ isChatOnline: false });
-      this.addMessage("Ha ocurrido un error conectándose al chat.", "red");
-      //console.error("[Chat] Ha ocurrido un error");
-    };
-  }
-
-  translateColon(msg) {
-    return msg ? msg.replace(/%3A/g, ":") : "";
-  }
-
-  processChatMessage(line) {
-    console.log("<< " + line);
-    const args = line.split(":");
-    switch (args[0]) {
-      case "MSG":
-        this.addMessage(this.translateColon(args[2]), chatColors[args[1]]);
-        break;
-      case "FMSG":
-        this.addMessage(
-          this.translateColon(args[3]),
-          chatColors[args[2]],
-          false,
-          args[1]
-        );
-        break;
-      case "WELCOME":
-        this.addMessage("Conectado al chat, " + args[1], "green");
-        break;
-      case "COUNT":
-        this.setState({ chatUserCount: args[1] });
-        break;
-      case "FLOOD":
-        this.addMessage(
-          "Error: Estas enviando mensajes demasido rápido!",
-          "red"
-        );
-        break;
-      default:
-        console.error("[Chat] Unsupported command " + args[0]);
-        break;
-    }
-  }
-
-  handleOnChange(e, data) {
-    this.setState({ chatMessage: data.value });
-  }
-
   compareSongs() {
     const {
       currentSong,
@@ -307,13 +201,9 @@ class App extends Component {
       ready,
       response,
       history,
-      chat,
-      chatMessage,
       streamsAvailable,
       multipleSources,
-      selectedStream,
-      chatUserCount,
-      isChatOnline
+      selectedStream
     } = this.state;
     const isOnline = response.source !== undefined;
 
@@ -411,45 +301,7 @@ class App extends Component {
                 </div>
               </Grid.Column>
               <Grid.Column width={10}>
-                <Header as="h3">
-                  Chat
-                  <Header.Subheader>{`Usuarios en el chat: ${chatUserCount}`}</Header.Subheader>
-                </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.content}
-                        </span>
-                      </List.Item>
-                    ))}
-                  </List>
-                </div>
-                <Input
-                  fluid
-                  size="mini"
-                  action={{
-                    content: "Enviar",
-                    onClick: () => {
-                      this.sendMessage();
-                    },
-                    disabled: !isChatOnline
-                  }}
-                  placeholder=""
-                  value={chatMessage}
-                  onChange={this.handleOnChange}
-                  style={{ marginTop: "0.75em" }}
-                  maxLength={128}
-                  onKeyUp={e => {
-                    let char = e.which || e.keyCode;
-                    if (char === 13) {
-                      this.sendMessage();
-                    }
-                  }}
-                  disabled={!isChatOnline}
-                />
+                <Chat />
               </Grid.Column>
             </Grid.Row>
           </Grid>
diff --git a/src/Chat.js b/src/Chat.js
new file mode 100644
index 0000000..175797a
--- /dev/null
+++ b/src/Chat.js
@@ -0,0 +1,164 @@
+import React, { Component } from "react";
+import { w3cwebsocket as W3CWebSocket } from "websocket";
+import { Header, List, Input } from "semantic-ui-react";
+import Moment from "react-moment";
+import "moment/locale/es";
+
+class Chat extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      chat: [],
+      chatMessage: "",
+      chatUserCount: 0,
+      isChatOnline: false
+    };
+    this.client = {};
+    this.chatColors = [
+      "grey",
+      "red",
+      "pink",
+      "orange",
+      "yellow",
+      "green",
+      "teal",
+      "blue",
+      "purple",
+      "black"
+    ];
+    this.handleOnChange = this.handleOnChange.bind(this);
+    this.sendMessage = this.sendMessage.bind(this);
+  }
+
+  handleOnChange(e, data) {
+    this.setState({ chatMessage: data.value });
+  }
+
+  translateColon(msg) {
+    return msg ? msg.replace(/%3A/g, ":") : "";
+  }
+
+  addMessage(message, color, own = false, sender = "") {
+    var ts = new Date();
+    this.setState(
+      prevState => ({
+        chat: [
+          ...prevState.chat,
+          { content: message, color: color, own, timestamp: ts, author: sender }
+        ],
+        chatMessage: ""
+      }),
+      () => {
+        let chatContainer = document.getElementById("chatContainer");
+        if (chatContainer != null) {
+          chatContainer.scrollTop = chatContainer.scrollHeight;
+        }
+      }
+    );
+  }
+
+  componentWillMount() {
+    this.client = new W3CWebSocket(
+      "wss://radio.bienvenidoainternet.org/daemon/"
+    );
+    this.client.onopen = () => {
+      this.setState({ isChatOnline: true });
+    };
+    this.client.onmessage = message => {
+      this.processChatMessage(message.data);
+    };
+    this.client.onerror = () => {
+      this.setState({ isChatOnline: false });
+      this.addMessage("Ha ocurrido un error conectándose al chat.", "red");
+    };
+  }
+
+  sendMessage() {
+    const { chatMessage } = this.state;
+    this.client.send("MSG:1:" + chatMessage);
+    this.addMessage(chatMessage, "black", true);
+    this.setState({ chatMessage: "" });
+  }
+
+  processChatMessage(line) {
+    console.log("<< " + line);
+    const args = line.split(":");
+    switch (args[0]) {
+      case "MSG":
+        this.addMessage(this.translateColon(args[2]), this.chatColors[args[1]]);
+        break;
+      case "FMSG":
+        this.addMessage(
+          this.translateColon(args[3]),
+          this.chatColors[args[2]],
+          false,
+          args[1]
+        );
+        break;
+      case "WELCOME":
+        this.addMessage("Conectado al chat, " + args[1], "green");
+        break;
+      case "COUNT":
+        this.setState({ chatUserCount: args[1] });
+        break;
+      case "FLOOD":
+        this.addMessage(
+          "Error: Estas enviando mensajes demasido rápido!",
+          "red"
+        );
+        break;
+      default:
+        console.error("[Chat] Unsupported command " + args[0]);
+        break;
+    }
+  }
+
+  render() {
+    const { chat, chatMessage, chatUserCount, isChatOnline } = this.state;
+    return (
+      <>
+        <Header as="h3">
+          Chat
+          <Header.Subheader>{`Usuarios en el chat: ${chatUserCount}`}</Header.Subheader>
+        </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.content}
+                </span>
+              </List.Item>
+            ))}
+          </List>
+        </div>
+        <Input
+          fluid
+          size="mini"
+          action={{
+            content: "Enviar",
+            onClick: () => {
+              this.sendMessage();
+            },
+            disabled: !isChatOnline
+          }}
+          placeholder=""
+          value={chatMessage}
+          onChange={this.handleOnChange}
+          style={{ marginTop: "0.75em" }}
+          maxLength={128}
+          onKeyUp={e => {
+            let char = e.which || e.keyCode;
+            if (char === 13) {
+              this.sendMessage();
+            }
+          }}
+          disabled={!isChatOnline}
+        />
+      </>
+    );
+  }
+}
+
+export default Chat;