@centreon/ui 23.10.26 → 23.10.27-MON-19397-add-optimistic-ui-on-mutate.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "23.10.26",
+  "version": "23.10.27-MON-19397-add-optimistic-ui-on-mutate.0",
   "description": "Centreon UI Components",
   "scripts": {
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",

package/src/api/useFetchQuery/index.ts

@@ -58,9 +58,8 @@ const useFetchQuery = <T extends object>({
 }: UseFetchQueryProps<T>): UseFetchQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useQuery<T | ResponseError, Error>(
-    getQueryKey(),
-    ({ signal }): Promise<T | ResponseError> =>
+  const queryData = useQuery<T | ResponseError, Error>({
+    queryFn: ({ signal }): Promise<T | ResponseError> =>
       customFetch<T>({
         catchError,
         decoder,
@@ -69,10 +68,9 @@ const useFetchQuery = <T extends object>({
         headers: new Headers(fetchHeaders),
         signal
       }),
-    {
-      ...queryOptions
-    }
-  );
+    queryKey: getQueryKey(),
+    ...queryOptions
+  });
 
   const queryClient = useQueryClient();
 

package/src/api/useMutationQuery/index.test.ts

@@ -115,4 +115,27 @@ describe('useFetchQuery', () => {
       expect(mockedShowErrorMessage).not.toHaveBeenCalled();
     });
   });
+
+  it('calls the `onMutate` callback when the mutation has been successfully sent', async () => {
+    fetchMock.once(JSON.stringify({}));
+    const onMutate = jest.fn();
+
+    const { result } = renderMutationQuery<User>({
+      getEndpoint: () => '/endpoint',
+      method: Method.POST,
+      optimisticUI: {
+        onMutate,
+        queryKeyToInvalidate: ['key']
+      }
+    });
+
+    result.current.mutate(user);
+
+    await waitFor(() => {
+      expect(onMutate).toHaveBeenCalledWith({
+        email: 'john@doe.com',
+        name: 'John Doe'
+      });
+    });
+  });
 });

package/src/api/useMutationQuery/index.ts

@@ -1,7 +1,12 @@
 import 'ulog';
-import { useEffect } from 'react';
+import { startTransition, useEffect } from 'react';
 
-import { useMutation } from '@tanstack/react-query';
+import {
+  QueryClient,
+  QueryKey,
+  useMutation,
+  useQueryClient
+} from '@tanstack/react-query';
 import { JsonDecoder } from 'ts.data.json';
 import anylogger from 'anylogger';
 import { includes } from 'ramda';
@@ -17,6 +22,19 @@ export enum Method {
   PUT = 'PUT'
 }
 
