refactor: some refactoring

openedx · Oct 13, 2024 · 76aa86c · 76aa86c
1 parent f4124f0
commit 76aa86c
Show file tree

Hide file tree

Showing 17 changed files with 103 additions and 107 deletions.
diff --git a/src/CourseAuthoringPage.jsx b/src/CourseAuthoringPage.jsx
@@ -7,7 +7,7 @@ import {
 } from 'react-router-dom';
 import { StudioFooter } from '@edx/frontend-component-footer';
 import Header from './header';
-import { fetchCourseDetail } from './data/thunks';
+import { fetchCourseDetail, fetchWaffleFlags } from './data/thunks';
 import { useModel } from './generic/model-store';
 import NotFoundAlert from './generic/NotFoundAlert';
 import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
@@ -18,9 +18,12 @@ import Loading from './generic/Loading';
 
 const CourseAuthoringPage = ({ courseId, children }) => {
   const dispatch = useDispatch();
+  const STORE = useSelector(state => state);
+  console.log('STORE', STORE);
 
   useEffect(() => {
     dispatch(fetchCourseDetail(courseId));
+    dispatch(fetchWaffleFlags(courseId));
   }, [courseId]);
 
   useEffect(() => {

diff --git a/src/course-checklist/ChecklistSection/ChecklistItemBody.jsx b/src/course-checklist/ChecklistSection/ChecklistItemBody.jsx
@@ -10,7 +10,6 @@ import {
 import { useSelector } from 'react-redux';
 import { CheckCircle, RadioButtonUnchecked } from '@openedx/paragon/icons';
 
-import { getStudioHomeData } from '../../studio-home/data/selectors';
 import messages from './messages';
 
 const ChecklistItemBody = ({
@@ -21,13 +20,13 @@ const ChecklistItemBody = ({
   // injected
   intl,
 }) => {
-  const studioHomeData = useSelector(getStudioHomeData);
+  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
   const navigate = useNavigate();
 
   const handleClick = (e, url) => {
     e.preventDefault();
 
-    if (studioHomeData?.waffleFlags?.ENABLE_NEW_COURSE_UPDATES_PAGE) {
+    if (waffleFlags?.useNewUpdatesPage) {
       navigate(`/course/${courseId}/course_info`);
     } else {
       window.location.href = url;

diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
@@ -8,7 +8,6 @@ import { copyToClipboard } from '../generic/data/thunks';
 import { getSavingStatus as getGenericSavingStatus } from '../generic/data/selectors';
 import { RequestStatus } from '../data/constants';
 import { COURSE_BLOCK_NAMES } from './constants';
-import { getStudioHomeData } from '../studio-home/data/selectors';
 import {
   setCurrentItem,
   setCurrentSection,
@@ -59,7 +58,7 @@ import {
 const useCourseOutline = ({ courseId }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { waffleFlags } = useSelector(getStudioHomeData);
+  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
 
   const {
     reindexLink,
@@ -114,15 +113,15 @@ const useCourseOutline = ({ courseId }) => {
   };
 
   const getUnitUrl = (locator) => {
-    if (getConfig().ENABLE_UNIT_PAGE === 'true' || waffleFlags?.ENABLE_NEW_UNIT_PAGE) {
+    if (getConfig().ENABLE_UNIT_PAGE === 'true' || waffleFlags?.useNewUnitPage) {
       return `/course/${courseId}/container/${locator}`;
     }
     return `${getConfig().STUDIO_BASE_URL}/container/${locator}`;
   };
 
   const openUnitPage = (locator) => {
     const url = getUnitUrl(locator);
-    if (getConfig().ENABLE_UNIT_PAGE === 'true' || waffleFlags?.ENABLE_NEW_UNIT_PAGE) {
+    if (getConfig().ENABLE_UNIT_PAGE === 'true' || waffleFlags?.useNewUnitPage) {
       navigate(url);
     } else {
       window.location.assign(url);

diff --git a/src/course-outline/status-bar/StatusBar.jsx b/src/course-outline/status-bar/StatusBar.jsx
@@ -15,7 +15,6 @@ import TagCount from '../../generic/tag-count';
 import { useHelpUrls } from '../../help-urls/hooks';
 import { VIDEO_SHARING_OPTIONS } from '../constants';
 import { useContentTagsCount } from '../../generic/data/apiHooks';
-import { getStudioHomeData } from '../../studio-home/data/selectors';
 import messages from './messages';
 import { getVideoSharingOptionText } from '../utils';
 
@@ -46,7 +45,7 @@ const StatusBar = ({
 }) => {
   const intl = useIntl();
   const { config } = useContext(AppContext);
-  const { waffleFlags } = useSelector(getStudioHomeData);
+  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
 
   const {
     courseReleaseDate,
@@ -87,7 +86,7 @@ const StatusBar = ({
         <StatusBarItem title={intl.formatMessage(messages.startDateTitle)}>
           <Link
             className="small"
-            to={waffleFlags?.ENABLE_NEW_SCHEDULE_AND_DETAILS_PAGE ? `/course/${courseId}/settings/details/#schedule` : scheduleDestination()}
+            to={waffleFlags?.useNewScheduleDetailsPage ? `/course/${courseId}/settings/details/#schedule` : scheduleDestination()}
           >
             {courseReleaseDateObj.isValid() ? (
               <FormattedDate

diff --git a/src/course-unit/breadcrumbs/Breadcrumbs.jsx b/src/course-unit/breadcrumbs/Breadcrumbs.jsx
@@ -10,19 +10,18 @@ import { getConfig } from '@edx/frontend-platform';
 
 import { createCorrectInternalRoute } from '../../utils';
 import { getCourseSectionVertical } from '../data/selectors';
-import { getStudioHomeData } from '../../studio-home/data/selectors';
 import messages from './messages';
 
 const Breadcrumbs = () => {
   const intl = useIntl();
   const { ancestorXblocks } = useSelector(getCourseSectionVertical);
   const [section, subsection] = ancestorXblocks ?? [];
   const navigate = useNavigate();
-  const { waffleFlags } = useSelector(getStudioHomeData);
+  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
 
   const handleClick = (e, url) => {
     e.preventDefault();
-    if (waffleFlags?.ENABLE_NEW_COURSE_OUTLINE_PAGE) {
+    if (waffleFlags?.useNewCourseOutlinePage) {
       navigate(url);
     } else {
       window.location.href = `${getConfig().STUDIO_BASE_URL}/${url}`;

diff --git a/src/data/api.js b/src/data/api.js
@@ -15,3 +15,29 @@ export async function getCourseDetail(courseId, username) {
 
   return normalizeCourseDetail(data);
 }
+
+export async function getWaffleFlags(courseId) {
+  // const { data } = await getAuthenticatedHttpClient()
+  //   .get(`${getConfig().STUDIO_BASE_URL}/api/contentstore/v1/course_waffle_flags`);
+
+  const data = {
+    use_new_home_page: true,
+    use_new_custom_pages: true,
+    use_new_schedule_details_page: true,
+    use_new_advanced_settings_page: true,
+    use_new_grading_page: true,
+    use_new_updates_page: true,
+    use_new_import_page: true,
+    use_new_export_page: true,
+    use_new_files_uploads_page: true,
+    use_new_video_uploads_page: true,
+    use_new_course_outline_page: true,
+    use_new_unit_page: true,
+    use_new_course_team_page: true,
+    use_new_certificates_page: true,
+    use_new_textbooks_page: true,
+    use_new_group_configurations_page: true,
+  };
+
+  return normalizeCourseDetail(data);
+}
diff --git a/src/data/slice.js b/src/data/slice.js
@@ -18,12 +18,16 @@ const slice = createSlice({
     updateCanChangeProviders: (state, { payload }) => {
       state.canChangeProviders = payload.canChangeProviders;
     },
+    fetchWaffleFlagsSuccess: (state, { payload }) => {
+      state.waffleFlags = payload.waffleFlags;
+    },
   },
 });
 
 export const {
   updateStatus,
   updateCanChangeProviders,
+  fetchWaffleFlagsSuccess,
 } = slice.actions;
 
 export const {

diff --git a/src/data/thunks.js b/src/data/thunks.js
@@ -1,13 +1,13 @@
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { addModel } from '../generic/model-store';
-import { getCourseDetail } from './api';
+import { getCourseDetail, getWaffleFlags } from './api';
 import {
   updateStatus,
   updateCanChangeProviders,
+  fetchWaffleFlagsSuccess,
 } from './slice';
 import { RequestStatus } from './constants';
 
-/* eslint-disable import/prefer-default-export */
 export function fetchCourseDetail(courseId) {
   return async (dispatch) => {
     dispatch(updateStatus({ courseId, status: RequestStatus.IN_PROGRESS }));
@@ -29,3 +29,22 @@ export function fetchCourseDetail(courseId) {
     }
   };
 }
+
+export function fetchWaffleFlags(courseId) {
+  return async (dispatch) => {
+    dispatch(updateStatus({ courseId, status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const waffleFlags = await getWaffleFlags(courseId);
+      dispatch(updateStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
+      console.log('fetchWaffleFlags thunk', waffleFlags);
+      dispatch(fetchWaffleFlagsSuccess({ waffleFlags }));
+    } catch (error) {
+      if (error.response && error.response.status === 404) {
+        dispatch(updateStatus({ courseId, status: RequestStatus.NOT_FOUND }));
+      } else {
+        dispatch(updateStatus({ courseId, status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
diff --git a/src/generic/help-sidebar/HelpSidebar.jsx b/src/generic/help-sidebar/HelpSidebar.jsx
@@ -26,7 +26,7 @@ const HelpSidebar = ({
     scheduleAndDetails,
     groupConfigurations,
   } = otherLinkURLParams;
-  const { waffleFlags } = useSelector(getStudioHomeData);
+  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
 
   const showOtherLink = (params) => !pathname.includes(params);
   const generateLegacyURL = (urlParameter) => {
@@ -57,46 +57,46 @@ const HelpSidebar = ({
               <ul className="p-0 mb-0">
                 {showOtherLink(scheduleAndDetails) && (
                   <HelpSidebarLink
-                    pathToPage={waffleFlags?.ENABLE_NEW_SCHEDULE_AND_DETAILS_PAGE
+                    pathToPage={waffleFlags?.useNewScheduleDetailsPage
                       ? `/course/${courseId}/${scheduleAndDetails}` : scheduleAndDetailsDestination}
                     title={intl.formatMessage(
                       messages.sidebarLinkToScheduleAndDetails,
                     )}
-                    isNewPage={waffleFlags?.ENABLE_NEW_SCHEDULE_AND_DETAILS_PAGE}
+                    isNewPage={waffleFlags?.useNewScheduleDetailsPage}
                   />
                 )}
                 {showOtherLink(grading) && (
                   <HelpSidebarLink
-                    pathToPage={waffleFlags?.ENABLE_NEW_GRADING_PAGE
+                    pathToPage={waffleFlags?.useNewGradingPage
                       ? `/course/${courseId}/${grading}` : gradingDestination}
                     title={intl.formatMessage(messages.sidebarLinkToGrading)}
-                    isNewPage={waffleFlags?.ENABLE_NEW_GRADING_PAGE}
+                    isNewPage={waffleFlags?.useNewGradingPage}
                   />
                 )}
                 {showOtherLink(courseTeam) && (
                   <HelpSidebarLink
-                    pathToPage={waffleFlags?.ENABLE_NEW_COURSE_TEAM_PAGE
+                    pathToPage={waffleFlags?.useNewCourseTeamPage
                       ? `/course/${courseId}/${courseTeam}` : courseTeamDestination}
                     title={intl.formatMessage(messages.sidebarLinkToCourseTeam)}
-                    isNewPage={waffleFlags?.ENABLE_NEW_COURSE_TEAM_PAGE}
+                    isNewPage={waffleFlags?.useNewCourseTeamPage}
                   />
                 )}
                 {showOtherLink(groupConfigurations) && (
                   <HelpSidebarLink
-                    pathToPage={waffleFlags?.ENABLE_NEW_GROUP_CONFIGURATIONS_PAGE
+                    pathToPage={waffleFlags?.useNewGroupConfigurationsPage
                       ? `/course/${courseId}/${groupConfigurations}` : groupConfigurationsDestination}
                     title={intl.formatMessage(
                       messages.sidebarLinkToGroupConfigurations,
                     )}
-                    isNewPage={waffleFlags?.ENABLE_NEW_GROUP_CONFIGURATIONS_PAGE}
+                    isNewPage={waffleFlags?.useNewGroupConfigurationsPage}
                   />
                 )}
                 {showOtherLink(advancedSettings) && (
                   <HelpSidebarLink
-                    pathToPage={waffleFlags?.ENABLE_NEW_ADVANCED_SETTINGS_PAGE
+                    pathToPage={waffleFlags?.useNewAdvancedSettingsPage
                       ? `/course/${courseId}/${advancedSettings}` : advancedSettingsDestination}
                     title={intl.formatMessage(messages.sidebarLinkToAdvancedSettings)}
-                    isNewPage={waffleFlags?.ENABLE_NEW_ADVANCED_SETTINGS_PAGE}
+                    isNewPage={waffleFlags?.useNewAdvancedSettingsPage}
                   />
                 )}
                 {proctoredExamSettingsUrl && (

diff --git a/src/header/Header.tsx b/src/header/Header.tsx
@@ -34,7 +34,7 @@ const Header = ({
   const intl = useIntl();
   const libraryHref = useHref('/library/:libraryId');
   const navigate = useNavigate();
-  const { waffleFlags } = useSelector(getStudioHomeData);
+  const waffleFlags = useSelector(state => state.courseDetail.waffleFlags);
 
   const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
 
@@ -66,7 +66,7 @@ const Header = ({
     if (isLibrary) {
       return generatePath(libraryHref, { libraryId: contextId });
     }
-    return waffleFlags?.ENABLE_NEW_COURSE_OUTLINE_PAGE ? `/course/${contextId}` : `${studioBaseUrl}/course/${contextId}`;
+    return waffleFlags?.useNewCourseOutlinePage ? `/course/${contextId}` : `${studioBaseUrl}/course/${contextId}`;
   };
 
   return (
@@ -81,7 +81,7 @@ const Header = ({
         searchButtonAction={meiliSearchEnabled ? openSearchModal : undefined}
         containerProps={containerProps}
         onNavigate={(url) => navigate(url)}
-        isNewHomePage={waffleFlags?.ENABLE_NEW_HOME_PAGE}
+        isNewHomePage={waffleFlags?.useNewHomePage}
       />
       {meiliSearchEnabled && (
         <SearchModal