convert ManageCoursePage from class to function with hooks

src/components/courses/ManageCoursePage.js

@@ -1,14 +1,12 @@
-import React from "react";
+import React, { useEffect } 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";
 
-class ManageCoursePage extends React.Component {
-  componentDidMount() {
-    const { courses, authors, actions } = this.props;
-
+function ManageCoursePage({ courses, authors, actions }) {
+  useEffect(() => {
     if (courses.length === 0) {
       actions.loadCourses().catch((error) => {
         alert("Loading courses failed. " + error);
@@ -20,15 +18,13 @@ class ManageCoursePage extends React.Component {
         alert("Loading authors failed. " + error);
       });
     }
-  }
+  }, []);
 
-  render() {
-    return (
-      <>
-        <h2>Manage course</h2>
-      </>
-    );
-  }
+  return (
+    <>
+      <h2>Manage course</h2>
+    </>
+  );
 }
 
 ManageCoursePage.propTypes = {