From 16439919077047aabcdf86f635825d7293c1609f Mon Sep 17 00:00:00 2001
From: Lucas Chuairi Cruz <lucas.cruz@corp.globo.com>
Date: Wed, 22 Aug 2018 17:55:48 -0300
Subject: [PATCH] Chat layout

---
 src/App.js                         | 30 ++++++++----
 src/components/Chat/index.js       | 19 ++++++++
 src/components/ChatHeader/index.js | 25 ++++++++++
 src/components/ChatList/index.js   | 20 ++++++++
 src/styles/css/Base.css            | 16 +++++++
 src/styles/css/Chat.css.map        |  1 +
 src/styles/css/ChatHeader.css      | 18 ++++++++
 src/styles/css/ChatHeader.css.map  |  1 +
 src/styles/css/ChatList.css        | 21 +++++++++
 src/styles/css/ChatList.css.map    |  1 +
 src/styles/css/ChatRoom.css        | 21 +++++++++
 src/styles/css/ChatRoom.css.map    |  1 +
 src/styles/css/base.css.map        |  1 +
 src/styles/css/index.css           | 73 ++++++++++++++++++++++++++++++
 src/styles/css/index.css.map       |  1 +
 src/styles/scss/Base.scss          | 16 +++++++
 src/styles/scss/ChatHeader.scss    | 18 ++++++++
 src/styles/scss/ChatList.scss      | 22 +++++++++
 src/styles/scss/ChatRoom.scss      | 22 +++++++++
 src/styles/scss/index.scss         |  4 ++
 20 files changed, 321 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Chat/index.js
 create mode 100644 src/components/ChatHeader/index.js
 create mode 100644 src/components/ChatList/index.js
 create mode 100644 src/styles/css/Base.css
 create mode 100644 src/styles/css/Chat.css.map
 create mode 100644 src/styles/css/ChatHeader.css
 create mode 100644 src/styles/css/ChatHeader.css.map
 create mode 100644 src/styles/css/ChatList.css
 create mode 100644 src/styles/css/ChatList.css.map
 create mode 100644 src/styles/css/ChatRoom.css
 create mode 100644 src/styles/css/ChatRoom.css.map
 create mode 100644 src/styles/css/base.css.map
 create mode 100644 src/styles/css/index.css
 create mode 100644 src/styles/css/index.css.map
 create mode 100644 src/styles/scss/Base.scss
 create mode 100644 src/styles/scss/ChatHeader.scss
 create mode 100644 src/styles/scss/ChatList.scss
 create mode 100644 src/styles/scss/ChatRoom.scss
 create mode 100644 src/styles/scss/index.scss

diff --git a/src/App.js b/src/App.js
index f1c4986..b8625a1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,22 @@
 import React, { Component } from 'react'
