From 86974b76a975ec24e1182ccff4c5172e57bf70da Mon Sep 17 00:00:00 2001
From: Bilal Qamar <59555732+BilalQamar95@users.noreply.github.com>
Date: Thu, 9 Feb 2023 16:45:37 +0500
Subject: [PATCH] Fixed broken "Pages and Resources" page (#446)

* fix: updated AppHeader call

* fix: AppHeader function signature changed to react component
---
 src/CourseAuthoringPage.jsx | 37 +++++++++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/CourseAuthoringPage.jsx b/src/CourseAuthoringPage.jsx
index adf8ca190..8c524c0be 100644
--- a/src/CourseAuthoringPage.jsx
+++ b/src/CourseAuthoringPage.jsx
@@ -14,20 +14,34 @@ import { getCourseAppsApiStatus, getLoadingStatus } from './pages-and-resources/
 import { RequestStatus } from './data/constants';
 import Loading from './generic/Loading';
 
-const AppHeader = (courseNumber, courseOrg, courseTitle, courseId) => (
+const AppHeader = ({
+  courseNumber, courseOrg, courseTitle, courseId,
+}) => (
   <Header
     courseNumber={courseNumber}
     courseOrg={courseOrg}
     courseTitle={courseTitle}
     courseId={courseId}
   />
-  );
+);
 
-  const AppFooter = () => (
-    <div className="mt-6">
-      <Footer />
-    </div>
-  );
+AppHeader.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  courseNumber: PropTypes.string,
+  courseOrg: PropTypes.string,
+  courseTitle: PropTypes.string.isRequired,
+};
+
+AppHeader.defaultProps = {
+  courseNumber: null,
+  courseOrg: null,
+};
+
+const AppFooter = () => (
+  <div className="mt-6">
+    <Footer />
+  </div>
+);
 
 const CourseAuthoringPage = ({ courseId, children }) => {
   const dispatch = useDispatch();
@@ -57,7 +71,14 @@ const CourseAuthoringPage = ({ courseId, children }) => {
       we shouldn't have the header and footer on these pages.
       This functionality will be removed in TNL-9591 */}
       {inProgress ? !pathname.includes('/editor/') && <Loading />
-        : <AppHeader courseNumber={courseNumber} courseOrg={courseOrg} courseTitle={courseTitle} courseId={courseId} />}
+        : (
+          <AppHeader
+            courseNumber={courseNumber}
+            courseOrg={courseOrg}
+            courseTitle={courseTitle}
+            courseId={courseId}
+          />
+    )}
       {children}
       {!inProgress && <AppFooter />}
     </div>