From 4a34c7c8da6521c83a0f066d0702fb378d981d4c Mon Sep 17 00:00:00 2001 From: Joris Mancini Date: Thu, 30 Jan 2025 15:02:04 +0100 Subject: [PATCH 1/2] refactor: useDeferredFetch Signed-off-by: Joris Mancini --- .../menus/content-contextual-menu.tsx | 22 +++----- .../menus/directory-tree-contextual-menu.tsx | 51 +++++++------------ src/components/toolbars/content-toolbar.tsx | 3 +- src/utils/custom-hooks.ts | 40 +++++---------- 4 files changed, 40 insertions(+), 76 deletions(-) diff --git a/src/components/menus/content-contextual-menu.tsx b/src/components/menus/content-contextual-menu.tsx index d5c54e01..7d599ad1 100644 --- a/src/components/menus/content-contextual-menu.tsx +++ b/src/components/menus/content-contextual-menu.tsx @@ -309,14 +309,12 @@ export default function ContentContextualMenu(props: Readonly { + (renamedElement: any[]) => { // if copied element is renamed if (itemSelectionForCopy.sourceItemUuid === renamedElement[0]) { dispatch( @@ -342,41 +340,35 @@ export default function ContentContextualMenu(props: Readonly selectedElements.every((el) => el.hasMetadata), [selectedElements]); diff --git a/src/components/menus/directory-tree-contextual-menu.tsx b/src/components/menus/directory-tree-contextual-menu.tsx index 5500c57d..3695365a 100644 --- a/src/components/menus/directory-tree-contextual-menu.tsx +++ b/src/components/menus/directory-tree-contextual-menu.tsx @@ -55,7 +55,7 @@ import { buildPathToFromMap } from '../treeview-utils'; export interface DirectoryTreeContextualMenuProps extends Omit { directory: ElementAttributes | null; - onClose: (nextSelectedDirectoryId?: string | null) => void; + onClose: () => void; openDialog: string; setOpenDialog: (dialogId: string) => void; restrictMenuItems: boolean; @@ -80,37 +80,24 @@ export default function DirectoryTreeContextualMenu(props: Readonly { - onClose(nextSelectedDirectoryId); - setOpenDialog(DialogsId.NONE); - setHideMenu(false); - setDeleteError(''); - }, - [onClose, setOpenDialog] - ); + const handleCloseDialog = useCallback(() => { + onClose(); + setOpenDialog(DialogsId.NONE); + setHideMenu(false); + setDeleteError(''); + }, [onClose, setOpenDialog]); - const [renameCB, renameState] = useDeferredFetch( - // @ts-expect-error refacto typing of useDefferedFetch - renameElement, - handleCloseDialog, - (HTTPStatusCode: number) => { - if (HTTPStatusCode === 403) { - return intl.formatMessage({ id: 'renameDirectoryError' }); - } - return undefined; - }, - undefined, - false - ); + const [renameCB, renameState] = useDeferredFetch(renameElement, handleCloseDialog, (HTTPStatusCode: number) => { + if (HTTPStatusCode === 403) { + return intl.formatMessage({ id: 'renameDirectoryError' }); + } + return undefined; + }); - const [insertDirectoryCB, insertDirectoryState] = useDeferredFetch(insertDirectory, (response: ElementAttributes) => - handleCloseDialog(response?.elementUuid) - ); + const [insertDirectoryCB, insertDirectoryState] = useDeferredFetch(insertDirectory, () => handleCloseDialog()); - const [insertRootDirectoryCB, insertRootDirectoryState] = useDeferredFetch( - insertRootDirectory, - (response: ElementAttributes) => handleCloseDialog(response?.elementUuid) + const [insertRootDirectoryCB, insertRootDirectoryState] = useDeferredFetch(insertRootDirectory, () => + handleCloseDialog() ); const itemSelectionForCopy = useSelector((state: AppState) => state.itemSelectionForCopy); @@ -196,14 +183,14 @@ export default function DirectoryTreeContextualMenu(props: Readonly { setDeleteError(''); deleteElement(elementsUuid) - .then(() => handleCloseDialog(directory?.parentUuid)) + .then(() => handleCloseDialog()) .catch((error: any) => { // show the error message and don't close the dialog setDeleteError(error.message); handleError(error.message); }); }, - [handleCloseDialog, directory?.parentUuid, handleError] + [handleCloseDialog, handleError] ); // Allowance @@ -302,7 +289,7 @@ export default function DirectoryTreeContextualMenu(props: Readonly) { moveElementsToDirectory, undefined, moveElementErrorToString, - moveElementOnError, - false + moveElementOnError ); // Allowance diff --git a/src/utils/custom-hooks.ts b/src/utils/custom-hooks.ts index 91084444..ad53df71 100644 --- a/src/utils/custom-hooks.ts +++ b/src/utils/custom-hooks.ts @@ -67,10 +67,9 @@ interface MultipleAction { */ export const useDeferredFetch = ( fetchFunction: GenericFunction, - onSuccess?: (data: T, args: TArgs) => void, + onSuccess?: (args: TArgs, data?: T) => void, errorToString?: (status: number) => string | undefined, - onError?: (errorMessage: string, args: TArgs) => void, - hasResult: boolean = true + onError?: (errorMessage: string, args: TArgs) => void ): [(...args: TArgs) => void, FetchState] => { const initialState: FetchState = { status: FetchStatus.IDLE, @@ -124,25 +123,13 @@ export const useDeferredFetch = ( dispatch({ type: ActionType.START }); try { // Params resolution - const response = await fetchFunction(...args); - - if (hasResult) { - const data = response; - dispatch({ - type: ActionType.SUCCESS, - payload: data, - }); - if (onSuccess) { - onSuccess(data, args); - } - } else { - dispatch({ - type: ActionType.SUCCESS, - }); - if (onSuccess) { - onSuccess(null as unknown as T, args); - } - } + const data = await fetchFunction(...args); + console.log(`deffered data: ${JSON.stringify(data)}`); + dispatch({ + type: ActionType.SUCCESS, + payload: data, + }); + onSuccess?.(args, data); } catch (error: any) { if (!error.status) { // an http error @@ -153,7 +140,7 @@ export const useDeferredFetch = ( } } }, - [fetchFunction, onSuccess, handleError, hasResult] + [fetchFunction, onSuccess, handleError] ); const fetchCallback = useCallback((...args: TArgs) => fetchData(...args), [fetchData]); @@ -186,8 +173,7 @@ export const useMultipleDeferredFetch = ( fetchFunction: GenericFunction, onSuccess?: (data: T[]) => void, errorToString?: (status: number) => string | undefined, - onError?: (errorMessages: string[], params: unknown[], paramsOnError: unknown[]) => void, - hasResult: boolean = true + onError?: (errorMessages: string[], params: unknown[], paramsOnError: unknown[]) => void ): [(cbParamsList: unknown[][]) => void] => { const initialState: MultipleFetchState = { public: { @@ -253,7 +239,7 @@ export const useMultipleDeferredFetch = ( const [paramList, setParamList] = useState([]); - const onInstanceSuccess = useCallback((data: T, paramsOnSuccess: unknown[]) => { + const onInstanceSuccess = useCallback((paramsOnSuccess: unknown[], data?: T) => { dispatch({ type: ActionType.ADD_SUCCESS, payload: data, @@ -271,7 +257,7 @@ export const useMultipleDeferredFetch = ( }); }, []); - const [fetchCB] = useDeferredFetch(fetchFunction, onInstanceSuccess, errorToString, onInstanceError, hasResult); + const [fetchCB] = useDeferredFetch(fetchFunction, onInstanceSuccess, errorToString, onInstanceError); const fetchCallback = useCallback( (cbParamsList: unknown[][]) => { From 286ce480c08d5aab438637fe1a9303fde7091637 Mon Sep 17 00:00:00 2001 From: Joris Mancini Date: Mon, 3 Feb 2025 10:15:31 +0100 Subject: [PATCH 2/2] fix: review changes Signed-off-by: Joris Mancini --- src/components/menus/directory-tree-contextual-menu.tsx | 8 +++----- src/utils/custom-hooks.ts | 1 - 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/menus/directory-tree-contextual-menu.tsx b/src/components/menus/directory-tree-contextual-menu.tsx index 3695365a..68ee600c 100644 --- a/src/components/menus/directory-tree-contextual-menu.tsx +++ b/src/components/menus/directory-tree-contextual-menu.tsx @@ -94,11 +94,9 @@ export default function DirectoryTreeContextualMenu(props: Readonly handleCloseDialog()); + const [insertDirectoryCB, insertDirectoryState] = useDeferredFetch(insertDirectory, handleCloseDialog); - const [insertRootDirectoryCB, insertRootDirectoryState] = useDeferredFetch(insertRootDirectory, () => - handleCloseDialog() - ); + const [insertRootDirectoryCB, insertRootDirectoryState] = useDeferredFetch(insertRootDirectory, handleCloseDialog); const itemSelectionForCopy = useSelector((state: AppState) => state.itemSelectionForCopy); @@ -183,7 +181,7 @@ export default function DirectoryTreeContextualMenu(props: Readonly { setDeleteError(''); deleteElement(elementsUuid) - .then(() => handleCloseDialog()) + .then(handleCloseDialog) .catch((error: any) => { // show the error message and don't close the dialog setDeleteError(error.message); diff --git a/src/utils/custom-hooks.ts b/src/utils/custom-hooks.ts index ad53df71..eab8734d 100644 --- a/src/utils/custom-hooks.ts +++ b/src/utils/custom-hooks.ts @@ -124,7 +124,6 @@ export const useDeferredFetch = ( try { // Params resolution const data = await fetchFunction(...args); - console.log(`deffered data: ${JSON.stringify(data)}`); dispatch({ type: ActionType.SUCCESS, payload: data,