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,16 +18,14 @@ class ManageCoursePage extends React.Component {
         alert("Loading authors failed. " + error);
       });
     }
-  }
+  }, []);
 
-  render() {
   return (
     <>
       <h2>Manage course</h2>
     </>
   );
 }
-}
 
 ManageCoursePage.propTypes = {
   courses: PropTypes.array.isRequired,