From 2b9b3db5d33dac54052222761ae337ed68f1d50a Mon Sep 17 00:00:00 2001
From: sundasnoreen12 <72802712+sundasnoreen12@users.noreply.github.com>
Date: Wed, 23 Aug 2023 14:46:47 +0500
Subject: [PATCH] refactor: refactor code by creating 1 instance of header
 instead of 3 (#1164)

* refactor: refactor code by creating single instance of header instead of 3

* refactor: refactor courseStatus comparsion code

---------

Co-authored-by: SundasNoreen <sundas.noreen@arbisoft.com>
---
 src/index.scss           |  2 ++
 src/tab-page/TabPage.jsx | 78 +++++++++++++++++-----------------------
 2 files changed, 35 insertions(+), 45 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index ede76bef6b..555c5b8f7e 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -4,6 +4,8 @@
 @import "~@edx/brand/paragon/overrides";
 
 @import "~@edx/frontend-component-footer/dist/footer";
+@import "~@edx/frontend-component-header/dist/index";
+
 
 #root {
   display: flex;
diff --git a/src/tab-page/TabPage.jsx b/src/tab-page/TabPage.jsx
index 5c2b692e11..3b9dea60c6 100644
--- a/src/tab-page/TabPage.jsx
+++ b/src/tab-page/TabPage.jsx
@@ -38,18 +38,6 @@ const TabPage = ({ intl, ...props }) => {
     title,
   } = useModel('courseHomeMeta', courseId);
 
-  if (courseStatus === 'loading') {
-    return (
-      <>
-        <Header />
-        <PageLoading
-          srMessage={intl.formatMessage(messages.loading)}
-        />
-        <Footer />
-      </>
-    );
-  }
-
   if (courseStatus === 'denied') {
     const redirectUrl = getAccessDeniedRedirectUrl(courseId, activeTabSlug, courseAccess, start);
     if (redirectUrl) {
@@ -57,41 +45,41 @@ const TabPage = ({ intl, ...props }) => {
     }
   }
 
-  // Either a success state or a denied state that wasn't redirected above (some tabs handle denied states themselves,
-  // like the outline tab handling unenrolled learners)
-  if (courseStatus === 'loaded' || courseStatus === 'denied') {
-    return (
-      <>
-        <Toast
-          action={toastBodyText ? {
-            label: toastBodyText,
-            href: toastBodyLink,
-          } : null}
-          closeLabel={intl.formatMessage(genericMessages.close)}
-          onClose={() => dispatch(setCallToActionToast({ header: '', link: null, link_text: null }))}
-          show={!!(toastHeader)}
-        >
-          {toastHeader}
-        </Toast>
-        {metadataModel === 'courseHomeMeta' && (<LaunchCourseHomeTourButton srOnly />)}
-        <Header
-          courseOrg={org}
-          courseNumber={number}
-          courseTitle={title}
-        />
-        <LoadedTabPage {...props} />
-        <Footer />
-      </>
-    );
-  }
-
-  // courseStatus 'failed' and any other unexpected course status.
   return (
     <>
-      <Header />
-      <p className="text-center py-5 mx-auto" style={{ maxWidth: '30em' }}>
-        {intl.formatMessage(messages.failure)}
-      </p>
+      {['loaded', 'denied'].includes(courseStatus) && (
+        <>
+          <Toast
+            action={toastBodyText ? {
+              label: toastBodyText,
+              href: toastBodyLink,
+            } : null}
+            closeLabel={intl.formatMessage(genericMessages.close)}
+            onClose={() => dispatch(setCallToActionToast({ header: '', link: null, link_text: null }))}
+            show={!!(toastHeader)}
+          >
+            {toastHeader}
+          </Toast>
+          {metadataModel === 'courseHomeMeta' && (<LaunchCourseHomeTourButton srOnly />)}
+        </>
+      )}
+
+      <Header courseOrg={org} courseNumber={number} courseTitle={title} />
+
+      {courseStatus === 'loading' && (
+        <PageLoading srMessage={intl.formatMessage(messages.loading)} />
+      )}
+
+      {['loaded', 'denied'].includes(courseStatus) && (
+        <LoadedTabPage {...props} />
+      )}
+
+      {/* courseStatus 'failed' and any other unexpected course status. */}
+      {(!['loading', 'loaded', 'denied'].includes(courseStatus)) && (
+        <p className="text-center py-5 mx-auto" style={{ maxWidth: '30em' }}>
+          {intl.formatMessage(messages.failure)}
+        </p>
+      )}
       <Footer />
     </>
   );