refactor: create wrapper to show and hide notification

Author: navinkarkera

src/course-outline/data/apiHooks.ts

@@ -9,12 +9,12 @@ import {
 import { createGlobalState } from '@src/data/apiHooks';
 import type { XBlockBase, XblockChildInfo } from '@src/data/types';
 import { getBlockType, getCourseKey } from '@src/generic/key-utils';
-import { useProcessingNotification } from '@src/generic/processing-notification/context';
+import { useMutationWithProcessingNotification } from '@src/generic/processing-notification/data/apiHooks';
 import { handleResponseErrors } from '@src/generic/saving-error-alert';
 import { ParentIds } from '@src/generic/types';
 import {
   QueryClient,
-  skipToken, useMutation, useQuery, useQueryClient,
+  skipToken, useQuery, useQueryClient,
 } from '@tanstack/react-query';
 import { useDispatch } from 'react-redux';
 import {
@@ -110,11 +110,8 @@ export const useCreateCourseBlock = (
   const queryClient = useQueryClient();
   const { setData } = useScrollState(courseKey);
   const dispatch = useDispatch();
-  const { setShow } = useProcessingNotification();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: CreateCourseXBlockMutationProps) => createCourseXblock(variables),
-    onMutate: () => setShow(true),
-    onSettled: () => setShow(false),
     onSuccess: async (data: { locator: string; }, variables) => {
       await callback?.(data.locator, variables.parentLocator);
       queryClient.invalidateQueries({
@@ -189,8 +186,7 @@ export const useCourseDetails = (courseId?: string, enabled: boolean = true) =>
  */
 export const useUpdateCourseBlockName = (courseId: string) => {
   const queryClient = useQueryClient();
-  const { setShow } = useProcessingNotification();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables:{
       itemId: string;
       displayName: string;
@@ -200,102 +196,82 @@ export const useUpdateCourseBlockName = (courseId: string) => {
       queryClient.invalidateQueries({ queryKey: containerComparisonQueryKeys.course(courseId) });
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(courseId) });
     },
-    onMutate: () => setShow(true),
-    onSettled: () => setShow(false),
   });
 };
 
 export const usePublishCourseItem = () => {
   const queryClient = useQueryClient();
-  const { setShow } = useProcessingNotification();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables:{
       itemId: string;
     } & ParentIds) => publishCourseItem(variables.itemId),
     onSettled: (_data, _err, variables) => {
       invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.itemId)) });
-      setShow(false);
     },
-    onMutate: () => setShow(true),
   });
 };
 
 export const useDeleteCourseItem = () => {
   const queryClient = useQueryClient();
-  const { setShow } = useProcessingNotification();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables:{
       itemId: string;
     } & ParentIds) => deleteCourseItem(variables.itemId),
-    onMutate: () => setShow(true),
     onSettled: (_data, _err, variables) => {
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.itemId)) });
       invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
-      setShow(false);
     },
   });
 };
 
 export const useConfigureSection = () => {
   const queryClient = useQueryClient();
-  const { setShow } = useProcessingNotification();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: ConfigureSectionData & ParentIds) => configureCourseSection(variables),
-    onMutate: () => setShow(true),
     onSettled: (_data, _err, variables) => {
       queryClient.invalidateQueries({
         queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.sectionId)),
       });
       invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
-      setShow(false);
     },
   });
 };
 
 export const useConfigureSubsection = () => {
   const queryClient = useQueryClient();
-  const { setShow } = useProcessingNotification();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: ConfigureSubsectionData & ParentIds) => configureCourseSubsection(variables),
-    onMutate: () => setShow(true),
     onSettled: (_data, _err, variables) => {
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.itemId)) });
       invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
-      setShow(false);
     },
   });
 };
 
 export const useConfigureUnit = () => {
   const queryClient = useQueryClient();
-  const { setShow } = useProcessingNotification();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: ConfigureUnitData & ParentIds) => configureCourseUnit(variables),
-    onMutate: () => setShow(true),
     onSettled: (_data, _err, variables) => {
       queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.unitId)) });
       invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
-      setShow(false);
     },
   });
 };
 
 export const useUpdateCourseSectionHighlights = () => {
   const queryClient = useQueryClient();
-  const { setShow } = useProcessingNotification();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: {
       sectionId: string;
       highlights: string[];
     } & ParentIds) => updateCourseSectionHighlights(variables.sectionId, variables.highlights),
-    onMutate: () => setShow(true),
     onSettled: (_data, _err, variables) => {
       queryClient.invalidateQueries({
         queryKey: courseOutlineQueryKeys.courseDetails(getCourseKey(variables.sectionId)),
       });
       invalidateParentQueries(queryClient, variables).catch((e) => handleResponseErrors(e));
-      setShow(false);
     },
   });
 };
@@ -304,14 +280,11 @@ export const useDuplicateItem = (courseKey: string) => {
   const queryClient = useQueryClient();
   const dispatch = useDispatch();
   const { setData } = useScrollState(courseKey);
-  const { setShow } = useProcessingNotification();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: {
       itemId: string;
       parentId: string;
     } & ParentIds) => duplicateCourseItem(variables.itemId, variables.parentId),
-    onMutate: () => setShow(true),
-    onSettled: () => setShow(false),
     onSuccess: async (data, variables) => {
       await invalidateParentQueries(queryClient, variables);
       // add duplicated section to store, subsection and unit are handled by invalidateParentQueries
@@ -338,8 +311,7 @@ export const usePasteItem = (courseId?: string) => {
   const queryClient = useQueryClient();
   const { setData: setScrollState } = useScrollState(courseId);
   const { setData } = usePasteFileNotices(courseId);
-  const { setShow } = useProcessingNotification();
-  return useMutation({
+  return useMutationWithProcessingNotification({
     mutationFn: (variables: {
       parentLocator: string;
     } & ParentIds) => pasteBlock(variables.parentLocator),
@@ -350,7 +322,5 @@ export const usePasteItem = (courseId?: string) => {
       // scroll to pasted block
       setScrollState({ id: data.locator });
     },
-    onMutate: () => setShow(true),
-    onSettled: () => setShow(false),
   });
 };

src/generic/processing-notification/data/apiHooks.ts

@@ -0,0 +1,34 @@
+import { useProcessingNotification } from '../context';
+import { useMutation } from '@tanstack/react-query';
+import { DefaultError } from '@tanstack/query-core';
+
+
+/**
+ * Wraps useMutation to add a processing notification when the mutation is initiated and removes it when the mutation is settled.
+ */
+export const useMutationWithProcessingNotification = <
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TOnMutateResult = unknown,
+>(...args: Parameters<typeof useMutation<TData, TError, TVariables, TOnMutateResult>>) => {
+  const { setShow } = useProcessingNotification();
+  const originalOptions = args[0] || {};
+  return useMutation({
+    ...originalOptions,
+    onMutate: async (...onMutateArgs) => {
+      // Show processing notification
+      setShow(true);
+
+      // Call original onMutate if it exists
+      return await originalOptions.onMutate?.(...onMutateArgs);
+    },
+    onSettled: async (...onSettledArgs) => {
+      // Call original onSettled if it exists
+      await originalOptions.onSettled?.(...onSettledArgs);
+
+      // Always hide processing notification
+      setShow(false);
+    },
+  })
+}