ManageCoursePage state

src/components/courses/ManageCoursePage.js

@@ -1,11 +1,16 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { loadCourses } from "../../redux/actions/courseActions";
 import { loadAuthors } from "../../redux/actions/authorActions";
 import PropTypes from "prop-types";
 import { bindActionCreators } from "redux";
+import CourseForm from "./CourseForm";
+import { newCourse } from "../../../tools/mockData";
+
+function ManageCoursePage({ courses, authors, actions, ...props }) {
+  const [course, setCourse] = useState({ ...props.course });
+  const [errors, setErrors] = useState({});
 
-function ManageCoursePage({ courses, authors, actions }) {
   useEffect(() => {
     if (courses.length === 0) {
       actions.loadCourses().catch((error) => {
@@ -20,14 +25,11 @@ function ManageCoursePage({ courses, authors, actions }) {
     }
   }, []);
 
-  return (
+  return <CourseForm course={course} errors={errors} authors={authors} />;
-    <>
-      <h2>Manage course</h2>
-    </>
-  );
 }
 
 ManageCoursePage.propTypes = {
+  course: PropTypes.object.isRequired,
   courses: PropTypes.array.isRequired,
   authors: PropTypes.array.isRequired,
   actions: PropTypes.object.isRequired
@@ -35,6 +37,7 @@ ManageCoursePage.propTypes = {
 
 function mapStateToProps(state) {
   return {
+    course: newCourse,
     courses: state.courses,
     authors: state.authors
   };