Created
April 26, 2017 09:29
-
-
Save jonayGodoy/dfd1d0aeff414e7e8afd8cbe1223180c to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, {PropTypes} from 'react'; | |
| import {connect} from 'react-redux'; | |
| import * as courseActions from '../../actions/courseActions'; | |
| import {bindActionCreators} from 'redux'; | |
| import CourseForm from './CourseForm'; | |
| import toastr from 'toastr'; | |
| export class ManagerCoursePage extends React.Component { | |
| constructor(props, context) { | |
| super(props, context); | |
| this.state = { | |
| course: Object.assign({}, this.props.course), | |
| errors: {}, | |
| saving: false | |
| }; | |
| this.updateCourseState = this.updateCourseState.bind(this); | |
| this.saveCourse = this.saveCourse.bind(this); | |
| } | |
| updateCourseState(event){ | |
| const field = event.target.name; | |
| let course = this.state.course; | |
| course[field] = event.target.value; | |
| return this.setState({course: course}); | |
| } | |
| courseFormIsValid(){ | |
| let formIsValid = true; | |
| let errors = {}; | |
| if(this.state.course.title.length < 5){ | |
| errors.title = 'Title must be at least 5 characters.'; | |
| formIsValid = false; | |
| } | |
| this.setState({errors: errors}); | |
| return formIsValid; | |
| } | |
| saveCourse(event){ | |
| event.preventDefault(); | |
| if(!this.courseFormIsValid()){ | |
| return; | |
| } | |
| this.setState({saving: true}); | |
| this.props.actions.saveCourse(this.state.course) | |
| .then(() => this.redirect()) | |
| .catch(error => { | |
| toastr.error(error); | |
| this.setState({saving: false}); | |
| }); | |
| } | |
| redirect(){ | |
| this.setState({saving: false}); | |
| toastr.success('Course saved'); | |
| this.context.router.push('/courses'); | |
| } | |
| render(){ | |
| return ( | |
| <div> | |
| <CourseForm | |
| allAuthors={this.props.authors} | |
| onChange={this.updateCourseState} | |
| onSave={this.saveCourse} | |
| course={this.state.course} | |
| errors ={this.state.errors} | |
| saving={this.state.saving} | |
| /> | |
| </div> | |
| ); | |
| } | |
| } | |
| ManagerCoursePage.propTypes = { | |
| //courses: PropTypes.array.isRequired, | |
| //actions : PropTypes.object.isRequired | |
| course: PropTypes.object.isRequired, | |
| authors: PropTypes.array.isRequired, | |
| actions: PropTypes.object.isRequired | |
| }; | |
| ManagerCoursePage.contextTypes = { | |
| router: PropTypes.object | |
| }; | |
| function mapStateToProps(state, ownProps) { | |
| let course = { | |
| id: '', | |
| watchHref: '', | |
| title: '', | |
| authorId: '', | |
| length: '', | |
| category: '' | |
| }; | |
| const authorsFormattedForDropdown = state.authors.map(author => { | |
| return { | |
| value : author.id, | |
| text: author.firstName +" "+author.lastName | |
| }; | |
| }); | |
| return { | |
| course: course, | |
| authors: authorsFormattedForDropdown | |
| }; | |
| } | |
| function mapDispatchToProps(dispatch){ | |
| return { | |
| actions: bindActionCreators(courseActions, dispatch) | |
| }; | |
| } | |
| export default connect(mapStateToProps, mapDispatchToProps)(ManagerCoursePage); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment