From ef0a2c63fd0039876009589fade1fa877670b100 Mon Sep 17 00:00:00 2001
From: Andrei <dswfcny7@mail.ru>
Date: Mon, 9 Jul 2018 09:39:27 +0300
Subject: [PATCH] work version

---
 src/components/Chat/Chat.js       | 53 +++++++++++++++++++++++++++++++
 src/components/Chat/index.js      |  1 +
 src/components/Message/Message.js |  6 ++++
 3 files changed, 60 insertions(+)
 create mode 100644 src/components/Chat/Chat.js
 create mode 100644 src/components/Chat/index.js
 create mode 100644 src/components/Message/Message.js

diff --git a/src/components/Chat/Chat.js b/src/components/Chat/Chat.js
new file mode 100644
index 0000000..b0414ba
--- /dev/null
+++ b/src/components/Chat/Chat.js
@@ -0,0 +1,53 @@
+import React, { Component } from "react";
+import Message from "../Message";
+import "./Chat.css";
+
+export default class Chat extends Component {
+  state = {
+    messages: [],
+    messageInput: ""
+  };
+
+  componentDidUpdate() {
+    let chatScroll = document.querySelector('.message-list');
+    chatScroll.scrollTop = chatScroll.scrollHeight;
+  }
+
+  render() {
+    const messages = this.state.messages.map((message, index) =>
+      <Message
+        key={index}
+        text={message.text}
+      />);
+
+    return <div className="chat">
+      <div className="message-list">
+        <div className="messages">
+          {messages}
+        </div>
+      </div>
+      <input className="input-message"
+             value={this.state.messageInput}
+             onChange={this.changeInputMessage}
+             onKeyPress={this.sendMessageOnEnter}
+      />
+    </div>;
+  }
+
+  changeInputMessage = event => {
+    this.setState({
+      messageInput: event.target.value
+    });
+  };
+
+  sendMessageOnEnter = event => {
+    if (event.key !== "Enter" || !this.state.messageInput) {
+      return;
+    }
+
+    this.setState((prevState, props) => ({
+      messages: [...prevState.messages, { "text": prevState.messageInput }],
+      messageInput: ""
+    }));
+  };
+}
diff --git a/src/components/Chat/index.js b/src/components/Chat/index.js
new file mode 100644
index 0000000..c21b661
--- /dev/null
+++ b/src/components/Chat/index.js
@@ -0,0 +1 @@
+export { default } from './Chat'
\ No newline at end of file
diff --git a/src/components/Message/Message.js b/src/components/Message/Message.js
new file mode 100644
index 0000000..47ee17e
--- /dev/null
+++ b/src/components/Message/Message.js
@@ -0,0 +1,6 @@
+import React from 'react'
+import './Message.css'
+
+export default ({text}) => {
+  return <span className="message">{text}</span>
+}