-import logo from './logo.svg'
-import './App.css'
+import './styles/css/index.css'
+import Chat from './components/Chat'
+import ChatList from './components/ChatList'
+import ChatHeader from './components/ChatHeader'
 
 class App extends Component {
   constructor() {
     super()
     this.state = {
       msg: '',
-      username: ''
+      username: 'lusac',
+      rooms: [
+        {name: 'sala 1'},
+        {name: 'sala 2'},
+        {name: 'sala 3'},
+        {name: 'sala 4'},
+        {name: 'sala 5'}
+      ]
     }
   }
 
@@ -91,14 +100,19 @@ class App extends Component {
     if (this.state.username) {
       return (
         <div>
-          <small>Olá {this.state.username}!</small>
-          <form onSubmit={this.onMsgSubmit.bind(this)}>
+          <div className="chat">
+            <ChatHeader username={this.state.username} />
+            <ChatList rooms={this.state.rooms}/>
+            <Chat />
+          </div>
+
+          {/* <form onSubmit={this.onMsgSubmit.bind(this)}>
             <label>
               Msg:
               <input type="text" value={this.state.msg} onChange={this.onMsgChange.bind(this)} />
             </label>
             <input type="submit" value="Submit" />
-          </form>
+          </form> */}
         </div>
       )
     }
@@ -107,10 +121,6 @@ class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
         {this.renderChooseName()}
         {this.renderChatRooms()}
       </div>
diff --git a/src/components/Chat/index.js b/src/components/Chat/index.js
new file mode 100644
index 0000000..1ad65b1
--- /dev/null
+++ b/src/components/Chat/index.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+class Chat extends React.Component {
+  render() {
+    return (
+      <div className="chat-room">
+        <div className="chat-room__messages">
+          oie
+        </div>
+
+        <div className="chat-room__input__wrapper">
+          <input placeholder="escreva uma mensagem" className="chat-room__input"/>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Chat;
diff --git a/src/components/ChatHeader/index.js b/src/components/ChatHeader/index.js
new file mode 100644
index 0000000..68ffd9a
--- /dev/null
+++ b/src/components/ChatHeader/index.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class ChatHeader extends React.Component {
+  render() {
+    return (
+      <div className="chat-header">
+        <div className="chat-header__profile">
+            Olá {this.props.username}!
+        </div>
+
+        <div className="chat-header__chat-name">
+          chat 1
+        </div>
+      </div>
+    )
+  }
+}
+
+ChatHeader.propTypes = {
+  username: PropTypes.string,
+  chatName: PropTypes.string
+};
+
+export default ChatHeader;
diff --git a/src/components/ChatList/index.js b/src/components/ChatList/index.js
new file mode 100644
index 0000000..92e4cbe
--- /dev/null
+++ b/src/components/ChatList/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class ChatList extends React.Component {
+  render() {
+    return (
+      <div className="chat-list">
+        {this.props.rooms.map(function(room, i) {
+          return (<span key={i} className="chat-list__item">{room.name}</span>)
+        })}
+      </div>
+    )
+  }
+}
+
+ChatList.propTypes = {
+  rooms: PropTypes.array
+};
+
+export default ChatList;
diff --git a/src/styles/css/Base.css b/src/styles/css/Base.css
new file mode 100644
index 0000000..7e0d3b7
--- /dev/null
+++ b/src/styles/css/Base.css
@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.chat {
+  display: grid;
+  grid-template-areas: "header header header" "list room room";
+}
+
+/*# sourceMappingURL=Base.css.map */
diff --git a/src/styles/css/Chat.css.map b/src/styles/css/Chat.css.map
new file mode 100644
index 0000000..fa05acd
--- /dev/null
+++ b/src/styles/css/Chat.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/Chat.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EAEA,qBACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA","file":"Chat.css"}
\ No newline at end of file
diff --git a/src/styles/css/ChatHeader.css b/src/styles/css/ChatHeader.css
new file mode 100644
index 0000000..3fb5f39
--- /dev/null
+++ b/src/styles/css/ChatHeader.css
@@ -0,0 +1,18 @@
+.chat-header {
+  height: 50px;
+  color: #FFF;
+  padding: 10px;
+  display: grid;
+  grid-area: header;
+  align-items: center;
+  background: cadetblue;
+  grid-template-areas: "header-profile header-chat-name header-chat-name";
+}
+.chat-header__profile {
+  grid-area: header-profile;
+}
+.chat-header__chat-name {
+  grid-area: header-chat-name;
+}
+
+/*# sourceMappingURL=ChatHeader.css.map */
diff --git a/src/styles/css/ChatHeader.css.map b/src/styles/css/ChatHeader.css.map
new file mode 100644
index 0000000..98f8777
--- /dev/null
+++ b/src/styles/css/ChatHeader.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/ChatHeader.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"ChatHeader.css"}
\ No newline at end of file
diff --git a/src/styles/css/ChatList.css b/src/styles/css/ChatList.css
new file mode 100644
index 0000000..64baaa8
--- /dev/null
+++ b/src/styles/css/ChatList.css
@@ -0,0 +1,21 @@
+.chat-list {
+  grid-area: list;
+  display: flex;
+  flex-direction: column;
+}
+.chat-list__item {
+  height: 50px;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #EEE;
+}
+.chat-list__item:hover {
+  background: #EFEFEF;
+}
+.chat-list__item:first-child {
+  border-top: 1px solid #EEE;
+}
+
+/*# sourceMappingURL=ChatList.css.map */
diff --git a/src/styles/css/ChatList.css.map b/src/styles/css/ChatList.css.map
new file mode 100644
index 0000000..21d5772
--- /dev/null
+++ b/src/styles/css/ChatList.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/ChatList.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"ChatList.css"}
\ No newline at end of file
diff --git a/src/styles/css/ChatRoom.css b/src/styles/css/ChatRoom.css
new file mode 100644
index 0000000..39ff801
--- /dev/null
+++ b/src/styles/css/ChatRoom.css
@@ -0,0 +1,21 @@
+.chat-room {
+  grid-area: room;
+  background: beige;
+  border: 1px solid #EEE;
+}
+.chat-room__messages {
+  height: 75%;
+  padding: 10px;
+}
+.chat-room__input {
+  width: 85%;
+  height: 100%;
+  outline: none;
+  padding: 10px;
+}
+.chat-room__input__wrapper {
+  height: 25%;
+  padding: 10px;
+}
+
+/*# sourceMappingURL=ChatRoom.css.map */
diff --git a/src/styles/css/ChatRoom.css.map b/src/styles/css/ChatRoom.css.map
new file mode 100644
index 0000000..93d3a17
--- /dev/null
+++ b/src/styles/css/ChatRoom.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/ChatRoom.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA","file":"ChatRoom.css"}
\ No newline at end of file
diff --git a/src/styles/css/base.css.map b/src/styles/css/base.css.map
new file mode 100644
index 0000000..aa026a4
--- /dev/null
+++ b/src/styles/css/base.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/Base.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,qBACE","file":"Base.css"}
\ No newline at end of file
diff --git a/src/styles/css/index.css b/src/styles/css/index.css
new file mode 100644
index 0000000..a605c24
--- /dev/null
+++ b/src/styles/css/index.css
@@ -0,0 +1,73 @@
+* {
+  box-sizing: border-box;
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.chat {
+  display: grid;
+  grid-template-areas: "header header header" "list room room";
+}
+
+.chat-header {
+  height: 50px;
+  color: #FFF;
+  padding: 10px;
+  display: grid;
+  grid-area: header;
+  align-items: center;
+  background: cadetblue;
+  grid-template-areas: "header-profile header-chat-name header-chat-name";
+}
+.chat-header__profile {
+  grid-area: header-profile;
+}
+.chat-header__chat-name {
+  grid-area: header-chat-name;
+}
+
+.chat-room {
+  grid-area: room;
+  background: beige;
+  border: 1px solid #EEE;
+}
+.chat-room__messages {
+  height: 75%;
+  padding: 10px;
+}
+.chat-room__input {
+  width: 85%;
+  height: 100%;
+  outline: none;
+  padding: 10px;
+}
+.chat-room__input__wrapper {
+  height: 25%;
+  padding: 10px;
+}
+
+.chat-list {
+  grid-area: list;
+  display: flex;
+  flex-direction: column;
+}
+.chat-list__item {
+  height: 50px;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #EEE;
+}
+.chat-list__item:hover {
+  background: #EFEFEF;
+}
+.chat-list__item:first-child {
+  border-top: 1px solid #EEE;
+}
+
+/*# sourceMappingURL=index.css.map */
diff --git a/src/styles/css/index.css.map b/src/styles/css/index.css.map
new file mode 100644
index 0000000..3c65279
--- /dev/null
+++ b/src/styles/css/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/Base.scss","../scss/ChatHeader.scss","../scss/ChatRoom.scss","../scss/ChatList.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,qBACE;;;ACbJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;ACfJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AClBN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE","file":"index.css"}
\ No newline at end of file
diff --git a/src/styles/scss/Base.scss b/src/styles/scss/Base.scss
new file mode 100644
index 0000000..5bdaa3f
--- /dev/null
+++ b/src/styles/scss/Base.scss
@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.chat {
+  display: grid;
+  grid-template-areas:
+    "header header header"
+    "list room room"
+}
\ No newline at end of file
diff --git a/src/styles/scss/ChatHeader.scss b/src/styles/scss/ChatHeader.scss
new file mode 100644
index 0000000..1469857
--- /dev/null
+++ b/src/styles/scss/ChatHeader.scss
@@ -0,0 +1,18 @@
+.chat-header {
+  height: 50px;
+  color: #FFF;
+  padding: 10px;
+  display: grid;
+  grid-area: header;
+  align-items: center;
+  background: cadetblue;
+  grid-template-areas: "header-profile header-chat-name header-chat-name";
+
+  &__profile {
+    grid-area: header-profile;
+  }
+
+  &__chat-name {
+    grid-area: header-chat-name;
+  }
+}
\ No newline at end of file
diff --git a/src/styles/scss/ChatList.scss b/src/styles/scss/ChatList.scss
new file mode 100644
index 0000000..e3484e5
--- /dev/null
+++ b/src/styles/scss/ChatList.scss
@@ -0,0 +1,22 @@
+.chat-list {
+  grid-area: list;
+  display: flex;
+  flex-direction: column;
+
+  &__item {
+    height: 50px;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #EEE;
+
+    &:hover {
+      background: #EFEFEF;
+    }
+
+    &:first-child {
+      border-top: 1px solid #EEE;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/scss/ChatRoom.scss b/src/styles/scss/ChatRoom.scss
new file mode 100644
index 0000000..dcc03c9
--- /dev/null
+++ b/src/styles/scss/ChatRoom.scss
@@ -0,0 +1,22 @@
+.chat-room {
+  grid-area: room;
+  background: beige;
+  border: 1px solid #EEE;
+
+  &__messages {
+    height: 75%;
+    padding: 10px;
+  }
+
+  &__input {
+    width: 85%;
+    height: 100%;
+    outline: none;
+    padding: 10px;
+
+    &__wrapper {
+      height: 25%;
+      padding: 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/scss/index.scss b/src/styles/scss/index.scss
new file mode 100644
index 0000000..9f05bc1
--- /dev/null
+++ b/src/styles/scss/index.scss
@@ -0,0 +1,4 @@
+@import 'Base';
+@import 'ChatHeader';
+@import 'ChatRoom';
+@import 'ChatList';
\ No newline at end of file