60 lines
1.3 KiB
JavaScript
60 lines
1.3 KiB
JavaScript
import React from "react";
|
|
import { connect } from "react-redux";
|
|
import * as courseActions from "../../redux/actions/courseActions";
|
|
import PropTypes from "prop-types";
|
|
|
|
class CoursesPage extends React.Component {
|
|
state = {
|
|
course: {
|
|
title: ""
|
|
}
|
|
};
|
|
|
|
handleChange = (event) => {
|
|
const course = { ...this.state.course, title: event.target.value };
|
|
this.setState({ course });
|
|
};
|
|
|
|
handleSubmit = (event) => {
|
|
event.preventDefault();
|
|
this.props.createCourse(this.state.course);
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<form onSubmit={this.handleSubmit}>
|
|
<h2>Courses</h2>
|
|
<h3>Add Course</h3>
|
|
<input
|
|
type="text"
|
|
onChange={this.handleChange}
|
|
value={this.state.course.title}
|
|
/>
|
|
<input type="submit" value="Save" />
|
|
{this.props.courses.map((course) => (
|
|
<div key={course.title}>{course.title}</div>
|
|
))}
|
|
</form>
|
|
);
|
|
}
|
|
}
|
|
|
|
CoursesPage.propTypes = {
|
|
createCourse: PropTypes.func.isRequired,
|
|
courses: PropTypes.array.isRequired
|
|
};
|
|
|
|
function mapStateToProps(state) {
|
|
return {
|
|
courses: state.courses
|
|
};
|
|
}
|
|
|
|
function mapDispatchToProps(dispatch) {
|
|
return {
|
|
createCourse: (course) => dispatch(courseActions.createCourse(course))
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(CoursesPage);
|