Chat movido a modulo propio

1 files changed, 4 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>