From 3a7b7054e7e8f4a5ce026f639f13ac99ae23d421 Mon Sep 17 00:00:00 2001 From: Awais Ansari <79941147+awais-ansari@users.noreply.github.com> Date: Wed, 28 Feb 2024 18:04:02 +0500 Subject: [PATCH] fix: user content unavailable content issue for learner (#674) --- .../NavigationBar/CourseTabsNavigation.jsx | 32 +----- src/components/NavigationBar/data/api.js | 14 +-- src/components/NavigationBar/data/thunks.js | 4 +- .../ContentUnavailable.jsx} | 10 +- src/discussions/data/hooks.js | 2 + src/discussions/data/selectors.js | 12 +- .../discussions-home/DiscussionsHome.jsx | 107 ++++++++---------- 7 files changed, 75 insertions(+), 106 deletions(-) rename src/discussions/{course-content-unavailable/CourseContentUnavailable.jsx => content-unavailable/ContentUnavailable.jsx} (88%) diff --git a/src/components/NavigationBar/CourseTabsNavigation.jsx b/src/components/NavigationBar/CourseTabsNavigation.jsx index 9d4af37d7..603343739 100644 --- a/src/components/NavigationBar/CourseTabsNavigation.jsx +++ b/src/components/NavigationBar/CourseTabsNavigation.jsx @@ -1,30 +1,21 @@ -import React, { useEffect } from 'react'; -import PropTypes from 'prop-types'; +import React from 'react'; import classNames from 'classnames'; -import { useDispatch, useSelector } from 'react-redux'; +import { useSelector } from 'react-redux'; import { useIntl } from '@edx/frontend-platform/i18n'; -import fetchTab from './data/thunks'; import Tabs from './tabs/Tabs'; import messages from './messages'; import './navBar.scss'; -const CourseTabsNavigation = ({ - activeTab, className, courseId, rootSlug, -}) => { - const dispatch = useDispatch(); +const CourseTabsNavigation = () => { const intl = useIntl(); const tabs = useSelector(state => state.courseTabs.tabs); - useEffect(() => { - dispatch(fetchTab(courseId, rootSlug)); - }, [courseId]); - return ( -
+
{!!tabs.length && ( ( {title} @@ -45,17 +36,4 @@ const CourseTabsNavigation = ({ ); }; -CourseTabsNavigation.propTypes = { - activeTab: PropTypes.string, - className: PropTypes.string, - rootSlug: PropTypes.string, - courseId: PropTypes.string.isRequired, -}; - -CourseTabsNavigation.defaultProps = { - activeTab: undefined, - className: null, - rootSlug: 'outline', -}; - export default React.memo(CourseTabsNavigation); diff --git a/src/components/NavigationBar/data/api.js b/src/components/NavigationBar/data/api.js index 9135129bf..fcc7937a9 100644 --- a/src/components/NavigationBar/data/api.js +++ b/src/components/NavigationBar/data/api.js @@ -5,15 +5,12 @@ import { getApiBaseUrl } from '../../../data/constants'; export const getCourseMetadataApiUrl = (courseId) => `${getApiBaseUrl()}/api/course_home/course_metadata/${courseId}`; -function normalizeCourseHomeCourseMetadata(metadata, rootSlug) { +function normalizeCourseHomeCourseMetadata(metadata) { const data = camelCaseObject(metadata); return { ...data, tabs: data.tabs.map(tab => ({ - // The API uses "courseware" as a slug for both courseware and the outline tab. - // If needed, we switch it to "outline" here for - // use within the MFE to differentiate between course home and courseware. - slug: tab.tabId === 'courseware' ? rootSlug : tab.tabId, + slug: tab.tabId === 'courseware' ? 'outline' : tab.tabId, title: tab.title, url: tab.url, })), @@ -21,10 +18,9 @@ function normalizeCourseHomeCourseMetadata(metadata, rootSlug) { }; } -export async function getCourseHomeCourseMetadata(courseId, rootSlug) { +export async function getCourseHomeCourseMetadata(courseId) { const url = getCourseMetadataApiUrl(courseId); - // don't know the context of adding timezone in url. hence omitting it - // url = appendBrowserTimezoneToUrl(url); const { data } = await getAuthenticatedHttpClient().get(url); - return normalizeCourseHomeCourseMetadata(data, rootSlug); + + return normalizeCourseHomeCourseMetadata(data); } diff --git a/src/components/NavigationBar/data/thunks.js b/src/components/NavigationBar/data/thunks.js index d9ffad4d2..64f7f3b22 100644 --- a/src/components/NavigationBar/data/thunks.js +++ b/src/components/NavigationBar/data/thunks.js @@ -9,11 +9,11 @@ import { fetchTabSuccess, } from './slice'; -export default function fetchTab(courseId, rootSlug) { +export default function fetchTab(courseId) { return async (dispatch) => { dispatch(fetchTabRequest({ courseId })); try { - const courseHomeCourseMetadata = await getCourseHomeCourseMetadata(courseId, rootSlug); + const courseHomeCourseMetadata = await getCourseHomeCourseMetadata(courseId); if (!courseHomeCourseMetadata.courseAccess.hasAccess) { dispatch(fetchTabDenied({ courseId })); } else { diff --git a/src/discussions/course-content-unavailable/CourseContentUnavailable.jsx b/src/discussions/content-unavailable/ContentUnavailable.jsx similarity index 88% rename from src/discussions/course-content-unavailable/CourseContentUnavailable.jsx rename to src/discussions/content-unavailable/ContentUnavailable.jsx index db636dbbd..a0bd90a77 100644 --- a/src/discussions/course-content-unavailable/CourseContentUnavailable.jsx +++ b/src/discussions/content-unavailable/ContentUnavailable.jsx @@ -13,7 +13,7 @@ import selectCourseTabs from '../../components/NavigationBar/data/selectors'; import { useIsOnDesktop, useIsOnXLDesktop } from '../data/hooks'; import messages from '../messages'; -const CourseContentUnavailable = ({ subTitleMessage }) => { +const ContentUnavailable = ({ subTitleMessage }) => { const intl = useIntl(); const isOnDesktop = useIsOnDesktop(); const isOnXLDesktop = useIsOnXLDesktop(); @@ -31,7 +31,9 @@ const CourseContentUnavailable = ({ subTitleMessage }) => { })} > -

{intl.formatMessage(messages.contentUnavailableTitle)}

+

+ {intl.formatMessage(messages.contentUnavailableTitle)} +

{intl.formatMessage(subTitleMessage)}