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>
This commit is contained in:
sundasnoreen12
2023-08-23 14:46:47 +05:00
committed by GitHub
parent 2e90e214b4
commit 2b9b3db5d3
2 changed files with 35 additions and 45 deletions

View File

@@ -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;

View File

@@ -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 />
</>
);