...
 
Commits (3)
......@@ -3,6 +3,25 @@
flex: 1;
display: flex;
flex-direction: column;
padding: .5rem;
box-sizing: border-box;
}
/* LOGIN */
.google-login {
align-self: center;
background-color: #E8453C;
padding: 1rem;
cursor: pointer;
border-radius: .5rem;
color: white;
font-size: 1.25rem;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.google-login:hover {
box-shadow: .25rem .25rem .12rem lightcoral;
}
/* HEADER */
......
......@@ -7,9 +7,6 @@ import MessageForm from './components/MessageForm';
class App extends Component {
state = {
user: {
name: 'Alexander Kotov'
},
messages: [
{
body: 'Welcome',
......@@ -39,13 +36,31 @@ class App extends Component {
}
render() {
return (
const user = this.state.user
let app = (
<div id="chat">
<Header user={this.state.user} />
<Header user={user} onLogout={this.onLogout}/>
<Messages messages={this.state.messages} />
<MessageForm onSubmit={this.sendMessage} />
</div>
);
)
return user ? app : (
<button onClick={this.onLogin} className="google-login">
Login with Google
</button>
)
}
onLogin = () => {
this.setState({user: {
name: 'Alexander'
}})
}
onLogout = () => {
this.setState({user: null})
}
}
......
......@@ -7,7 +7,7 @@ const Header = (props) => {
<img src="" alt="" />
<span className="name">{props.user.name}</span>
</div>
<button className="logout" onclick="logout()">Logout</button>
<button className="logout" onClick={props.onLogout}>Logout</button>
</header>
)
}
......
import React, { Component } from 'react'
class MessageForm extends Component {
state = {}
onSubmitHandler = (event) => {
event.preventDefault()
console.log('[MessageForm]', 'onSubmitHandler')
this.props.onSubmit({
body: 'Let us ...'
this.props.onSubmit(this.state)
this.setState({body: ''})
}
onChange = (event) => {
this.setState({
body: event.target.value
})
}
......@@ -16,7 +22,11 @@ class MessageForm extends Component {
id="message-form"
onSubmit={this.onSubmitHandler}
autoComplete="off">
<input type="text" name="message" />
<input
type="text"
name="message"
onChange={this.onChange}
value={this.state.body} />
<button type="submit">
Send
</button>
......
......@@ -5,6 +5,7 @@ html, body, input, form {
html {
font-size: 20px;
height: 100%;
}
body, #root {
......