@centreon/ui 25.1.3 → 25.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.1.3",
+  "version": "25.1.4",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/api/useMutationQuery/index.ts

@@ -3,15 +3,20 @@ import { useEffect } from 'react';
 import {
   UseMutationOptions,
   UseMutationResult,
-  useMutation
+  useMutation,
+  useQueryClient
 } from '@tanstack/react-query';
-import { includes, omit } from 'ramda';
+import { equals, includes, omit, type } from 'ramda';
 import { JsonDecoder } from 'ts.data.json';
 
 import useSnackbar from '../../Snackbar/useSnackbar';
 import { useDeepCompare } from '../../utils';
 import { CatchErrorProps, ResponseError, customFetch } from '../customFetch';
 import { errorLog } from '../logger';
+import {
+  OptimisticListing,
+  useOptimisticMutation
+} from './useOptimisticMutation';
 
 export enum Method {
   DELETE = 'DELETE',
@@ -46,6 +51,7 @@ export type UseMutationQueryProps<T, TMeta> = {
     variables: Variables<TMeta, T>,
     context: unknown
   ) => unknown;
+  optimisticListing?: OptimisticListing;
 } & Omit<
   UseMutationOptions<{ _meta?: TMeta; payload: T }>,
   'mutationFn' | 'onError' | 'onMutate' | 'onSuccess' | 'mutateAsync' | 'mutate'
