From b18249c5f71244e2fa1c38de1d22f7627d5f46ce Mon Sep 17 00:00:00 2001 From: Valeriia Maltseva Date: Thu, 28 Nov 2024 16:53:44 +0100 Subject: [PATCH] updated the useApiErrorHandler hook --- .../src/core/hooks/use-api-error-handler.tsx | 44 +++++++++++-------- assets/js/src/core/modules/app/app-loader.tsx | 18 +++++++- .../tabs/list/list-container-inner.tsx | 3 -- 3 files changed, 41 insertions(+), 24 deletions(-) diff --git a/assets/js/src/core/hooks/use-api-error-handler.tsx b/assets/js/src/core/hooks/use-api-error-handler.tsx index eac8428dc..8a3af8d39 100644 --- a/assets/js/src/core/hooks/use-api-error-handler.tsx +++ b/assets/js/src/core/hooks/use-api-error-handler.tsx @@ -11,42 +11,48 @@ * @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL */ -import type React from 'react' import { useEffect } from 'react' -import { isEmpty } from 'lodash' +import { type FetchBaseQueryError } from '@reduxjs/toolkit/query' +import { type SerializedError } from '@reduxjs/toolkit' +import { isEmpty, isString } from 'lodash' import { useAlertModal } from '@Pimcore/components/modal/alert-modal/hooks/use-alert-modal' -import { type MutationResultSelectorResult } from '@reduxjs/toolkit/query' -interface IUseApiErrorHandlerProps { - errorData: MutationResultSelectorResult - withAlert?: boolean -} +type UseApiErrorHandler = (errorData: FetchBaseQueryError | SerializedError | undefined | null) => void -interface ErrorData { - status: number - data: { - detail: string - message: string - } +interface IErrorData { + detail: string + message: string } const DEFAULT_ERROR_CONTENT = 'Something went wrong.' -export const useApiErrorHandler: React.FC = ({ errorData, withAlert = false }) => { +export const useApiErrorHandler: UseApiErrorHandler = (errorData) => { const modal = useAlertModal() + const getErrorContent = (): string | null => { + if (!isEmpty(errorData)) { + if ('data' in errorData && !isEmpty((errorData.data as IErrorData)?.message)) { + return (errorData.data as IErrorData)?.message + } + + if ('error' in errorData && isString(errorData.error)) { + return errorData.error + } + } + + return null + } + const handleErrorData = (): void => { - const errorInfo = (errorData?.error as ErrorData).data?.message + const errorInfo = getErrorContent() const errorContent = errorInfo ?? DEFAULT_ERROR_CONTENT - withAlert && modal.error({ content: errorContent }) + modal.error({ content: errorContent }) } useEffect(() => { - if (!isEmpty(errorData) && errorData.isError) { + if (!isEmpty(errorData)) { handleErrorData() } }, [errorData, modal]) - - return null } diff --git a/assets/js/src/core/modules/app/app-loader.tsx b/assets/js/src/core/modules/app/app-loader.tsx index 6ed496bfc..387be6381 100644 --- a/assets/js/src/core/modules/app/app-loader.tsx +++ b/assets/js/src/core/modules/app/app-loader.tsx @@ -12,6 +12,8 @@ */ import React, { useEffect, useState } from 'react' +import { type SerializedError } from '@reduxjs/toolkit' +import { type FetchBaseQueryError } from '@reduxjs/toolkit/query' import { api } from '@Pimcore/modules/auth/user/user-api-slice.gen' import { api as settingsApi } from '@Pimcore/modules/app/settings/settings-slice.gen' import { useAppDispatch } from '@Pimcore/app/store' @@ -23,6 +25,7 @@ import { useMercureCreateCookieMutation } from '../asset/editor/types/folder/tab-manager/tabs/list/toolbar/tools/mercure-api-slice.gen' import { Content } from '@Pimcore/components/content/content' +import { useApiErrorHandler } from '@Pimcore/hooks/use-api-error-handler' import { GlobalStyles } from '@Pimcore/styles/global.styles' export interface IAppLoaderProps { @@ -34,16 +37,23 @@ export const AppLoader = (props: IAppLoaderProps): React.JSX.Element => { const { i18n } = useTranslation() const [isLoading, setIsLoading] = useState(true) + const [errorData, setErrorData] = useState(null) const [translations] = useTranslationGetCollectionMutation() const [fetchMercureCookie] = useMercureCreateCookieMutation() + useApiErrorHandler(errorData) + async function initLoadUser (): Promise { const userFetcher = dispatch(api.endpoints.userGetCurrentInformation.initiate()) await fetchMercureCookie() userFetcher - .then(({ data, isSuccess }) => { + .then(({ data, isSuccess, isError, error }) => { + if (isError) { + setErrorData(error) + } + if (isSuccess && data !== undefined) { dispatch(setUser(data)) } @@ -57,7 +67,11 @@ export const AppLoader = (props: IAppLoaderProps): React.JSX.Element => { const settingsFetcher = dispatch(settingsApi.endpoints.systemSettingsGet.initiate()) settingsFetcher - .then(({ data, isSuccess }) => { + .then(({ data, isSuccess, isError, error }) => { + if (isError) { + setErrorData(error) + } + if (isSuccess && data !== undefined) { dispatch(setSettings(data)) } diff --git a/assets/js/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/list-container-inner.tsx b/assets/js/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/list-container-inner.tsx index c3b184f60..e140887e2 100644 --- a/assets/js/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/list-container-inner.tsx +++ b/assets/js/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/list-container-inner.tsx @@ -35,7 +35,6 @@ import { Content } from '@Pimcore/components/content/content' import { eventBus } from '@Pimcore/lib/event-bus' import { generateQueryArgsForGrid } from './helpers/gridHelpers' import usePagination from '@Pimcore/utils/hooks/use-pagination' -import { useApiErrorHandler } from '@Pimcore/hooks/use-api-error-handler' interface DataPatch { columnId: string @@ -63,8 +62,6 @@ export const ListContainerInner = (): React.JSX.Element => { const { sorting } = useListSorting() const [isLoading, setIsLoading] = useState(true) - useApiErrorHandler({ errorData: fetchListingResult, withAlert: true }) - useEffect(() => { setSelectedRows({}) }, [sorting, page, pageSize, filterOptions])