ToastContainer

src/components/App.js

@@ -6,6 +6,8 @@ import Header from "./common/Header";
 import PageNotFound from "./PageNotFound";
 import CoursesPage from "./courses/CoursesPage";
 import ManageCoursePage from "./courses/ManageCoursePage";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 function App() {
   return (
@@ -19,6 +21,7 @@ function App() {
         <Route path="/course" component={ManageCoursePage} />
         <Route component={PageNotFound} />
       </Switch>
+      <ToastContainer autoClose={3000} />
     </div>
   );
 }

src/components/courses/ManageCoursePage.js

@@ -7,10 +7,12 @@ import { bindActionCreators } from "redux";
 import CourseForm from "./CourseForm";
 import { newCourse } from "../../../tools/mockData";
 import Spinner from "../common/Spinner";
+import { toast } from "react-toastify";
 
 function ManageCoursePage({ courses, authors, actions, history, ...props }) {
   const [course, setCourse] = useState({ ...props.course });
   const [errors, setErrors] = useState({});
+  const [saving, setSaving] = useState(false);
 
   useEffect(() => {
     if (courses.length === 0) {
@@ -38,7 +40,9 @@ function ManageCoursePage({ courses, authors, actions, history, ...props }) {
 
   function handleSave(event) {
     event.preventDefault();
+    setSaving(true);
     actions.saveCourse(course).then(() => {
+      toast.success("Course saved.");
       history.push("/courses");
     });
   }
@@ -52,6 +56,7 @@ function ManageCoursePage({ courses, authors, actions, history, ...props }) {
       authors={authors}
       onChange={handleChange}
       onSave={handleSave}
+      saving={saving}
     />
   );
 }