+interface OptimisticUIProps<T> {
+  onError?: (error, variables, context) => void;
+  onMutate?: (variables) => unknown;
+  onSettled?: (
+    data: T | ResponseError | undefined,
+    error: unknown,
+    variables: void,
+    context: unknown
+  ) => unknown;
+  onSuccess?: (data, variables, context) => void;
+  queryKeyToInvalidate: QueryKey;
+}
+
 export interface UseMutationQueryProps<T> {
   catchError?: (props: CatchErrorProps) => void;
   decoder?: JsonDecoder.Decoder<T>;
@@ -25,6 +43,7 @@ export interface UseMutationQueryProps<T> {
   getEndpoint: (payload) => string;
   httpCodesBypassErrorSnackbar?: Array<number>;
   method: Method;
+  optimisticUI?: OptimisticUIProps<T>;
 }
 
 const log = anylogger('API Request');
@@ -34,6 +53,7 @@ export interface UseMutationQueryState<T> {
   isMutating: boolean;
   mutate: (payload) => void;
   mutateAsync: (payload) => Promise<T | ResponseError>;
+  queryClient: QueryClient;
 }
 
 const useMutationQuery = <T extends object>({
@@ -43,12 +63,15 @@ const useMutationQuery = <T extends object>({
   defaultFailureMessage,
   fetchHeaders,
   httpCodesBypassErrorSnackbar = [],
-  method
+  method,
+  optimisticUI
 }: UseMutationQueryProps<T>): UseMutationQueryState<T> => {
   const { showErrorMessage } = useSnackbar();
 
-  const queryData = useMutation<T | ResponseError>(
-    (payload): Promise<T | ResponseError> =>
+  const queryClient = useQueryClient();
+
+  const queryData = useMutation<T | ResponseError>({
+    mutationFn: (payload): Promise<T | ResponseError> =>
       customFetch<T>({
         catchError,
         decoder,
@@ -61,8 +84,20 @@ const useMutationQuery = <T extends object>({
         isMutation: true,
         method,
         payload
-      })
-  );
+      }),
+    onError: optimisticUI?.onError,
+    onMutate: optimisticUI?.onMutate,
+    onSettled: optimisticUI?.onSettled,
+    onSuccess: (data, variables, context) => {
+      startTransition(() => {
+        queryClient.invalidateQueries({
+          queryKey: optimisticUI?.queryKeyToInvalidate
+        });
+      });
+
+      optimisticUI?.onSuccess?.(data, variables, context);
+    }
+  });
 
   const manageError = (): void => {
     const data = queryData.data as ResponseError | undefined;
@@ -87,7 +122,8 @@ const useMutationQuery = <T extends object>({
     isError: (queryData.data as ResponseError | undefined)?.isError || false,
     isMutating: queryData.isLoading,
     mutate: queryData.mutate,
-    mutateAsync: queryData.mutateAsync
+    mutateAsync: queryData.mutateAsync,
+    queryClient
   };
 };
 

package/src/api/useOptimisticListingMutation.ts

@@ -0,0 +1,62 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+import { ListingModel } from '..';
+
+interface ApplyListingMutationProps<T> {
+  getNewData: (listing: ListingModel<T>) => ListingModel<T>;
+  page: number;
+  queryKey: Array<string>;
+}
+
+interface RollBackListingMutation {
+  context;
+  page: number;
+  queryKey: Array<string>;
+}
+
+interface UseOptimisticListingMutationState<T> {
+  applyListingMutation: (props: ApplyListingMutationProps<T>) => Promise<{
+    previousListing: ListingModel<T>;
+  }>;
+  rollBackListingMutation: (props: RollBackListingMutation) => void;
+}
+
+const useOptimisticListingMutation = <
+  T extends { id: string | number }
+>(): UseOptimisticListingMutationState<T> => {
+  const queryClient = useQueryClient();
+
+  const applyListingMutation = async ({
+    page,
+    queryKey,
+    getNewData
+  }: ApplyListingMutationProps<T>): Promise<{
+    previousListing: ListingModel<T>;
+  }> => {
+    await queryClient.cancelQueries({ queryKey });
+    const previousListing = queryClient.getQueriesData(
+      queryKey
+    )[0][1] as ListingModel<T>;
+
+    const newData = getNewData(previousListing);
+
+    queryClient.setQueryData([...queryKey, page], newData);
+
+    return { previousListing };
+  };
+
+  const rollBackListingMutation = ({
+    context,
+    page,
+    queryKey
+  }: RollBackListingMutation): void => {
+    queryClient.setQueryData([...queryKey, page], context?.previousListing);
+  };
+
+  return {
+    applyListingMutation,
+    rollBackListingMutation
+  };
+};
+
+export default useOptimisticListingMutation;

package/src/index.ts

@@ -124,6 +124,7 @@ export { default as Responsive } from './Responsive';
 export { default as useFetchQuery } from './api/useFetchQuery';
 export { default as useMutationQuery, Method } from './api/useMutationQuery';
 export { default as QueryProvider } from './api/QueryProvider';
+export { default as useOptimisticListingMutation } from './api/useOptimisticListingMutation';
 export {
   default as FileDropZone,
   transformFileListToArray