@@ -79,10 +85,15 @@ const useMutationQuery = <T extends object, TMeta>({
   onError,
   onSuccess,
   onSettled,
-  baseEndpoint
+  baseEndpoint,
+  optimisticListing
 }: UseMutationQueryProps<T, TMeta>): UseMutationQueryState<T, TMeta> => {
   const { showErrorMessage } = useSnackbar();
 
+  const queryClient = useQueryClient();
+  const { getListingQueryKey, getOptimisticMutationItems, getPreviousListing } =
+    useOptimisticMutation({ optimisticListing });
+
   const queryData = useMutation<
     T | ResponseError,
     ResponseError,
@@ -100,7 +111,7 @@ const useMutationQuery = <T extends object, TMeta>({
         defaultFailureMessage,
         endpoint: getEndpoint(_meta as TMeta),
         headers: new Headers({
-          'Content-Type': 'application/x-www-form-urlencoded',
+          'Content-Type': 'application/json',
           ...fetchHeaders
         }),
         isMutation: true,
@@ -108,11 +119,57 @@ const useMutationQuery = <T extends object, TMeta>({
         payload
       });
     },
-    onError,
-    onMutate,
+    onError: (error, variables, context) => {
+      if (optimisticListing?.enabled) {
+        const listingQueryKey = getListingQueryKey();
+        queryClient.setQueriesData(
+          { queryKey: listingQueryKey },
+          context.previousListing
+        );
+      }
+
+      onError?.(error, variables, context);
+    },
+    onMutate: optimisticListing?.enabled
+      ? ({ payload, _meta }) => {
+          const listingQueryKey = getListingQueryKey();
+          const newListing = getOptimisticMutationItems({
+            method,
+            payload,
+            _meta
+          });
+          const previousListing = getPreviousListing();
+
+          queryClient.setQueriesData({ queryKey: listingQueryKey }, newListing);
+
+          return { previousListing };
+        }
+      : onMutate,
     onSettled,
     onSuccess: (data, variables, context) => {
+      if (optimisticListing?.enabled) {
+        const isQueryKeyArray = equals(
+          type(optimisticListing.queryKey),
+          'Array'
+        );
+        const listingQueryKey = isQueryKeyArray
+          ? optimisticListing?.queryKey
+          : [optimisticListing?.queryKey];
+
+        queryClient.invalidateQueries({
+          queryKey: listingQueryKey
+        });
+      }
+
       if (data?.isError) {
+        if (optimisticListing?.enabled) {
+          const listingQueryKey = getListingQueryKey();
+          queryClient.setQueriesData(
+            { queryKey: listingQueryKey },
+            context.previousListing
+          );
+        }
+
         onError?.(data, variables, context);
 
         return;

package/src/api/useMutationQuery/useMutationQuery.cypress.spec.tsx

@@ -0,0 +1,111 @@
+import useMutationQuery, { Method } from '.';
+import SnackbarProvider from '../../Snackbar/SnackbarProvider';
+import TestQueryProvider from '../TestQueryProvider';
+
+// biome-ignore lint/suspicious/noImplicitAnyLet: <explanation>
+let spyMutation;
+
+const TestComponent = (props) => {
+  const mutation = useMutationQuery({
+    ...props,
+    getEndpoint: () => '/endpoint'
+  });
+
+  spyMutation = mutation;
+
+  return (
+    <button
+      type="button"
+      onClick={() =>
+        mutation.mutateAsync({ payload: { a: 'a', b: 2, c: ['arr', 'ay'] } })
+      }
+    >
+      Send
+    </button>
+  );
+};
+
+const initialize = ({ mutationProps, isError = false }) => {
+  cy.interceptAPIRequest({
+    alias: 'mutateEndpoint',
+    path: './api/latest/endpoint',
+    statusCode: isError ? 400 : 204,
+    method: mutationProps.method,
+    response: isError
+      ? {
+          message: 'custom error message'
+        }
+      : undefined
+  });
+
+  cy.mount({
+    Component: (
+      <SnackbarProvider>
+        <TestQueryProvider>
+          <TestComponent {...mutationProps} />
+        </TestQueryProvider>
+      </SnackbarProvider>
+    )
+  }).then(() => {
+    cy.spy(spyMutation, 'mutateAsync').as('mutateAsync');
+  });
+};
+
+describe('useMutationQuery', () => {
+  it('sends data to an endpoint', () => {
+    initialize({
+      mutationProps: {
+        getEndpoint: () => '/endpoint',
+        method: Method.POST
+      }
+    });
+
+    cy.get('button').click();
+
+    cy.waitForRequest('@mutateEndpoint').then(({ request }) => {
+      expect(request.method).to.equal('POST');
+      expect(request.body).to.deep.equal({ a: 'a', b: 2, c: ['arr', 'ay'] });
+      expect(request.headers.get('content-type')).to.equal('application/json');
+    });
+    cy.get('@mutateAsync').should('be.calledWith', {
+      payload: {
+        a: 'a',
+        b: 2,
+        c: ['arr', 'ay']
+      }
+    });
+  });
+
+  it("shows an error from the API via the Snackbar and inside the browser's console when posting data to an endpoint", () => {
+    initialize({
+      mutationProps: {
+        getEndpoint: () => '/endpoint',
+        method: Method.POST
+      },
+      isError: true
+    });
+
+    cy.get('button').click();
+
+    cy.get('@mutateAsync').should('be.called');
+
+    cy.contains('custom error message').should('be.visible');
+  });
+
+  it('does not show any message via the Snackbar when the httpCodesBypassErrorSnackbar is passed when posting data to an API', () => {
+    initialize({
+      mutationProps: {
+        getEndpoint: () => '/endpoint',
+        method: Method.POST,
+        httpCodesBypassErrorSnackbar: [400]
+      },
+      isError: true
+    });
+
+    cy.get('button').click();
+
+    cy.get('@mutateAsync').should('be.called');
+
+    cy.contains('custom error message').should('not.exist');
+  });
+});

package/src/api/useMutationQuery/useOptimisticMutation.ts

@@ -0,0 +1,114 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { append, equals, last, remove, type, update } from 'ramda';
+import { Method } from '.';
+
+interface GetOptimisticMutationListingProps<T, TMeta> {
+  method: Method;
+  payload: T;
+  _meta: TMeta;
+}
+
+export interface OptimisticListing {
+  enabled: boolean;
+  queryKey: string | Array<string>;
+  total: number;
+  limit: number;
+}
+
+interface UseOptimisticMutationProps {
+  optimisticListing?: OptimisticListing;
+}
+
+interface UseOptimisticMutationState<T, TMeta> {
+  getOptimisticMutationItems: (
+    props: GetOptimisticMutationListingProps<T, TMeta>
+  ) => object;
+  getListingQueryKey: () => Array<string>;
+  getPreviousListing: () => unknown;
+}
+
+export const useOptimisticMutation = <T, TMeta>({
+  optimisticListing
+}: UseOptimisticMutationProps): UseOptimisticMutationState<T, TMeta> => {
+  const queryClient = useQueryClient();
+
+  const getListingQueryKey = (): Array<string> => {
+    const isQueryKeyArray = equals(type(optimisticListing?.queryKey), 'Array');
+    const listingQueryKey = isQueryKeyArray
+      ? optimisticListing?.queryKey
+      : [optimisticListing?.queryKey];
+
+    return listingQueryKey;
+  };
+
+  const getPreviousListing = (): unknown => {
+    const listingQueryKey = getListingQueryKey();
+
+    const items = last(
+      queryClient.getQueriesData({
+        queryKey: listingQueryKey
+      })
+    )?.[1];
+
+    return items;
+  };
+
+  const getOptimisticMutationItems = ({
+    method,
+    payload,
+    _meta
+  }: GetOptimisticMutationListingProps<T, TMeta>): object => {
+    const listingQueryKey = getListingQueryKey();
+
+    const hasOnlyOnePage =
+      (optimisticListing?.total || 0) <= (optimisticListing?.limit || 0);
+    const isFormDataPayload = equals(type(payload), 'FormData');
+
+    const items = last(
+      queryClient.getQueriesData({
+        queryKey: listingQueryKey
+      })
+    )?.[1];
+
+    if (equals(Method.POST, method) && !isFormDataPayload && hasOnlyOnePage) {
+      const newItems = append(payload, items.result);
+
+      return { ...items, result: newItems };
+    }
+
+    if (equals(Method.DELETE, method) && hasOnlyOnePage) {
+      const itemIndex = items.result.findIndex(({ id }) =>
+        equals(id, _meta.id)
+      );
+      const newItems = remove(itemIndex, 1, items.result);
+
+      return { ...items, result: newItems };
+    }
+
+    if (
+      (equals(Method.PUT, method) ||
+        equals(Method.PATCH, method) ||
+        (equals(Method.POST, method) && isFormDataPayload)) &&
+      hasOnlyOnePage
+    ) {
+      const itemIndex = items.result.findIndex(({ id }) =>
+        equals(id, _meta.id)
+      );
+      const item = items.result.find(({ id }) => equals(id, _meta.id));
+      const updatedItem = equals(Method.PUT, method)
+        ? payload
+        : {
+            ...item,
+            ...(isFormDataPayload
+              ? Object.fromEntries(payload.entries())
+              : payload)
+          };
+      const newItems = update(itemIndex, updatedItem, items.result);
+
+      return { ...items, result: newItems };
+    }
+
+    return items;
+  };
+  return { getOptimisticMutationItems, getListingQueryKey, getPreviousListing };
+};

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

@@ -1,118 +0,0 @@
-import { RenderHookResult, renderHook, waitFor } from '@testing-library/react';
-import fetchMock from 'jest-fetch-mock';
-
-import TestQueryProvider from '../TestQueryProvider';
-
-import useMutationQuery, {
-  Method,
-  UseMutationQueryProps,
-  UseMutationQueryState
-} from '.';
-
-const mockedShowErrorMessage = jest.fn();
-
-interface User {
-  email: string;
-  name: string;
-}
-
-const user: User = {
-  email: 'john@doe.com',
-  name: 'John Doe'
-};
-
-jest.mock('../../Snackbar/useSnackbar', () => ({
-  __esModule: true,
-  default: jest
-    .fn()
-    .mockImplementation(() => ({ showErrorMessage: mockedShowErrorMessage }))
-}));
-
-const renderMutationQuery = <T extends object>(
-  params: UseMutationQueryProps<T>
-): RenderHookResult<UseMutationQueryState<T>, unknown> =>
-  renderHook(() => useMutationQuery<T>(params), {
-    wrapper: TestQueryProvider
-  }) as RenderHookResult<UseMutationQueryState<T>, unknown>;
-
-describe('useFetchQuery', () => {
-  beforeEach(() => {
-    mockedShowErrorMessage.mockReset();
-    fetchMock.resetMocks();
-  });
-
-  it('posts data to an endpoint', async () => {
-    fetchMock.once(JSON.stringify({}));
-    const { result } = renderMutationQuery<User>({
-      getEndpoint: () => '/endpoint',
-      method: Method.POST
-    });
-
-    result.current.mutate({ payload: user });
-
-    await waitFor(() => {
-      expect(result.current?.isError).toEqual(false);
-    });
-  });
-
-  it("shows an error from the API via the Snackbar and inside the browser's console when posting data to an endpoint", async () => {
-    fetchMock.once(JSON.stringify({ code: 2, message: 'custom message' }), {
-      status: 400
-    });
-    const { result } = renderMutationQuery<User>({
-      getEndpoint: () => '/endpoint',
-      method: Method.POST
-    });
-
-    result.current.mutate({ payload: user });
-
-    await waitFor(() => {
-      expect(result.current?.isError).toEqual(true);
-    });
-
-    await waitFor(() => {
-      expect(mockedShowErrorMessage).toHaveBeenCalledWith('custom message');
-    });
-  });
-
-  it('shows a default failure message via the Snackbar as fallback when posting data to an API', async () => {
-    fetchMock.once(JSON.stringify({}), {
-      status: 400
-    });
-
-    const { result } = renderMutationQuery<User>({
-      getEndpoint: () => '/endpoint',
-      method: Method.POST
-    });
-
-    result.current.mutate({ payload: user });
-
-    await waitFor(() => {
-      expect(result.current?.isError).toEqual(true);
-    });
-
-    await waitFor(() => {
-      expect(mockedShowErrorMessage).toHaveBeenCalledWith(
-        'Something went wrong'
-      );
-    });
-  });
-
-  it('does not show any message via the Snackbar when the httpCodesBypassErrorSnackbar is passed when posting data to an API', async () => {
-    fetchMock.once(JSON.stringify({}), {
-      status: 400
-    });
-
-    const { result } = renderMutationQuery<User>({
-      getEndpoint: () => '/endpoint',
-      httpCodesBypassErrorSnackbar: [400],
-      method: Method.POST
-    });
-
-    result.current.mutate({ payload: user });
-
-    await waitFor(() => {
-      expect(mockedShowErrorMessage).not.toHaveBeenCalled();
-    });
-  });
-});