Notes

import React, { Component } from 'react';
import './App.css';
import firebase, { auth, provider } from './firebase.js';

class App extends Component {
constructor() {
super();
this.state = {
currentItem: '',
username: '',
description: '',
genero :'',
items: [],
user: null
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
}
handleChange(e) {
this.setState({
[e.target.name]: e.target.value
});
}
login() {
auth.signInWithPopup(provider)
.then((result) => {
const user = result.user;
this.setState({
user
});
});
}
logout() {
auth.signOut()
.then(() => {
this.setState({
user: null
});
});
}
handleSubmit(e) {
e.preventDefault();
const itemsRef = firebase.database().ref('items');
const item = {
title: this.state.currentItem,
user: this.state.user.displayName || this.state.user.email,
description :this.state.description,
genero : this.state.genero
}


itemsRef.push(item);


this.setState({
currentItem: '',
username: '',
description:'',
genero : ''
});
}
componentDidMount() {
auth.onAuthStateChanged((user) => {
if (user) {
this.setState({ user });
}
});
const itemsRef = firebase.database().ref('items');
itemsRef.on('value', (snapshot) => {
let items = snapshot.val();
let newState = [];
for (let item in items) {
newState.push({
id: item,
title: items[item].title,
user: items[item].user,
description : items[item].description ,
genero : items[item].genero
});
}
this.setState({
items: newState
});
});
}


removeItem(itemId) {
const itemRef = firebase.database().ref(`/items/${itemId}`);
itemRef.remove();
}

render() {
return (
<div className='app'>
<header className= " purple accent-2">
<div className="wrapper">
<h1>Fun Food Friends</h1>
{this.state.user ?
<button className="btn btn-large waves-effect waves-light btn-small red accent-3" onClick={this.logout} style ={{borderRadius : "10px", }} >Logout</button>
:
<p></p>
}
</div>
</header>
{this.state.user ?
<div>
<div className='user-profile'>
<img src={this.state.user.photoURL} />
</div>
<div className='container'>
<section className='add-item'>
<form onSubmit={this.handleSubmit}>


<div className = "input-field col s6" >
<input className ="user validate" type="text" name="username" onChange={this.handleChange} value={this.state.user.displayName || this.state.user.email} />
<label>Name </label>
</div>


<div className = "input-field col s6 activate" >
<input type="text" name="currentItem" onChange={this.handleChange} value={this.state.currentItem} />
<label>Objeto</label>
</div>


<div className="input-field col s6 activate ">
<input type="text" name ="description" onChange = {this.handleChange} value = {this.state.description} />
<label >Description</label>
</div>

<div className="input-field col s6 activate ">
<input type="text" name ="genero" onChange = {this.handleChange} value = {this.state.genero} />
<label >Genero</label>
</div>







<button className="btn btn-large waves-effect waves-light hoverable deep-purple accent-1 z-depth-3" style ={{borderRadius : "10px", }} >Add Item</button>
</form>
</section>

<section className='display-item'>
<div className="wrapper ">
<ul>
{this.state.items.map((item) => {
return (
<center><li key={item.id}>
<h3 className ="" >{item.title}</h3>

<p >Brought by: <b>{item.user}</b>
<p className="grey-text text-darken-1 "> Description: {item.description} </p>
{item.user === this.state.user.displayName || item.user === this.state.user.email ?
<button className =" btn btn-large waves-effect waves-light hoverable green accent-3 " onClick={this.login} style={{borderRadius:"15px" ,letterSpacing: '5px' , color: 'black' }} onClick={() => this.removeItem(item.id)}>Remove Item</button>
: null}
</p>

</li></center>
)
})}
</ul>
</div>
</section>
</div>
</div>
:
<p>
<center className = "NoConnected" >
<h2> Para acceder debes estar logeado o no podras entrar</h2>
<p></p>
<p></p>

{this.state.user ?
<p></p>
:
<button
style={{
width: "150px",
borderRadius: "15px",
letterSpacing: "1.5px",
marginTop: "1rem"
}}
type="submit"
className="btn btn-large waves-effect waves-light hoverable red accent-3"
onClick = {this.login}
>
Login
</button>
}
</center>


</p>
}

</div>
);
}
}
export default App;