ManageCoursePage - handleSave

src/components/courses/ManageCoursePage.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
-import { loadCourses } from "../../redux/actions/courseActions";
+import { loadCourses, saveCourse } from "../../redux/actions/courseActions";
 import { loadAuthors } from "../../redux/actions/authorActions";
 import PropTypes from "prop-types";
 import { bindActionCreators } from "redux";
@@ -33,12 +33,18 @@ function ManageCoursePage({ courses, authors, actions, ...props }) {
     }));
   }
 
+  function handleSave(event) {
+    event.preventDefault();
+    actions.saveCourse(course);
+  }
+
   return (
     <CourseForm
       course={course}
       errors={errors}
       authors={authors}
       onChange={handleChange}
+      onSave={handleSave}
     />
   );
 }
@@ -63,7 +69,8 @@ function mapDispatchToProps(dispatch) {
     actions: bindActionCreators(
       {
         loadCourses,
-        loadAuthors
+        loadAuthors,
+        saveCourse
       },
       dispatch
     )

src/redux/actions/actionTypes.js

@@ -1,3 +1,5 @@
 export const CREATE_COURSE = "CREATE_COURSE";
 export const LOAD_COURSES_SUCCESS = "LOAD_COURSES_SUCCESS";
 export const LOAD_AUTHORS_SUCCESS = "LOAD_AUTHORS_SUCCESS";
+export const CREATE_COURSE_SUCCESS = "CREATE_COURSE_SUCCESS";
+export const UPDATE_COURSE_SUCCESS = "UPDATE_COURSE_SUCCESS";

src/redux/actions/courseActions.js

@@ -1,14 +1,18 @@
 import * as types from "./actionTypes";
 import * as courseApi from "../../api/courseApi";
 
-export function createCourse(course) {
-  return { type: types.CREATE_COURSE, course };
-}
-
 function loadCoursesSuccess(courses) {
   return { type: types.LOAD_COURSES_SUCCESS, courses };
 }
 
+export function createCourseSuccess(course) {
+  return { type: types.CREATE_COURSE_SUCCESS, course };
+}
+
+export function updateCourseSuccess(course) {
+  return { type: types.UPDATE_COURSE_SUCCESS, course };
+}
+
 export function loadCourses() {
   return function (dispatch) {
     return courseApi
@@ -21,3 +25,19 @@ export function loadCourses() {
       });
   };
 }
+
+export function saveCourse(course) {
+  //eslint-disable-next-line no-unused-vars
+  return function (dispatch, getState) {
+    return courseApi
+      .saveCourse(course)
+      .then((savedCourse) => {
+        course.id
+          ? dispatch(updateCourseSuccess(savedCourse))
+          : dispatch(createCourseSuccess(savedCourse));
+      })
+      .catch((error) => {
+        throw error;
+      });
+  };
+}

src/redux/reducers/courseReducer.js

@@ -3,12 +3,17 @@ import initialState from "./initialState";
 
 export default function courseReducer(state = initialState.courses, action) {
   switch (action.type) {
-    case types.CREATE_COURSE:
-      return [...state, { ...action.course }];
-
     case types.LOAD_COURSES_SUCCESS:
       return action.courses;
 
+    case types.CREATE_COURSE_SUCCESS:
+      return [...state, { ...action.course }];
+
+    case types.UPDATE_COURSE_SUCCESS:
+      return state.map((course) =>
+        course.id === action.course.id ? action.course : course
+      );
+
     default:
       return state;
   }