feat: save component order in unit

Author: navinkarkera

src/library-authoring/data/api.ts

@@ -648,3 +648,17 @@ export async function getLibraryContainerChildren(containerId: string): Promise<
   const { data } = await getAuthenticatedHttpClient().get(getLibraryContainerChildrenApiUrl(containerId));
   return camelCaseObject(data);
 }
+
+/**
+ * Update library container's children.
+ */
+export async function updateLibraryContainerChildren(
+  containerId: string,
+  children: string[],
+): Promise<LibraryBlockMetadata[]> {
+  const { data } = await getAuthenticatedHttpClient().patch(
+    getLibraryContainerChildrenApiUrl(containerId),
+    {'usage_keys': children},
+  );
+  return camelCaseObject(data);
+}

src/library-authoring/data/apiHooks.ts

@@ -54,6 +54,7 @@ import {
   type UpdateContainerDataRequest,
   restoreContainer,
   getLibraryContainerChildren,
+  updateLibraryContainerChildren,
 } from './api';
 import { VersionSpec } from '../LibraryBlock';
 
@@ -669,3 +670,25 @@ export const useContainerChildren = (libraryId?: string, containerId?: string) =
     queryFn: () => getLibraryContainerChildren(containerId!),
   })
 );
+
+/**
+ * Update container children
+ */
+export const useUpdateContainerChildren = (containerId?: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (usageKeys: string[]) => {
+      if (!containerId) {
+        return undefined;
+      }
+      return updateLibraryContainerChildren(containerId, usageKeys)
+    },
+    onSettled: () => {
+      // NOTE: We invalidate the library query here because we need to update the library's
+      // container list.
+      const libraryId = getLibraryId(containerId!);
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.container(libraryId, containerId) });
+    },
+  });
+};

src/library-authoring/units/LibraryUnitBlocks.tsx

@@ -1,11 +1,11 @@
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import {
   ActionRow, Badge, Icon, IconButton, Stack, useToggle,
 } from '@openedx/paragon';
 import { Description, DragIndicator } from '@openedx/paragon/icons';
 import { useQueryClient } from '@tanstack/react-query';
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { ContentTagsDrawerSheet } from '../../content-tags-drawer';
 import { blockTypes } from '../../editors/data/constants/app';
 import DraggableList, { SortableItem } from '../../generic/DraggableList';
@@ -18,10 +18,11 @@ import TagCount from '../../generic/tag-count';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import ComponentMenu from '../components';
 import { LibraryBlockMetadata } from '../data/api';
-import { libraryAuthoringQueryKeys, useContainerChildren } from '../data/apiHooks';
+import { libraryAuthoringQueryKeys, useContainerChildren, useUpdateContainerChildren } from '../data/apiHooks';
 import { LibraryBlock } from '../LibraryBlock';
 import { useLibraryRoutes } from '../routes';
 import messages from './messages';
+import { ToastContext } from '../../generic/toast-context';
 
 interface LibraryUnitBlocksProps {
   /** set to true if it is rendered as preview
@@ -31,10 +32,12 @@ interface LibraryUnitBlocksProps {
 }
 
 export const LibraryUnitBlocks = ({ preview }: LibraryUnitBlocksProps) => {
+  const intl = useIntl();
   const [orderedBlocks, setOrderedBlocks] = useState<LibraryBlockMetadata[]>([]);
   const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
   const [hidePreviewFor, setHidePreviewFor] = useState<string | null>(null);
   const { navigateTo } = useLibraryRoutes();
+  const { showToast } = useContext(ToastContext);
 
   const {
     libraryId,
@@ -45,6 +48,7 @@ export const LibraryUnitBlocks = ({ preview }: LibraryUnitBlocksProps) => {
   } = useLibraryContext();
 
   const queryClient = useQueryClient();
+  const orderMutator = useUpdateContainerChildren(unitId);
   const {
     data: blocks,
     isLoading,
@@ -63,11 +67,14 @@ export const LibraryUnitBlocks = ({ preview }: LibraryUnitBlocksProps) => {
     return <ErrorAlert error={error} />;
   }
 
-  /* istanbul ignore next */
-  const handleReorder = () => (newOrder: LibraryBlockMetadata[]) => {
-    // eslint-disable-next-line no-console
-    console.log('LibraryUnitBlocks newOrder: ', newOrder);
-    // TODO: update order of components in unit
+  const handleReorder = () => async (newOrder: LibraryBlockMetadata[]) => {
+    const usageKeys = newOrder.map((o) => o.id);
+    try {
+      await orderMutator.mutateAsync(usageKeys);
+      showToast(intl.formatMessage(messages.orderUpdatedMsg));
+    } catch (e) {
+      showToast(intl.formatMessage(messages.failedOrderUpdatedMsg));
+    }
   };
 
   const onTagSidebarClose = () => {

src/library-authoring/units/messages.ts

@@ -21,6 +21,16 @@ const messages = defineMessages({
     defaultMessage: 'Draft',
     description: 'Chip in components in unit page that is shown when component has unpublished changes',
   },
+  orderUpdatedMsg: {
+    id: 'course-authoring.library-authoring.unit-component.order-updated-msg.text',
+    defaultMessage: 'Order updated',
+    description: 'Toast message displayed when components are successfully reordered in a unit',
+  },
+  failedOrderUpdatedMsg: {
+    id: 'course-authoring.library-authoring.unit-component.failed-order-updated-msg.text',
+    defaultMessage: 'Failed to update components order',
+    description: 'Toast message displayed when components are successfully reordered in a unit',
+  },
 });
 
 export default messages;