refactor: use single mutation for unit settings

Author: navinkarkera

src/course-outline/data/api.ts

@@ -1,5 +1,6 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { PUBLISH_TYPES } from '@src/course-unit/constants';
 import { XBlock } from '@src/data/types';
 import {
   CourseOutline,
@@ -271,13 +272,14 @@ export async function configureCourseSubsection(variables: ConfigureSubsectionDa
 export async function configureCourseUnit(variables: ConfigureUnitData): Promise<object> {
   const { data } = await getAuthenticatedHttpClient()
     .post(getCourseItemApiUrl(variables.unitId), {
-      publish: 'republish',
-      metadata: {
-        // The backend expects metadata.visible_to_staff_only to either true or null
-        visible_to_staff_only: variables.isVisibleToStaffOnly ? true : null,
-        group_access: variables.groupAccess,
-        discussion_enabled: variables.discussionEnabled,
-      },
+      publish: variables.groupAccess ? null : variables.type,
+      ...(variables.type === PUBLISH_TYPES.republish ? {
+        metadata: {
+          visible_to_staff_only: variables.isVisibleToStaffOnly ? true : null,
+          discussion_enabled: variables.discussionEnabled,
+          ...(variables.groupAccess != null && { group_access: variables.groupAccess }),
+        },
+      } : {}),
     });
 
   return data;

src/course-outline/data/types.ts

@@ -1,4 +1,5 @@
 import { XBlock, XBlockActions } from '@src/data/types';
+import { PUBLISH_TYPES } from '@src/course-unit/constants';
 
 export interface CourseStructure {
   highlightsEnabledForMessaging: boolean,
@@ -117,10 +118,11 @@ export interface ConfigureSubsectionData {
 }
 
 export interface ConfigureUnitData {
-  unitId: string,
-  isVisibleToStaffOnly: boolean,
-  groupAccess: object,
-  discussionEnabled: boolean,
+  unitId: string;
+  isVisibleToStaffOnly: boolean;
+  type: keyof typeof PUBLISH_TYPES;
+  groupAccess: Record<string, any> | null,
+  discussionEnabled: boolean;
 }
 
 export type StaticFileNotices = {

src/course-unit/data/api.ts

@@ -1,7 +1,6 @@
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
-import { PUBLISH_TYPES } from '../constants';
 import { CourseContainerChildrenData, CourseOutlineData, MoveInfoData } from './types';
 import { isUnitImportedFromLib, normalizeCourseSectionVerticalData, updateXBlockBlockIdToId } from './utils';
 
@@ -41,40 +40,6 @@ export async function getVerticalData(unitId: string): Promise<object> {
   return courseSectionVerticalData;
 }
 
-/**
- * Handles the visibility and data of a course unit, such as publishing, resetting to default values,
- * and toggling visibility to students.
- */
-export async function handleCourseUnitVisibilityAndData({
-  unitId,
-  type,
-  isVisible,
-  isDiscussionEnabled,
-  groupAccess,
-}: {
-  unitId: string,
-  type: string, // The action type (e.g., PUBLISH_TYPES.discardChanges).
-  isVisible: boolean, // The visibility status for students.
-  isDiscussionEnabled: boolean,
-  groupAccess: Record<string, any> | null,
-}): Promise<object> {
-  const body = {
-    publish: groupAccess ? null : type,
-    ...(type === PUBLISH_TYPES.republish ? {
-      metadata: {
-        visible_to_staff_only: isVisible ? true : null,
-        discussion_enabled: isDiscussionEnabled,
-        ...(groupAccess != null && { group_access: groupAccess }),
-      },
-    } : {}),
-  };
-
-  const { data } = await getAuthenticatedHttpClient()
-    .post(getXBlockBaseApiUrl(unitId), body);
-
-  return camelCaseObject(data);
-}
-
 /**
  * Get an object containing course vertical children data.
  */

src/course-unit/data/apiHooks.ts

@@ -1,21 +1,9 @@
-import { courseOutlineQueryKeys } from '@src/course-outline/data/apiHooks';
-import {
-  fetchCourseSectionVerticalDataSuccess, updateCourseVerticalChildren, updateQueryPendingStatus, updateSavingStatus,
-} from '@src/course-unit/data/slice';
-import { RequestStatus } from '@src/data/constants';
-import { hideProcessingNotification, showProcessingNotification } from '@src/generic/processing-notification/data/slice';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useDispatch } from 'react-redux';
+import { useMutation } from '@tanstack/react-query';
 
-import { handleResponseErrors } from '@src/generic/saving-error-alert';
 import {
   acceptLibraryBlockChanges,
-  getCourseContainerChildren,
-  getVerticalData,
-  handleCourseUnitVisibilityAndData,
   ignoreLibraryBlockChanges,
 } from './api';
-import { getNotificationMessage } from './utils';
 
 /**
  * Hook that provides a "mutation" that can be used to accept library block changes.
@@ -32,35 +20,3 @@ export const useAcceptLibraryBlockChanges = () => useMutation({
 export const useIgnoreLibraryBlockChanges = () => useMutation({
   mutationFn: ignoreLibraryBlockChanges,
 });
-
-export const useEditCourseUnitVisibilityAndData = () => {
-  const queryClient = useQueryClient();
-  const dispatch = useDispatch();
-  return useMutation({
-    mutationFn: handleCourseUnitVisibilityAndData,
-    onMutate: (variables) => {
-      dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-      dispatch(updateQueryPendingStatus(true));
-      dispatch(showProcessingNotification(
-        getNotificationMessage(variables.type, variables.isVisible, true),
-      ));
-    },
-    onSuccess: async (_data, variables) => {
-      const courseSectionVerticalData = await getVerticalData(variables.unitId);
-      dispatch(fetchCourseSectionVerticalDataSuccess(courseSectionVerticalData));
-      const courseVerticalChildrenData = await getCourseContainerChildren(variables.unitId);
-      dispatch(updateCourseVerticalChildren(courseVerticalChildrenData));
-      dispatch(hideProcessingNotification());
-      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
-    },
-    onSettled: async (_data, _err, variables) => {
-      queryClient.invalidateQueries({
-        queryKey: courseOutlineQueryKeys.courseItemId(variables.unitId),
-      });
-    },
-    onError: (error) => {
-      dispatch(hideProcessingNotification());
-      handleResponseErrors(error, dispatch, updateSavingStatus);
-    },
-  });
-};

src/course-unit/data/thunk.js

@@ -14,7 +14,6 @@ import {
   editUnitDisplayName,
   getVerticalData,
   getCourseContainerChildren,
-  handleCourseUnitVisibilityAndData,
   deleteUnitItem,
   duplicateUnitItem,
   getCourseOutlineInfo,
@@ -97,48 +96,6 @@ export function editCourseItemQuery(itemId, displayName, sequenceId) {
   };
 }
 
-export function editCourseUnitVisibilityAndData(
-  itemId,
-  type,
-  isVisible,
-  groupAccess,
-  isDiscussionEnabled,
-  callback,
-  blockId = itemId,
-) {
-  return async (dispatch) => {
-    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
-    dispatch(updateQueryPendingStatus(true));
-    const notification = getNotificationMessage(type, isVisible, true);
-    dispatch(showProcessingNotification(notification));
-
-    try {
-      await handleCourseUnitVisibilityAndData(
-        itemId,
-        type,
-        isVisible,
-        isDiscussionEnabled,
-        groupAccess,
-      ).then(async (result) => {
-        if (result) {
-          if (callback) {
-            callback();
-          }
-          const courseSectionVerticalData = await getVerticalData(blockId);
-          dispatch(fetchCourseSectionVerticalDataSuccess(courseSectionVerticalData));
-          const courseVerticalChildrenData = await getCourseContainerChildren(blockId);
-          dispatch(updateCourseVerticalChildren(courseVerticalChildrenData));
-          dispatch(hideProcessingNotification());
-          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
-        }
-      });
-    } catch (error) {
-      dispatch(hideProcessingNotification());
-      handleResponseErrors(error, dispatch, updateSavingStatus);
-    }
-  };
-}
-
 export function createNewCourseXBlock(body, callback, blockId, sendMessageToIframe) {
   return async (dispatch) => {
     if (body.stagedContent) {

src/course-unit/unit-sidebar/unit-info/GenericUnitInfoSettings.tsx

@@ -1,23 +1,23 @@
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Button, ButtonGroup } from '@openedx/paragon';
 import { PUBLISH_TYPES, UNIT_VISIBILITY_STATES } from '@src/course-unit/constants';
-import { editCourseUnitVisibilityAndData } from '@src/course-unit/data/thunk';
 import { UserPartitionInfoTypes } from '@src/data/types';
 import { AccessEditComponent, DiscussionEditComponent } from '@src/generic/configure-modal/UnitTab';
 import { SidebarContent, SidebarSection } from '@src/generic/sidebar';
 import { Form, Formik } from 'formik';
 import { useMemo } from 'react';
-import { useDispatch } from 'react-redux';
 import configureMessages from '@src/generic/configure-modal/messages';
-import { useEditCourseUnitVisibilityAndData } from '@src/course-unit/data/apiHooks';
 import messages from './messages';
+import { useConfigureUnit } from '@src/course-outline/data/apiHooks';
 
 interface UnitInfoSettingsProps {
   id: string;
   visibilityState: string;
   discussionEnabled?: boolean;
   userPartitionInfo?: UserPartitionInfoTypes;
   updateCallback?: () => void;
+  sectionId?: string;
+  subsectionId?: string;
 }
 
 /**
@@ -32,10 +32,12 @@ export const GenericUnitInfoSettings = (props: UnitInfoSettingsProps) => {
     visibilityState,
     discussionEnabled,
     userPartitionInfo,
+    sectionId,
+    subsectionId,
   } = props;
 
   const visibleToStaffOnly = visibilityState === UNIT_VISIBILITY_STATES.staffOnly;
-  const mutateFn = useEditCourseUnitVisibilityAndData();
+  const mutateFn = useConfigureUnit();
 
   const handleUpdate = async (
     isVisible: boolean,
@@ -46,9 +48,11 @@ export const GenericUnitInfoSettings = (props: UnitInfoSettingsProps) => {
     await mutateFn.mutateAsync({
       unitId: id,
       type: PUBLISH_TYPES.republish,
-      isVisible,
+      isVisibleToStaffOnly: isVisible,
       groupAccess,
-      isDiscussionEnabled: !!isDiscussionEnabled,
+      discussionEnabled: !!isDiscussionEnabled,
+      sectionId,
+      subsectionId,
     }, {
       onSuccess: () => props.updateCallback?.(),
     });