fix: user content unavailable content issue for learner (#674)

openedx · Feb 28, 2024 · 3a7b705 · 3a7b705
1 parent 6875165
commit 3a7b705
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 106 deletions.
diff --git 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 (
-    <div id="courseTabsNavigation" className={classNames('course-tabs-navigation px-4 bg-white', className)}>
+    <div id="courseTabsNavigation" className="course-tabs-navigation px-4 bg-white">
       {!!tabs.length && (
         <Tabs
           className="nav-underline-tabs"
@@ -33,7 +24,7 @@ const CourseTabsNavigation = ({
           {tabs.map(({ url, title, slug }) => (
             <a
               key={slug}
-              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === activeTab })}
+              className={classNames('nav-item flex-shrink-0 nav-link', { active: slug === 'discussion' })}
               href={url}
             >
               {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
@@ -5,26 +5,22 @@ 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,
     })),
     isMasquerading: data.originalUserIsStaff && !data.isStaff,
   };
 }
 
-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
@@ -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/...-unavailable/CourseContentUnavailable.jsx → ...ontent-unavailable/ContentUnavailable.jsx b/...-unavailable/CourseContentUnavailable.jsx → ...ontent-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 }) => {
       })}
       >
         <ContentUnavailableIcon />
-        <h3 className="pt-3 font-weight-bold text-primary-500 text-center">{intl.formatMessage(messages.contentUnavailableTitle)}</h3>
+        <h3 className="pt-3 font-weight-bold text-primary-500 text-center">
+          {intl.formatMessage(messages.contentUnavailableTitle)}
+        </h3>
         <p className="pb-2 text-gray-500 text-center">{intl.formatMessage(subTitleMessage)}</p>
         <Button onClick={redirectToDashboard} variant="outline-dark" className="font-size-14 py-2 px-2.5">
           {intl.formatMessage(messages.contentUnavailableAction)}
@@ -41,12 +43,12 @@ const CourseContentUnavailable = ({ subTitleMessage }) => {
   );
 };
 
