Skip to content

Topic5 react #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Facundo97Maldonado wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Topic5 react #4

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4f28dfb
Topic 5 - Exercises 1 and 2.
Facundo97Maldonado May 10, 2017
0cc3958
Topic 5 Done
Facundo97Maldonado May 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 224 additions & 0 deletions 05-UI-ReactJS/Topic5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
<!DOCTYPE html>
<html class="no-js" lang="">

<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Topic 5</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>
<script>
class movie{

constructor(title, year, duration){
this.title = title;
this.year = year;
this.duration = duration;
}

}
</script>

<script type="text/babel">
class Movie extends React.Component{
render(){
return <li>
Title: {this.props.title}
| Year: {this.props.year}
| Duration {this.props.duration}
<br />
</li>
}
}

class MoviesAdministration extends React.Component{
constructor(props){
super(props);
this.state = {
title: '',
year: '',
duration: '',
movieList: [],
newTitle: '',
newYear: '',
newDuration: '',
isEdited: false,
};
this.handleChangeTitle = this.handleChangeTitle.bind(this),
this.handleChangeYear = this.handleChangeYear.bind(this),
this.handleChangeDuration = this.handleChangeDuration.bind(this),

this.handleTitleEdit = this.handleTitleEdit.bind(this),
this.handleYearEdit = this.handleYearEdit.bind(this),
this.handleDurationEdit = this.handleDurationEdit.bind(this),

this.addMovie = this.addMovie.bind(this),
this.changeFormStyle = this.changeFormStyle.bind(this),
this.editMovie = this.editMovie.bind(this),
this.deleteMovie = this.deleteMovie.bind(this);
}
//Here starts handlers to set the state of a movie *
handleChangeTitle(event) {
this.setState({
title: event.target.value
})
}
handleChangeYear(event){
this.setState({
year: event.target.value
})
}
handleChangeDuration(event){
this.setState({
duration: event.target.value
})
}
addMovie(event) {
event.preventDefault();
let movie = new Movie();
movie.title = this.state.title;
movie.year = this.state.year;
movie.duration = this.state.duration;
this.state.movieList.push(movie);
Copy link

@riledhel riledhel May 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

es mejor no cambiar directamente this.state, usar una variable auxiliar y después llamar a this.setState()

this.setState({
title: '',
year: '',
duration: '',
movieList: this.state.movieList
})
}
//Here it ends *


//Handlers to the movie edition
handleTitleEdit(event){
this.setState({
newTitle: event.target.value
})
}
handleYearEdit(event){
this.setState({
newYear: event.target.value
})
}
handleDurationEdit(event){
this.setState({
newDuration: event.target.value
})
}
//This is what have to be done when the user press the save button
editMovie(index){
let editedMovie = new Movie();
editedMovie.title = this.state.newTitle;
editedMovie.year = this.state.newYear;
editedMovie.duration = this.state.newDuration;
console.log(editedMovie);
this.state.movieList.splice(index,1,editedMovie);
Copy link

@riledhel riledhel May 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lo mismo acá

this.setState({
movieList: this.state.movieList,

//This should clear the inputs
newTitle: '',
newYear: '',
newDuration: '',
isEdited: false,
})

//This hide the edit section after save it. Its wrong anyway
Copy link

@riledhel riledhel May 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Por favor hace un refactor de esto

document.getElementById(index + 'd').style.display = 'none';
document.getElementById(index).style.display = 'none';
document.getElementById(index + 'a').style.display = 'none';
document.getElementById(index + 'b').style.display = 'none';
document.getElementById(index + 'c').style.display = 'none';
}

//This show the inputs to edit a movie
changeFormStyle(index){
/*this.setState({
isEdited: true
})*/
document.getElementById(index + 'd').style.display = 'block';
document.getElementById(index).style.display = 'block';
document.getElementById(index + 'a').style.display = 'block';
document.getElementById(index + 'b').style.display = 'block';
document.getElementById(index + 'c').style.display = 'block';
}

//Function to delete a movie
deleteMovie(index){
this.state.movieList.splice(index, 1) //key that is going to be removed, number of items that are going to be removed
this.setState({
movieList: this.state.movieList
})
}


render() {
return (
<div className="movieList">
<form onSubmit={this.addMovie}>
<div>
Title:
<input placeholder="Enter the title" type="text" value={this.state.title}
onChange={this.handleChangeTitle} />
<br />
Year:
<input placeholder="Enter the year" type="number" value={this.state.year}
onChange={this.handleChangeYear} />
<br />
Duration:
<input placeholder="Enter the duration" type="time" value={this.state.duration}
onChange={this.handleChangeDuration} />
<br />
<button type="submit">Add the movie</button>
</div>
</form>
<div>
<ul>
{this.state.movieList.map((movie, index) => {
return (
<div>
<div>
<Movie key={index} title={movie.title} year={movie.year} duration={movie.duration}></Movie>
<button className="MoviesAdministration" onClick={() => this.changeFormStyle(index)}>
Edit this Movie
</button>
<button className="MoviesAdministration" onClick={() => this.deleteMovie(index)}>
Delete this Movie
</button>
</div>
<div>
<p id={index + 'd'}>Complete the inputs</p>
<input id={index} type="text" placeholder="Enter the new title"
value={this.state.newTitle} onChange={this.handleTitleEdit} />
<br />
<input id={index + 'a'} type="number" placeholder="Enter the new year"
value={this.state.newYear} onChange={this.handleYearEdit} />
<br />
<input id={index + 'b'} type="time" value={this.state.newDuration}
onChange={this.handleDurationEdit}
/>
<br />
<button id={index + 'c'} onClick={() => this.editMovie(index)}>Save</button>
</div>
</div>
)
})}
</ul>
</div>
</div>
);
}
}

ReactDOM.render(<MoviesAdministration />, root);
</script>
</body>
</html>