@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/modules/Content/index.tsx

@@ -114,6 +114,7 @@ const Content = (props: IProps): JSX.Element => {
 		setFilter,
 		setDataStatus,
 		isLoading,
+		isSaving,
 		resetPageEditor,
 		removePageFromSite,
 		importPageFromGlobal,
@@ -205,9 +206,6 @@ const Content = (props: IProps): JSX.Element => {
 	const initialColumns = getColumns(categoryColumns, isStructuredData, isGlobalPages, maxColumns.value);
 	const [columnsState, setColumnsState] = useState(initialColumns);
 
-	const [isDeleting, setIsDeleting] = useState<boolean>(false);
-	const [isBulkLoading, setIsBulkLoading] = useState<boolean>(false);
-
 	const createPermission = isDataPrivate ? "content.createPrivateContentTypes" : "content.createPages";
 	const exportPermission = isDataPrivate ? "content.exportPrivateContentTypes" : "content.exportContentTypes";
 	const isAllowedToCreatePages = usePermission(createPermission);
@@ -488,8 +486,6 @@ const Content = (props: IProps): JSX.Element => {
 
 	const bulkDelete = async () => {
 		let allPageVersions: number[] = [];
-		setIsBulkLoading(true); // se podría usar setIsDeleting pero por seguridad prefiero usar uno propio
-		setIsDeleting(true);
 		if (deleteAllVersions) {
 			const selectedPages = currentSitePages.filter((page) => selectedItems.all.includes(page.id));
 			const pageLanguages = selectedPages.map((element) => element.pageLanguages);
@@ -514,8 +510,6 @@ const Content = (props: IProps): JSX.Element => {
 		const previousPage = page - 1;
 		page > 1 && (isLastItem || allPageItemsSelected) ? setPage(previousPage) : getSiteContent();
 		unselectAllItems();
-		setIsBulkLoading(false);
-		setIsDeleting(false);
 	};
 
 	const handleToggleDeleteModal = () => {
@@ -526,7 +520,6 @@ const Content = (props: IProps): JSX.Element => {
 	};
 
 	const bulkPublishAction = async (isPublish: boolean) => {
-		setIsBulkLoading(true);
 		const { notPublished, published, drafts } = selectedItems;
 
 		if (drafts && drafts.length > 0) {
@@ -555,15 +548,12 @@ const Content = (props: IProps): JSX.Element => {
 
 		getSiteContent();
 		unselectAllItems();
-		setIsBulkLoading(false);
 	};
 
 	const bulkPublish = () => {
 		if (isStructuredData) {
-			setIsBulkLoading(true);
 			setDataStatus(selectedItems.all, "undraft");
 			unselectAllItems();
-			setIsBulkLoading(false);
 		} else {
 			bulkPublishAction(true);
 		}
@@ -571,10 +561,8 @@ const Content = (props: IProps): JSX.Element => {
 
 	const bulkUnpublish = () => {
 		if (isStructuredData) {
-			setIsBulkLoading(true);
 			setDataStatus(selectedItems.all, "draft");
 			unselectAllItems();
-			setIsBulkLoading(false);
 		} else {
 			bulkPublishAction(false);
 		}
@@ -619,7 +607,7 @@ const Content = (props: IProps): JSX.Element => {
 			sortedListStatus={sortedListStatus}
 			filterItems={filterItems}
 			isEditable={isDataEditable}
-			isLoading={isBulkLoading}
+			isLoading={isSaving}
 			filterValues={filterValues}
 			categoryColumns={categoryColumns}
 			columns={columnsState}
@@ -706,6 +694,7 @@ const Content = (props: IProps): JSX.Element => {
 					toggleDeletedToast();
 				}
 				isLastItem && previousPage !== 1 ? setPage(previousPage) : getSiteContent();
+				return deleted;
 			};
 
 			const deleteCurrentPageBulk = async (ids: number[]) => {
@@ -717,6 +706,7 @@ const Content = (props: IProps): JSX.Element => {
 					toggleDeletedToast();
 				}
 				isLastItem && previousPage !== 1 ? setPage(previousPage) : getSiteContent();
+				return deleted;
 			};
 
 			const pageItemFunctions = {
@@ -815,7 +805,6 @@ const Content = (props: IProps): JSX.Element => {
 
 	const resetFilter = () => resetFilterQuery();
 
-
 	const undoDeleteAction = async () => {
 		if (deletedItem) {
 			await restorePage(deletedItem);
@@ -943,6 +932,7 @@ const Content = (props: IProps): JSX.Element => {
 						onScroll={onScroll}
 						hasFixedHeader={true}
 						tableRef={tableRef}
+						skipLoading={isSaving}
 					>
 						<S.SearchTags>
 							<SearchTagsBar query={currentSearch} setQuery={handleSearch} />
@@ -984,7 +974,7 @@ const Content = (props: IProps): JSX.Element => {
 				isOpen={isDeleteOpen}
 				toggleModal={toggleDeleteModal}
 				onDelete={bulkDelete}
-				isDeleting={isDeleting}
+				isDeleting={isSaving}
 				{...{ isTranslated: arePagesTranslated, deleteAllVersions, setDeleteAllVersions }}
 			/>
 			{isVisible && <Toast {...toastProps} />}
@@ -1012,6 +1002,7 @@ const mapStateToProps = (state: IRootState) => ({
 	activatedDataPacks: state.dataPacks.activated,
 	activatedTemplates: state.dataPacks.templates,
 	isLoading: state.app.isLoading,
+	isSaving: state.app.isSaving,
 	currentSiteErrorPages: state.sites.currentSiteErrorPages,
 	sitesByLang: state.sites.sitesByLang,
 	user: state.users.currentUser,
@@ -1121,6 +1112,7 @@ interface IPagesProps {
 	activatedDataPacks: IDataPack[];
 	activatedTemplates: any[];
 	isLoading: boolean;
+	isSaving: boolean;
 	currentSiteErrorPages: number[];
 	sites: ISite[];
 	sitesByLang: ISite[];

package/src/modules/FileDrive/FileModal/DetailPanel/index.tsx

@@ -9,9 +9,10 @@ import { LOCALE } from "@ax/locales";
 import type { IFile, IRootState } from "@ax/types";
 
 import { DeleteFileModal } from "../../atoms";
-import * as S from "./style";
 import UsageContent from "./UsageContent";
 
+import * as S from "./style";
+
 const DetailPanel = (props: IProps) => {
 	const {
 		file,
@@ -29,6 +30,7 @@ const DetailPanel = (props: IProps) => {
 	const { title, alt, tags, site } = file;
 
 	const [selectedTab, setSelectedTab] = useState("details");
+	const [isDeleting, setIsDeleting] = useState(false);
 	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
@@ -57,10 +59,15 @@ const DetailPanel = (props: IProps) => {
 
 	const handleCopyUrl = () => navigator.clipboard.writeText(file.url);
 
-	const handleDeleteFile = () => {
-		onDelete(file.id);
-		isDeleteOpen && toggleDeleteModal();
-		toggleModal();
+	const handleDeleteFile = async () => {
+		setIsDeleting(true);
+		try {
+			await onDelete(file.id);
+		} finally {
+			setIsDeleting(false);
+			toggleDeleteModal();
+			toggleModal();
+		}
 	};
 
 	const handleSelectedTab = (tab: "details" | "in use") => {
@@ -69,13 +76,6 @@ const DetailPanel = (props: IProps) => {
 		}
 	};
 
-	const mainNewModalAction = {
-		title: "Delete document",
-		onClick: () => handleDeleteFile(),
-	};
-
-	const secondaryNewModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
 	const tabs = ["details", "in use"];
 
 	return (
@@ -165,9 +165,9 @@ const DetailPanel = (props: IProps) => {
 				<DeleteFileModal
 					isOpen={isDeleteOpen}
 					toggleModal={toggleDeleteModal}
-					mainModalAction={mainNewModalAction}
-					secondaryModalAction={secondaryNewModalAction}
 					title={file.fileName}
+					onDelete={handleDeleteFile}
+					isDeleting={isDeleting}
 					isChild={true}
 				/>
 			)}

package/src/modules/FileDrive/FolderItem/index.tsx

@@ -1,25 +1,33 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
-import { IActionMenuOption, IFolder } from "@ax/types";
 import { Icon, Tooltip } from "@ax/components";
-import { useModal } from "@ax/hooks";
 import { fileDriveActions } from "@ax/containers/FileDrive";
-import { DeleteFolderModal, MoveItemModal, RenameFolderModal } from "../atoms";
 import { trimText } from "@ax/helpers";
+import { useModals } from "@ax/hooks";
+import type { IActionMenuOption, IFolder, IRootState } from "@ax/types";
+
+import { DeleteFolderModal, MoveItemModal, RenameFolderModal } from "../atoms";
 
 import * as S from "./style";
 
 const FolderItem = (props: IProps) => {
-	const { folder, isAllowedToDelete, isAllowedToEdit, isAllowedToMove, onClick, onDelete, toggleToast, updateFolder } =
-		props;
+	const {
+		folder,
+		isAllowedToDelete,
+		isAllowedToEdit,
+		isAllowedToMove,
+		isSaving,
+		onClick,
+		onDelete,
+		toggleToast,
+		updateFolder,
+	} = props;
 	const { id, folderName, parentId, site } = folder;
 
 	const initState = { folderName, parentId };
 	const [folderForm, setFolderForm] = useState(initState);
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isRenameOpen, toggleModal: toggleRenameModal } = useModal();
-	const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["delete", "rename", "move"]);
 
 	const setName = (name: string) => setFolderForm({ ...folderForm, folderName: name });
 	const setParent = (folderID: number) => setFolderForm({ ...folderForm, parentId: folderID });
@@ -31,7 +39,7 @@ const FolderItem = (props: IProps) => {
 			{
 				label: "Rename",
 				icon: "edit",
-				action: () => toggleRenameModal(),
+				action: () => toggleModal("rename"),
 			},
 		];
 
@@ -41,7 +49,7 @@ const FolderItem = (props: IProps) => {
 				{
 					label: "Move to...",
 					icon: "change",
-					action: () => toggleMoveModal(),
+					action: () => toggleModal("move"),
 				},
 			];
 		}
@@ -53,16 +61,16 @@ const FolderItem = (props: IProps) => {
 			{
 				label: "Delete",
 				icon: "delete",
-				action: () => toggleDeleteModal(),
+				action: () => toggleModal("delete"),
 			},
 		];
 	}
 
 	const handleClick = () => onClick(id);
 
-	const handleDeleteFolder = () => {
-		onDelete(folder);
-		isDeleteOpen && toggleDeleteModal();
+	const handleDeleteFolder = async () => {
+		await onDelete(folder);
+		isOpen("delete") && toggleModal("delete");
 	};
 
 	const handleUpdateFolder = async (toast = false) => {
@@ -72,39 +80,17 @@ const FolderItem = (props: IProps) => {
 			site || "global",
 		);
 		if (updated) {
-			isRenameOpen && toggleRenameModal();
+			isOpen("rename") && toggleModal("rename");
 			toast && toggleToast();
 		}
 	};
 
 	const handleModalClose = () => {
 		setFolderForm(initState);
-		isMoveOpen && toggleMoveModal();
-		isRenameOpen && toggleRenameModal();
+		isOpen("move") && toggleModal("move");
+		isOpen("rename") && toggleModal("rename");
 	};
 
-	const mainDeleteModalAction = {
-		title: "Delete Folder",
-		onClick: () => handleDeleteFolder(),
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const mainRenameModalAction = {
-		title: "Rename Folder",
-		onClick: () => handleUpdateFolder(),
-		disabled: folderForm.folderName.trim().length === 0,
-	};
-
-	const secondaryRenameModalAction = { title: "Cancel", onClick: handleModalClose };
-
-	const mainMoveModalAction = {
-		title: "Move",
-		onClick: () => handleUpdateFolder(true),
-	};
-
-	const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
-
 	const FolderTitle = () =>
 		folderName.length > 15 ? (
 			<Tooltip content={folderName}>
@@ -123,35 +109,36 @@ const FolderItem = (props: IProps) => {
 				<FolderTitle />
 				<S.StyledActionMenu icon="more" options={menuOptions} tooltip="File actions" />
 			</S.Wrapper>
-			{isDeleteOpen && (
+			{isOpen("delete") && (
 				<DeleteFolderModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
 					title={folderName}
+					onDelete={handleDeleteFolder}
+					isDeleting={isSaving}
 				/>
 			)}
-			{isRenameOpen && (
+			{isOpen("rename") && (
 				<RenameFolderModal
-					isOpen={isRenameOpen}
+					isOpen={isOpen("rename")}
 					toggleModal={handleModalClose}
-					mainModalAction={mainRenameModalAction}
-					secondaryModalAction={secondaryRenameModalAction}
 					value={folderForm.folderName}
 					setValue={setName}
+					onUpdateFolder={() => handleUpdateFolder()}
+					isNameEmpty={folderForm.folderName.trim().length === 0}
+					isUpdating={isSaving}
 				/>
 			)}
-			{isMoveOpen && (
+			{isOpen("move") && (
 				<MoveItemModal
-					isOpen={isMoveOpen}
+					isOpen={isOpen("move")}
 					toggleModal={handleModalClose}
-					mainModalAction={mainMoveModalAction}
-					secondaryModalAction={secondaryMoveModalAction}
 					folder={folderForm.parentId}
 					setFolder={setParent}
 					hidden={[folder.id]}
 					hideRoot={!parentId}
+					onMove={() => handleUpdateFolder(true)}
+					isMoving={isSaving}
 				/>
 			)}
 		</>
@@ -163,6 +150,7 @@ interface IProps {
 	isAllowedToEdit: boolean;
 	isAllowedToDelete: boolean;
 	isAllowedToMove: boolean;
+	isSaving: boolean;
 	onClick(folderID: number): void;
 	onDelete(folder: IFolder): void;
 	toggleToast(): void;
@@ -173,8 +161,12 @@ interface IProps {
 	): Promise<boolean>;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+	isSaving: state.app.isSaving,
+});
+
 const mapDispatchToProps = {
 	updateFolder: fileDriveActions.updateFolder,
 };
 
-export default connect(null, mapDispatchToProps)(FolderItem);
+export default connect(mapStateToProps, mapDispatchToProps)(FolderItem);

package/src/modules/FileDrive/GridItem/index.tsx

@@ -1,8 +1,10 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
+
 import { CheckField, Tag, Tooltip } from "@ax/components";
-import { IActionMenuOption, ICheck, IFile } from "@ax/types";
 import { formatBytes, getFileIcon, getFormattedDateWithTimezone, trimText } from "@ax/helpers";
-import { useModal } from "@ax/hooks";
+import { useModals } from "@ax/hooks";
+import type { IActionMenuOption, ICheck, IFile } from "@ax/types";
 
 import { DeleteFileModal, MoveItemModal } from "../atoms";
 
@@ -17,6 +19,7 @@ const GridItem = (props: IProps) => {
 		isAllowedToEdit,
 		isAllowedToMove,
 		isSearching,
+		isSaving,
 		onChange,
 		onClick,
 		onDelete,
@@ -26,8 +29,8 @@ const GridItem = (props: IProps) => {
 	const { id, fileName, fileType, sizeBytes, uploadDate, folder } = file;
 
 	const [selectedFolder, setSelectedFolder] = useState<number>(currentFolderID || 0);
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+	const [isDeleting, setIsDeleting] = useState(false);
+	const { isOpen, toggleModal } = useModals(["delete", "move"]);
 
 	const handleChange = (value: ICheck) => onChange(value);
 	const handleClick = () => onClick(file);
@@ -50,7 +53,7 @@ const GridItem = (props: IProps) => {
 				{
 					label: "Move to...",
 					icon: "change",
-					action: () => toggleMoveModal(),
+					action: () => toggleModal("move"),
 				},
 			];
 		}
@@ -62,45 +65,36 @@ const GridItem = (props: IProps) => {
 			{
 				label: "Delete",
 				icon: "delete",
-				action: () => toggleDeleteModal(),
+				action: () => toggleModal("delete"),
 			},
 		];
 	}
 
 	const iconUrl = `/img/icons/${getFileIcon(fileType)}`;
 
-	const handleDeleteFile = () => {
-		onDelete(id);
-		isDeleteOpen && toggleDeleteModal();
+	const handleDeleteFile = async () => {
+		setIsDeleting(true);
+		try {
+			await onDelete(id);
+		} finally {
+			setIsDeleting(false);
+			toggleModal("delete");
+		}
 	};
 
-	const handleMoveFile = () => {
+	const handleMoveFile = async () => {
 		if (folder?.folderId !== selectedFolder) {
-			onMove(id, selectedFolder);
-			isMoveOpen && toggleMoveModal();
+			await onMove(id, selectedFolder);
+			isOpen("move") && toggleModal("move");
 			setSelectedFolder(0);
 		}
 	};
 
 	const handleModalClose = () => {
 		setSelectedFolder(0);
-		isMoveOpen && toggleMoveModal();
-	};
-
-	const mainDeleteModalAction = {
-		title: "Delete document",
-		onClick: () => handleDeleteFile(),
+		isOpen("move") && toggleModal("move");
 	};
 
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const mainMoveModalAction = {
-		title: "Move",
-		onClick: () => handleMoveFile(),
-	};
-
-	const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
-
 	const FileTitle = () =>
 		fileName.length > 40 ? (
 			<Tooltip content={fileName}>
@@ -144,24 +138,24 @@ const GridItem = (props: IProps) => {
 					</S.TagWrapper>
 				)}
 			</S.Wrapper>
-			{isDeleteOpen && (
+			{isOpen("delete") && (
 				<DeleteFileModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
 					title={fileName}
+					onDelete={handleDeleteFile}
+					isDeleting={isDeleting}
 				/>
 			)}
-			{isMoveOpen && (
+			{isOpen("move") && (
 				<MoveItemModal
-					isOpen={isMoveOpen}
+					isOpen={isOpen("move")}
 					toggleModal={handleModalClose}
-					mainModalAction={mainMoveModalAction}
-					secondaryModalAction={secondaryMoveModalAction}
 					folder={selectedFolder}
 					setFolder={setSelectedFolder}
 					hideRoot={!folder}
+					onMove={handleMoveFile}
+					isMoving={isSaving}
 				/>
 			)}
 		</>
@@ -176,6 +170,7 @@ interface IProps {
 	isAllowedToDelete: boolean;
 	isAllowedToMove: boolean;
 	isSearching: boolean;
+	isSaving: boolean;
 	onChange(e: ICheck): void;
 	onClick(file: IFile): void;
 	onDelete(fileID: number): void;

package/src/modules/FileDrive/ListItem/index.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import { useState } from "react";
+
 import { CheckField, ElementsTooltip, Tag, Tooltip } from "@ax/components";
-import { IActionMenuOption, ICheck, IFile } from "@ax/types";
 import { formatBytes, getFileIcon, getFormattedDateWithTimezone, trimText } from "@ax/helpers";
-import { useModal } from "@ax/hooks";
+import { useModals } from "@ax/hooks";
+import type { IActionMenuOption, ICheck, IFile } from "@ax/types";
 
 import { DeleteFileModal, MoveItemModal } from "../atoms";
 
@@ -18,6 +19,7 @@ const ListItem = (props: IProps) => {
 		isAllowedToMove,
 		isSearching,
 		hoverCheck,
+		isSaving,
 		onChange,
 		onClick,
 		onDelete,
@@ -26,8 +28,8 @@ const ListItem = (props: IProps) => {
 	const { id, fileName, fileType, sizeBytes, uploadDate, tags, folder } = file;
 
 	const [selectedFolder, setSelectedFolder] = useState<number>(currentFolderID || 0);
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isMoveOpen, toggleModal: toggleMoveModal } = useModal();
+	const [isDeleting, setIsDeleting] = useState(false);
+	const { isOpen, toggleModal } = useModals(["delete", "move"]);
 
 	const handleChange = (value: ICheck) => onChange(value);
 	const handleClick = () => onClick(file);
@@ -49,7 +51,7 @@ const ListItem = (props: IProps) => {
 				{
 					label: "Move to...",
 					icon: "change",
-					action: () => toggleMoveModal(),
+					action: () => toggleModal("move"),
 				},
 			];
 		}
@@ -61,45 +63,36 @@ const ListItem = (props: IProps) => {
 			{
 				label: "Delete",
 				icon: "delete",
-				action: () => toggleDeleteModal(),
+				action: () => toggleModal("delete"),
 			},
 		];
 	}
 
 	const iconUrl = `/img/icons/${getFileIcon(fileType)}`;
 
-	const handleDeleteFile = () => {
-		onDelete(id);
-		isDeleteOpen && toggleDeleteModal();
+	const handleDeleteFile = async () => {
+		setIsDeleting(true);
+		try {
+			await onDelete(id);
+		} finally {
+			setIsDeleting(false);
+			toggleModal("delete");
+		}
 	};
 
-	const handleMoveFile = () => {
+	const handleMoveFile = async () => {
 		if (folder?.folderId !== selectedFolder) {
-			onMove(id, selectedFolder);
-			isMoveOpen && toggleMoveModal();
+			await onMove(id, selectedFolder);
+			isOpen("move") && toggleModal("move");
 			setSelectedFolder(0);
 		}
 	};
 
 	const handleModalClose = () => {
 		setSelectedFolder(0);
-		isMoveOpen && toggleMoveModal();
-	};
-
-	const mainDeleteModalAction = {
-		title: "Delete document",
-		onClick: () => handleDeleteFile(),
+		isOpen("move") && toggleModal("move");
 	};
 
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const mainMoveModalAction = {
-		title: "Move",
-		onClick: () => handleMoveFile(),
-	};
-
-	const secondaryMoveModalAction = { title: "Cancel", onClick: handleModalClose };
-
 	const FileTitle = () =>
 		fileName.length > 50 ? <Tooltip content={fileName}>{trimText(fileName, 50)}</Tooltip> : <>{fileName}</>;
 
@@ -157,24 +150,24 @@ const ListItem = (props: IProps) => {
 					<S.StyledActionMenu icon="more" options={menuOptions} tooltip="File actions" />
 				</S.ActionsCell>
 			</S.ItemRow>
-			{isDeleteOpen && (
+			{isOpen("delete") && (
 				<DeleteFileModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
 					title={fileName}
+					onDelete={handleDeleteFile}
+					isDeleting={isSaving}
 				/>
 			)}
-			{isMoveOpen && (
+			{isOpen("move") && (
 				<MoveItemModal
-					isOpen={isMoveOpen}
+					isOpen={isOpen("move")}
 					toggleModal={handleModalClose}
-					mainModalAction={mainMoveModalAction}
-					secondaryModalAction={secondaryMoveModalAction}
 					folder={selectedFolder}
 					setFolder={setSelectedFolder}
 					hideRoot={!folder}
+					onMove={handleMoveFile}
+					isMoving={isSaving}
 				/>
 			)}
 		</>
@@ -194,6 +187,7 @@ interface IProps {
 	onDelete(fileID: number): void;
 	onMove(fileID: number, folderID: number): void;
 	hoverCheck: boolean;
+	isSaving: boolean;
 }
 
 export default ListItem;