-CourseContentUnavailable.propTypes = {
+ContentUnavailable.propTypes = {
   subTitleMessage: propTypes.shape({
     id: propTypes.string,
     defaultMessage: propTypes.string,
     description: propTypes.string,
   }).isRequired,
 };
 
-export default React.memo(CourseContentUnavailable);
+export default React.memo(ContentUnavailable);
diff --git a/src/discussions/data/hooks.js b/src/discussions/data/hooks.js
@@ -13,6 +13,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import { breakpoints, useWindowSize } from '@edx/paragon';
 
+import fetchTab from '../../components/NavigationBar/data/thunks';
 import { RequestStatus, Routes } from '../../data/constants';
 import { selectTopicsUnderCategory } from '../../data/selectors';
 import fetchCourseBlocks from '../../data/thunks';
@@ -79,6 +80,7 @@ export function useCourseDiscussionData(courseId) {
     async function fetchBaseData() {
       await dispatch(fetchCourseConfig(courseId));
       await dispatch(fetchCourseBlocks(courseId, authenticatedUser.username));
+      await dispatch(fetchTab(courseId));
     }
 
     fetchBaseData();

diff --git a/src/discussions/data/selectors.js b/src/discussions/data/selectors.js
@@ -76,10 +76,12 @@ export const selectIsUserLearner = createSelector(
     userIsCourseAdmin,
     userIsCourseStaff,
   ) => (
-    !userHasModerationPrivileges
-    && !userIsGroupTa
-    && !userIsStaff
-    && !userIsCourseAdmin
-    && !userIsCourseStaff
+    (
+      !userHasModerationPrivileges
+      && !userIsGroupTa
+      && !userIsStaff
+      && !userIsCourseAdmin
+      && !userIsCourseStaff
+    ) || false
   ),
 );
diff --git a/src/discussions/discussions-home/DiscussionsHome.jsx b/src/discussions/discussions-home/DiscussionsHome.jsx
@@ -12,10 +12,10 @@ import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import { Spinner } from '../../components';
 import selectCourseTabs from '../../components/NavigationBar/data/selectors';
-import { LOADING } from '../../components/NavigationBar/data/slice';
+import { LOADED } from '../../components/NavigationBar/data/slice';
 import { ALL_ROUTES, DiscussionProvider, Routes as ROUTES } from '../../data/constants';
 import DiscussionContext from '../common/context';
-import ContentUnavailable from '../course-content-unavailable/CourseContentUnavailable';
+import ContentUnavailable from '../content-unavailable/ContentUnavailable';
 import {
   useCourseDiscussionData, useIsOnDesktop, useRedirectToThread, useSidebarVisible,
 } from '../data/hooks';
@@ -80,55 +80,48 @@ const DiscussionsHome = () => {
   return (
     <Suspense fallback={(<Spinner />)}>
       <DiscussionContext.Provider value={discussionContextValue}>
-        {!enableInContextSidebar && (
-          <Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />
-        )}
+        {!enableInContextSidebar && (<Header courseOrg={org} courseNumber={courseNumber} courseTitle={courseTitle} />)}
         <main className="container-fluid d-flex flex-column p-0 w-100" id="main" tabIndex="-1">
-          {!enableInContextSidebar && <CourseTabsNavigation activeTab="discussion" courseId={courseId} />}
-          {(isEnrolled || !isUserLearner || enableInContextSidebar) && (
-          <div
-            className={classNames('header-action-bar bg-white position-sticky', {
-              'shadow-none border-light-300 border-bottom': enableInContextSidebar,
-            })}
-            ref={postActionBarRef}
-          >
+          {!enableInContextSidebar && <CourseTabsNavigation />}
+          {(isEnrolled || !isUserLearner) && (
             <div
-              className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
-                'pl-4 pr-2 py-0': enableInContextSidebar,
+              className={classNames('header-action-bar bg-white position-sticky', {
+                'shadow-none border-light-300 border-bottom': enableInContextSidebar,
               })}
+              ref={postActionBarRef}
             >
-              {!enableInContextSidebar && (
-              <NavigationBar />
-              )}
-              <PostActionsBar />
+              <div className={classNames('d-flex flex-row justify-content-between navbar fixed-top', {
+                'pl-4 pr-2 py-0': enableInContextSidebar,
+              })}
+              >
+                {!enableInContextSidebar && (<NavigationBar />)}
+                <PostActionsBar />
+              </div>
+              <DiscussionsRestrictionBanner />
             </div>
-            <DiscussionsRestrictionBanner />
-          </div>
           )}
-
           {provider === DiscussionProvider.LEGACY && (
-          <Suspense fallback={(<Spinner />)}>
-            <Routes>
-              {[
-                ROUTES.TOPICS.CATEGORY,
-                ROUTES.TOPICS.CATEGORY_POST,
-                ROUTES.TOPICS.CATEGORY_POST_EDIT,
-                ROUTES.TOPICS.TOPIC,
-                ROUTES.TOPICS.TOPIC_POST,
-                ROUTES.TOPICS.TOPIC_POST_EDIT,
-              ].map((route) => (
-                <Route
-                  key={route}
-                  path={route}
-                  element={<LegacyBreadcrumbMenu />}
-                />
-              ))}
-            </Routes>
-          </Suspense>
+            <Suspense fallback={(<Spinner />)}>
+              <Routes>
+                {[
+                  ROUTES.TOPICS.CATEGORY,
+                  ROUTES.TOPICS.CATEGORY_POST,
+                  ROUTES.TOPICS.CATEGORY_POST_EDIT,
+                  ROUTES.TOPICS.TOPIC,
+                  ROUTES.TOPICS.TOPIC_POST,
+                  ROUTES.TOPICS.TOPIC_POST_EDIT,
+                ].map((route) => (
+                  <Route
+                    key={route}
+                    path={route}
+                    element={<LegacyBreadcrumbMenu />}
+                  />
+                ))}
+              </Routes>
+            </Suspense>
           )}
-          {(courseStatus !== LOADING || enableInContextSidebar) && (
-          <div>
-            { isEnrolled === false && isUserLearner ? (
+          {(courseStatus === LOADED) && (
+            !isEnrolled && isUserLearner ? (
               <Suspense fallback={(<Spinner />)}>
                 <Routes>
                   {ALL_ROUTES.map((route) => (
@@ -140,18 +133,17 @@ const DiscussionsHome = () => {
                   ))}
                 </Routes>
               </Suspense>
-            )
-              : (
-                <div className="d-flex flex-row position-relative">
-                  <Suspense fallback={(<Spinner />)}>
-                    <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
-                  </Suspense>
-                  {displayContentArea && (
+            ) : (
+              <div className="d-flex flex-row position-relative">
+                <Suspense fallback={(<Spinner />)}>
+                  <DiscussionSidebar displaySidebar={displaySidebar} postActionBarRef={postActionBarRef} />
+                </Suspense>
+                {displayContentArea && (
                   <Suspense fallback={(<Spinner />)}>
                     <DiscussionContent />
                   </Suspense>
-                  )}
-                  {!displayContentArea && (
+                )}
+                {!displayContentArea && (
                   <Routes>
                     <>
                       {ROUTES.TOPICS.PATH.map(route => (
@@ -176,14 +168,11 @@ const DiscussionsHome = () => {
                       <Route path={ROUTES.LEARNERS.PATH} element={<EmptyLearners />} />
                     </>
                   </Routes>
-                  )}
-                </div>
-              )}
-          </div>
-          )}
-          {!enableInContextSidebar && (
-            <DiscussionsProductTour />
+                )}
+              </div>
+            )
           )}
+          {!enableInContextSidebar && (<DiscussionsProductTour />)}
         </main>
         {!enableInContextSidebar && <Footer />}
       </DiscussionContext.Provider>