feat: refactor course details management by removing deprecated actions and integrating new API hooks

Author: bra-i-am

src/editors/sharedComponents/TinyMceWidget/hooks.js

@@ -9,7 +9,6 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
 import { a11ycheckerCss } from 'frontend-components-tinymce-advanced-plugins';
 import { isEmpty } from 'lodash';
-import { updateCourseDetailsOverview } from '../../../schedule-and-details/data/slice';
 import tinyMCEStyles from '../../data/constants/tinyMCEStyles';
 import { StrictDict } from '../../utils';
 import pluginConfig from './pluginConfig';
@@ -204,7 +203,6 @@ export const setupCustomBehavior = ({
   setImage,
   lmsEndpointUrl,
   learningContextId,
-  dispatch,
 }) => (editor) => {
   // image upload button
   editor.ui.registry.addButton(tinyMCE.buttons.imageUploadButton, {
@@ -291,8 +289,7 @@ export const setupCustomBehavior = ({
         initialContent,
         learningContextId,
       });
-      // Update initialValue so the change is not taken as a user action
-      if (newContent) { dispatch(updateCourseDetailsOverview(newContent)); }
+      if (newContent) { editor.setContent(newContent); }
     }
     if (e.command === 'RemoveFormat') {
       editor.formatter.remove('blockquote');
@@ -323,7 +320,6 @@ export const editorConfig = ({
   learningContextId,
   staticRootUrl,
   enableImageUpload,
-  dispatch,
 }) => {
   const lmsEndpointUrl = getConfig().LMS_BASE_URL;
   const studioEndpointUrl = getConfig().STUDIO_BASE_URL;
@@ -369,7 +365,6 @@ export const editorConfig = ({
         content,
         images,
         learningContextId,
-        dispatch,
       }),
       quickbars_insert_toolbar: quickbarsInsertToolbar,
       quickbars_selection_toolbar: quickbarsSelectionToolbar,

src/schedule-and-details/data/api.js src/schedule-and-details/data/api.tssrc/schedule-and-details/data/api.js renamed to src/schedule-and-details/data/api.ts

@@ -0,0 +1,32 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { getCourseDetails } from './api';
+
+/**
+ * Get the details of a course.
+ */
+export const useGetCourseDetails = (courseId?: string) => {
+  const queryClient = useQueryClient();
+
+  const {
+    data, isLoading, isError, refetch,
+  } = useQuery({
+    queryKey: ['courseDetails', courseId],
+    queryFn: () => getCourseDetails(courseId),
+    refetchOnWindowFocus: false,
+  });
+  let globalDefaults: { [key: string]: any } | undefined;
+  if (data === undefined && courseId) {
+    // If course-specific waffle flags were requested, first default to the
+    // global (studio-wide) flags until we've loaded the course-specific ones.
+    globalDefaults = queryClient.getQueryData(['courseDetails', undefined]);
+  }
+  return {
+    ...globalDefaults,
+    ...data,
+    id: courseId,
+    isLoading,
+    isError,
+    refetch,
+  };
+};

src/schedule-and-details/data/apiHooks.ts

@@ -1,5 +1,3 @@
-export const getLoadingDetailsStatus = (state) => state.scheduleAndDetails.loadingDetailsStatus;
 export const getLoadingSettingsStatus = (state) => state.scheduleAndDetails.loadingSettingsStatus;
 export const getSavingStatus = (state) => state.scheduleAndDetails.savingStatus;
-export const getCourseDetails = state => state.scheduleAndDetails.courseDetails;
 export const getCourseSettings = (state) => state.scheduleAndDetails.courseSettings;

src/schedule-and-details/data/selectors.js

@@ -6,45 +6,27 @@ import { RequestStatus } from '../../data/constants';
 const slice = createSlice({
   name: 'scheduleAndDetails',
   initialState: {
-    loadingDetailsStatus: RequestStatus.IN_PROGRESS,
     loadingSettingsStatus: RequestStatus.IN_PROGRESS,
     savingStatus: '',
-    courseDetails: {},
     courseSettings: {},
   },
   reducers: {
-    updateLoadingDetailsStatus: (state, { payload }) => {
-      state.loadingDetailsStatus = payload.status;
-    },
     updateLoadingSettingsStatus: (state, { payload }) => {
       state.loadingSettingsStatus = payload.status;
     },
     updateSavingStatus: (state, { payload }) => {
       state.savingStatus = payload.status;
     },
-    updateCourseDetailsSuccess: (state, { payload }) => {
-      Object.assign(state.courseDetails, payload);
-    },
-    fetchCourseDetailsSuccess: (state, { payload }) => {
-      Object.assign(state.courseDetails, payload);
-    },
     fetchCourseSettingsSuccess: (state, { payload }) => {
       Object.assign(state.courseSettings, payload);
     },
-    updateCourseDetailsOverview: (state, { payload }) => {
-      state.courseDetails.overview = payload;
-    },
   },
 });
 
 export const {
   updateSavingStatus,
-  updateLoadingDetailsStatus,
   updateLoadingSettingsStatus,
-  updateCourseDetailsSuccess,
-  fetchCourseDetailsSuccess,
   fetchCourseSettingsSuccess,
-  updateCourseDetailsOverview,
 } = slice.actions;
 
 export const {

src/schedule-and-details/data/slice.js

@@ -1,44 +1,21 @@
 import { RequestStatus } from '../../data/constants';
 import {
-  getCourseDetails,
   updateCourseDetails,
   getCourseSettings,
 } from './api';
 import {
   updateSavingStatus,
-  updateLoadingDetailsStatus,
   updateLoadingSettingsStatus,
-  fetchCourseDetailsSuccess,
-  updateCourseDetailsSuccess,
   fetchCourseSettingsSuccess,
 } from './slice';
 
-export function fetchCourseDetailsQuery(courseId) {
-  return async (dispatch) => {
-    dispatch(updateLoadingDetailsStatus({ status: RequestStatus.IN_PROGRESS }));
-
-    try {
-      const detailsValues = await getCourseDetails(courseId);
-      dispatch(fetchCourseDetailsSuccess(detailsValues));
-      dispatch(updateLoadingDetailsStatus({ status: RequestStatus.SUCCESSFUL }));
-    } catch (error) {
-      if (error.response && error.response.status === 403) {
-        dispatch(updateLoadingDetailsStatus({ courseId, status: RequestStatus.DENIED }));
-      } else {
-        dispatch(updateLoadingDetailsStatus({ status: RequestStatus.FAILED }));
-      }
-    }
-  };
-}
-
 export function updateCourseDetailsQuery(courseId, details) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
 
     try {
-      const detailsValues = await updateCourseDetails(courseId, details);
+      await updateCourseDetails(courseId, details);
       dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
-      dispatch(updateCourseDetailsSuccess(detailsValues));
       return true;
     } catch (error) {
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));

src/schedule-and-details/data/thunks.js

@@ -3,30 +3,28 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { RequestStatus } from '../data/constants';
-import { getLoadingDetailsStatus, getLoadingSettingsStatus, getSavingStatus } from './data/selectors';
+import { getLoadingSettingsStatus, getSavingStatus } from './data/selectors';
 import { validateScheduleAndDetails, updateWithDefaultValues } from './utils';
 
 const useLoadValuesPrompt = (
   courseId,
-  fetchCourseDetailsQuery,
   fetchCourseSettingsQuery,
+  courseDetailsError,
 ) => {
   const dispatch = useDispatch();
-  const loadingDetailsStatus = useSelector(getLoadingDetailsStatus);
   const loadingSettingsStatus = useSelector(getLoadingSettingsStatus);
   const [showLoadFailedAlert, setShowLoadFailedAlert] = useState(false);
 
   useEffect(() => {
-    dispatch(fetchCourseDetailsQuery(courseId));
     dispatch(fetchCourseSettingsQuery(courseId));
   }, [courseId]);
 
   useEffect(() => {
-    if (loadingDetailsStatus === RequestStatus.FAILED || loadingSettingsStatus === RequestStatus.FAILED) {
+    if (courseDetailsError || loadingSettingsStatus === RequestStatus.FAILED) {
       setShowLoadFailedAlert(true);
       window.scrollTo({ top: 0, behavior: 'smooth' });
     }
-  }, [loadingDetailsStatus, loadingSettingsStatus]);
+  }, [courseDetailsError, loadingSettingsStatus]);
 
   return {
     showLoadFailedAlert,
@@ -54,7 +52,7 @@ const useSaveValuesPrompt = (
     if (!isQueryPending && !isEditableState) {
       setEditedValues(initialEditedData);
     }
-  }, [initialEditedData]);
+  }, [initialEditedData.isLoading]);
 
   useEffect(() => {
     const errors = validateScheduleAndDetails(editedValues, canShowCertificateAvailableDateField, intl);
@@ -115,6 +113,8 @@ const useSaveValuesPrompt = (
       if (!isEditableState) {
         setShowModifiedAlert(false);
       }
+      // Refresh course data after successful save
+      initialEditedData.refetch();
     } else if (savingStatus === RequestStatus.FAILED) {
       setIsQueryPending(false);
       setShowSuccessfulAlert(false);

src/schedule-and-details/hooks.jsx

@@ -13,6 +13,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import Placeholder from '../editors/Placeholder';
 import { RequestStatus } from '../data/constants';
+import { useGetCourseDetails } from './data/apiHooks';
 import { useModel } from '../generic/model-store';
 import AlertMessage from '../generic/alert-message';
 import InternetConnectionAlert from '../generic/internet-connection-alert';
@@ -21,13 +22,10 @@ import getPageHeadTitle from '../generic/utils';
 import { useScrollToHashElement } from '../hooks';
 import {
   fetchCourseSettingsQuery,
-  fetchCourseDetailsQuery,
   updateCourseDetailsQuery,
 } from './data/thunks';
 import {
   getCourseSettings,
-  getCourseDetails,
-  getLoadingDetailsStatus,
   getLoadingSettingsStatus,
 } from './data/selectors';
 import BasicSection from './basic-section';
@@ -46,11 +44,10 @@ import { useLoadValuesPrompt, useSaveValuesPrompt } from './hooks';
 
 const ScheduleAndDetails = ({ courseId }) => {
   const intl = useIntl();
+  const courseDetails = useGetCourseDetails(courseId);
   const courseSettings = useSelector(getCourseSettings);
-  const courseDetails = useSelector(getCourseDetails);
-  const loadingDetailsStatus = useSelector(getLoadingDetailsStatus);
   const loadingSettingsStatus = useSelector(getLoadingSettingsStatus);
-  const isLoading = loadingDetailsStatus === RequestStatus.IN_PROGRESS
+  const isLoading = courseDetails.isLoading
     || loadingSettingsStatus === RequestStatus.IN_PROGRESS;
 
   const course = useModel('courseDetails', courseId);
@@ -82,8 +79,8 @@ const ScheduleAndDetails = ({ courseId }) => {
     showLoadFailedAlert,
   } = useLoadValuesPrompt(
     courseId,
-    fetchCourseDetailsQuery,
     fetchCourseSettingsQuery,
+    courseDetails.isError,
   );
 
   const {
@@ -146,7 +143,7 @@ const ScheduleAndDetails = ({ courseId }) => {
     return <></>;
   }
 
-  if (loadingDetailsStatus === RequestStatus.DENIED || loadingSettingsStatus === RequestStatus.DENIED) {
+  if (courseDetails.isError || loadingSettingsStatus === RequestStatus.DENIED) {
     return (
       <div className="row justify-content-center m-6">
         <Placeholder />