@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/modules/Navigation/Menus/List/Table/Item/atoms.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
-import { Modal, FieldsBehavior } from "@ax/components";
-import { IMenuItem } from "@ax/types";
+import { FieldsBehavior, Modal } from "@ax/components";
+import type { IMenuItem } from "@ax/types";
 
 import * as S from "./style";
 
@@ -10,6 +10,7 @@ const RemoveModal = (props: IRemoveModalProps) => {
 
 	const [removeItemState, setRemoveItemState] = useState("deleteItem");
 	const deleteChildren = removeItemState === "deleteChildren";
+	const hasChildren = !!item.children.length;
 
 	const mainRemoveAction = {
 		title: "Delete",
@@ -34,21 +35,33 @@ const RemoveModal = (props: IRemoveModalProps) => {
 		},
 	];
 
-	const RemoveModal = () => (
-		<S.ModalContent>
-			<p>
-				You are going to delete an element that have some associated sections. Choose if you want to delete the element
-				and the sections or only this one.
-			</p>
-			<FieldsBehavior
-				name="removeItemChildren"
-				fieldType="RadioGroup"
-				value={removeItemState}
-				options={removeItemOptions}
-				onChange={setRemoveItemState}
-			/>
-		</S.ModalContent>
-	);
+	const RemoveModalContent = () => {
+		if (hasChildren) {
+			return (
+				<S.ModalContent>
+					<p>
+						You are going to delete an element that have some associated sections. Choose if you want to delete the
+						element and the sections or only this one.
+					</p>
+					<FieldsBehavior
+						name="removeItemChildren"
+						fieldType="RadioGroup"
+						value={removeItemState}
+						options={removeItemOptions}
+						onChange={setRemoveItemState}
+					/>
+				</S.ModalContent>
+			);
+		}
+
+		return (
+			<S.ModalContent>
+				<p>
+					Are you sure you want to delete <strong>this item</strong>?
+				</p>
+			</S.ModalContent>
+		);
+	};
 
 	return (
 		<Modal
@@ -58,8 +71,9 @@ const RemoveModal = (props: IRemoveModalProps) => {
 			title="Delete Item"
 			mainAction={mainRemoveAction}
 			secondaryAction={secondaryRemoveAction}
+			height="auto"
 		>
-			<RemoveModal />
+			<RemoveModalContent />
 		</Modal>
 	);
 };

package/src/modules/Navigation/Menus/List/Table/Item/index.tsx

@@ -1,14 +1,16 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
-import { AnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
 
-import { menuActions } from "@ax/containers/Navigation";
-import { useModal, usePermission } from "@ax/hooks";
-import { IMenuItem } from "@ax/types";
 import { Icon, IconAction, Tooltip } from "@ax/components";
+import { menuActions } from "@ax/containers/Navigation";
+import { useModals, usePermission } from "@ax/hooks";
+import type { IMenuItem } from "@ax/types";
+
+import { type AnimateLayoutChanges, useSortable } from "@dnd-kit/sortable";
 
-import SidePanel from "./../SidePanel";
 import ConfigPanel from "./../ConfigPanel";
+import SidePanel from "./../SidePanel";
 import { RemoveModal } from "./atoms";
 
 import * as S from "./style";
@@ -31,7 +33,7 @@ const Item = (props: IItemProps): JSX.Element => {
 
 	const isAllowedToMangageMenus = usePermission("navigation.manageSiteMenu");
 
-	const removeItemAction = () => (hasChildren ? toggleRemoveModal() : deleteItem(item));
+	const removeItemAction = () => toggleModal("remove");
 
 	const actionMenuOptions = [
 		{
@@ -41,13 +43,10 @@ const Item = (props: IItemProps): JSX.Element => {
 		},
 	];
 
-	const { isOpen, toggleModal } = useModal(false);
-	const { isOpen: isRemoveOpen, toggleModal: toggleRemoveModal } = useModal(false);
+	const { isOpen, toggleModal } = useModals(["sidePanel", "remove", "config"]);
 	const [isOpenedSecond, setIsOpenedSecond] = useState(false);
-	const { isOpen: isConfigOpen, toggleModal: toggleConfigModal } = useModal(false);
 
-	const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>
-		isSorting || wasDragging ? false : true;
+	const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) => !(isSorting || wasDragging);
 
 	const { attributes, isDragging, listeners, setDraggableNodeRef, setDroppableNodeRef, transform, transition } =
 		useSortable({
@@ -77,14 +76,14 @@ const Item = (props: IItemProps): JSX.Element => {
 			resetValues();
 			setItem(item);
 			setIsOpenedSecond(false);
-			toggleModal();
+			toggleModal("sidePanel");
 		}
 	};
 
 	const openConfigModal = () => {
 		resetValues();
 		setItem(item);
-		toggleConfigModal();
+		toggleModal("config");
 	};
 
 	const isGroupingElement = item.config !== null && item.config.type === "group";
@@ -136,18 +135,18 @@ const Item = (props: IItemProps): JSX.Element => {
 						{isAllowedToMangageMenus && <S.StyledActionMenu options={actionMenuOptions} icon="more" />}
 					</S.FlexWrapper>
 				</S.Component>
-				{isOpen && (
+				{isOpen("sidePanel") && (
 					<SidePanel
-						isOpen={isOpen}
+						isOpen={isOpen("sidePanel")}
 						isOpenedSecond={isOpenedSecond}
-						toggleModal={toggleModal}
+						toggleModal={() => toggleModal("sidePanel")}
 						toggleSecondaryPanel={toggleSecondaryPanel}
 						edit={true}
 					/>
 				)}
-				{isConfigOpen && <ConfigPanel isOpen={isConfigOpen} toggleModal={toggleConfigModal} />}
+				{isOpen("config") && <ConfigPanel isOpen={isOpen("config")} toggleModal={() => toggleModal("config")} />}
 			</S.Container>
-			<RemoveModal isOpen={isRemoveOpen} toggleModal={toggleRemoveModal} deleteItem={deleteItem} item={item} />
+			<RemoveModal isOpen={isOpen("remove")} toggleModal={() => toggleModal("remove")} deleteItem={deleteItem} item={item} />
 		</>
 	);
 };

package/src/modules/Navigation/Menus/List/Table/index.tsx

@@ -1,16 +1,23 @@
-import React, { useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { connect } from "react-redux";
+
+import { ErrorToast, Loading } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { menuActions } from "@ax/containers/Navigation";
+import { RouteLeavingGuard } from "@ax/guards";
+import type { IMenuItem, IRootState } from "@ax/types";
+
 import {
 	closestCenter,
 	DndContext,
-	DragEndEvent,
-	DragMoveEvent,
-	DragOverEvent,
-	DragStartEvent,
+	type DragEndEvent,
+	type DragMoveEvent,
+	type DragOverEvent,
+	type DragStartEvent,
 	KeyboardSensor,
 	MeasuringStrategy,
 	PointerSensor,
-	UniqueIdentifier,
+	type UniqueIdentifier,
 	useSensor,
 	useSensors,
 } from "@dnd-kit/core";
@@ -21,15 +28,10 @@ import {
 	verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 
-import { menuActions } from "@ax/containers/Navigation";
-import { appActions } from "@ax/containers/App";
-import { Loading, ErrorToast } from "@ax/components";
-import { RouteLeavingGuard } from "@ax/guards";
-import { IMenuItem, IRootState } from "@ax/types";
-import { buildTree, FlattenedItem, flattenTree, getProjection, removeChildrenOf, setProperty } from "./helpers";
-
 import Header from "./Header";
+import { buildTree, type FlattenedItem, flattenTree, getProjection, removeChildrenOf, setProperty } from "./helpers";
 import Item from "./Item";
+
 import * as S from "./style";
 
 const ItemList = (props: IItemList): JSX.Element => {

package/src/modules/Navigation/Menus/List/index.tsx

@@ -53,7 +53,7 @@ const List = (props: IMenuList): JSX.Element => {
 };
 
 const mapStateToProps = (state: IRootState) => ({
-	currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+	currentSiteID: state.sites.currentSiteInfo?.id || null,
 	lang: state.app.lang,
 	editorMenu: state.menu.editorMenu?.elements || [],
 	savedMenu: state.menu.savedMenu?.elements || [],

package/src/modules/PageEditor/atoms.tsx

@@ -6,15 +6,7 @@ import { Modal, FieldsBehavior } from "@ax/components";
 import * as S from "./style";
 
 const DeleteModal = (props: IDeleteModal): JSX.Element => {
-	const {
-		isOpen,
-		toggleModal,
-		mainModalAction,
-		secondaryModalAction,
-		isTranslated,
-		deleteAllVersions,
-		setDeleteAllVersions,
-	} = props;
+	const { isOpen, toggleModal, isTranslated, deleteAllVersions, setDeleteAllVersions, onDelete, isDeleting } = props;
 
 	const options = [
 		{
@@ -29,14 +21,23 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 		},
 	];
 
+	const mainAction = {
+		title: isDeleting ? "Deleting" : "Delete page",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
 			title="Delete Page?"
-			secondaryAction={secondaryModalAction}
-			mainAction={mainModalAction}
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
 			size="S"
+			height="auto"
 		>
 			{isTranslated ? (
 				<>
@@ -69,6 +70,8 @@ interface IDeleteModal extends IModal {
 	isTranslated: boolean;
 	deleteAllVersions: boolean;
 	setDeleteAllVersions: React.Dispatch<React.SetStateAction<boolean>>;
+	onDelete: () => void;
+	isDeleting?: boolean;
 }
 
 export { DeleteModal };

package/src/modules/PageEditor/index.tsx

@@ -196,12 +196,14 @@ const PageEditor = (props: IProps) => {
 		const { deletePage, deleteBulk } = props;
 		const path = "/sites/pages";
 
-		const allPageVersions = pageLanguages.map((lang: IPageLanguage) => lang.pageId);
-		const isDeleted = deleteAllVersions ? await deleteBulk(allPageVersions) : await deletePage();
-
-		toggleModal("delete");
-		if (isDeleted) {
-			setRoute(path);
+		try {
+			const allPageVersions = pageLanguages.map((lang: IPageLanguage) => lang.pageId);
+			const isDeleted = deleteAllVersions ? await deleteBulk(allPageVersions) : await deletePage();
+			if (isDeleted) {
+				setRoute(path);
+			}
+		} finally {
+			toggleModal("delete");
 		}
 	};
 
@@ -401,7 +403,7 @@ const PageEditor = (props: IProps) => {
 
 	if (!isDraft && isAllowedToDelete) {
 		menuOptions.push({
-			label: "Delete page",
+			label: "Delete",
 			icon: "delete",
 			action: () => toggleModal("delete"),
 		});
@@ -564,13 +566,6 @@ const PageEditor = (props: IProps) => {
 
 	const mainUnpublishAction = { title: "Ok", onClick: () => toggleModal("unpublish") };
 
-	const mainDeleteModalAction = {
-		title: "Delete page",
-		onClick: removePage,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: () => toggleModal("delete") };
-
 	const mainScheduleModalAction = {
 		title: "Schedule",
 		onClick: handleSchedulePublication,
@@ -835,8 +830,8 @@ const PageEditor = (props: IProps) => {
 				<DeleteModal
 					isOpen={isOpen("delete")}
 					toggleModal={() => toggleModal("delete")}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					onDelete={removePage}
+					isDeleting={isSaving}
 					{...{ isTranslated, deleteAllVersions, setDeleteAllVersions }}
 				/>
 				<ScheduleModal

package/src/modules/Redirects/RedirectItem/index.tsx

@@ -1,11 +1,14 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
-import { format } from "date-fns";
 
-import { useModal } from "@ax/hooks";
-import { ICheck, IRedirect } from "@ax/types";
-import { CheckField, ElementsTooltip, Modal } from "@ax/components";
+import { CheckField, ElementsTooltip } from "@ax/components";
 import { redirectsActions } from "@ax/containers/Redirects";
+import { useModals } from "@ax/hooks";
+import type { ICheck, IRedirect, IRootState } from "@ax/types";
+
+import { format } from "date-fns";
+
+import { DeleteModal } from "../atoms";
 import RedirectPanel from "../RedirectPanel";
 
 import * as S from "./style";
@@ -23,11 +26,11 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 		currentFilter,
 		isSiteItem,
 		hoverCheck,
+		isSaving,
 	} = props;
 
-	const { isOpen, toggleModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["edit", "delete"]);
 	const [isOpenedSecond, setIsOpenedSecond] = useState(false);
-	const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
 
 	const toggleSecondaryPanel = () => setIsOpenedSecond(!isOpenedSecond);
 
@@ -35,17 +38,21 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 		const mappedRedirect = { ...redirect, to: { ...redirect.to, linkTo: redirect.to.pageId, href: redirect.to.url } };
 		setFormValues(mappedRedirect);
 		setIsOpenedSecond(false);
-		toggleModal();
+		toggleModal("edit");
 	};
 
 	const handleOnChange = (value: ICheck) => onChange(value);
 
 	const removeItem = async () => {
-		if (redirect.id) {
-			const deleted = await deleteRedirect(redirect.id, currentFilter);
-			if (deleted) {
-				toggleToast();
+		try {
+			if (redirect.id) {
+				const deleted = await deleteRedirect(redirect.id, currentFilter);
+				if (deleted) {
+					toggleToast();
+				}
 			}
+		} finally {
+			toggleModal("delete");
 		}
 	};
 
@@ -53,16 +60,10 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 		{
 			label: "delete",
 			icon: "delete",
-			action: toggleModalDelete,
+			action: () => toggleModal("delete"),
 		},
 	];
 
-	const mainDeleteModalAction = {
-		title: "Delete redirect",
-		onClick: removeItem,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
 	const target =
 		redirect.site?.siteUrl === "/"
 			? `(${redirect.domain || ""})`
@@ -94,9 +95,7 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 				</S.CheckCell>
 				{!isSiteItem && (
 					<S.SiteCell role="cell" onClick={handleClick}>
-						{redirect.site && redirect.site.siteName && (
-							<ElementsTooltip elements={[redirect.site.siteName]} maxChar={20} />
-						)}
+						{redirect.site?.siteName && <ElementsTooltip elements={[redirect.site.siteName]} maxChar={20} />}
 					</S.SiteCell>
 				)}
 				<S.UrlCell role="cell" onClick={handleClick}>
@@ -112,11 +111,11 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 					<S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
 				</S.ActionsCell>
 			</S.ItemRow>
-			{isOpen && (
+			{isOpen("edit") && (
 				<RedirectPanel
-					isOpen={isOpen}
+					isOpen={isOpen("edit")}
 					isOpenedSecond={isOpenedSecond}
-					toggleModal={toggleModal}
+					toggleModal={() => toggleModal("edit")}
 					toggleSecondaryPanel={toggleSecondaryPanel}
 					redirect={redirect}
 					setFormValues={setFormValues}
@@ -125,19 +124,13 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 					currentFilter={currentFilter}
 				/>
 			)}
-			<Modal
-				isOpen={isOpenDelete}
-				hide={toggleModalDelete}
-				title="Delete Redirect"
-				secondaryAction={secondaryDeleteModalAction}
-				mainAction={mainDeleteModalAction}
-				size="S"
-			>
-				<S.ModalContent>
-					Are you sure you want to delete <strong>{redirect.from} redirect</strong>? This action{" "}
-					<strong>cannot be undone</strong>.
-				</S.ModalContent>
-			</Modal>
+			<DeleteModal
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
+				redirectFrom={redirect.from}
+				onDelete={removeItem}
+				isDeleting={isSaving}
+			/>
 		</>
 	);
 };
@@ -153,6 +146,7 @@ interface IProps {
 	currentFilter: string;
 	isSiteItem: boolean;
 	hoverCheck: boolean;
+	isSaving: boolean;
 }
 
 interface IDispatchProps {
@@ -161,8 +155,12 @@ interface IDispatchProps {
 
 type IRedirectItemProps = IProps & IDispatchProps;
 
+const mapStateToProps = (state: IRootState) => ({
+	isSaving: state.app.isSaving,
+});
+
 const mapDispatchToProps = {
 	deleteRedirect: redirectsActions.deleteRedirect,
 };
 
-export default connect(null, mapDispatchToProps)(RedirectItem);
+export default connect(mapStateToProps, mapDispatchToProps)(RedirectItem);

package/src/modules/Redirects/atoms.tsx

@@ -1,32 +1,63 @@
-import React, { useRef } from "react";
+import type React from "react";
+import { useRef } from "react";
 
-import { IModal, IRedirect } from "@ax/types";
 import { Button, Icon, Modal } from "@ax/components";
+import type { IModal, IRedirect } from "@ax/types";
 
 import * as S from "./style";
 
-const DeleteModal = (props: IModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+const DeleteModal = (props: IDeleteModalProps): JSX.Element => {
+	const { isOpen, toggleModal, onDelete, isDeleting = false, redirectFrom } = props;
+	const isSingle = !!redirectFrom;
+
+	const mainModalAction = {
+		title: isDeleting ? "Deleting" : "Delete",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
 			isOpen={isOpen}
 			hide={toggleModal}
-			title="Delete Redirects"
+			title={isSingle ? "Delete Redirect" : "Delete Redirects"}
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
+			height="auto"
 		>
 			<S.ModalContent>
-				Are you sure you want to delete the selected <strong>redirects</strong>? This action{" "}
-				<strong>cannot be undone</strong>.
+				{isSingle ? (
+					<>
+						Are you sure you want to delete <strong>{redirectFrom} redirect</strong>? This action{" "}
+						<strong>cannot be undone</strong>.
+					</>
+				) : (
+					<>
+						Are you sure you want to delete the selected <strong>redirects</strong>? This action{" "}
+						<strong>cannot be undone</strong>.
+					</>
+				)}
 			</S.ModalContent>
 		</Modal>
 	);
 };
 
-const OverwriteModal = (props: IModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+interface IOverwriteModalProps extends IModal {
+	onOverwrite(): void;
+}
+
+const OverwriteModal = (props: IOverwriteModalProps): JSX.Element => {
+	const { isOpen, toggleModal, onOverwrite } = props;
+
+	const mainModalAction = {
+		title: "Overwrite redirect",
+		onClick: onOverwrite,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
@@ -36,6 +67,7 @@ const OverwriteModal = (props: IModal): JSX.Element => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
+			height="auto"
 		>
 			<S.ModalContent>
 				This Redirect is already created. It will overwrite.
@@ -51,7 +83,7 @@ const ImportModal = (props: IImportModal): JSX.Element => {
 
 	const fileInputRef = useRef<HTMLInputElement>(null);
 
-	const handleUploadClick = () => fileInputRef.current && fileInputRef.current.click();
+	const handleUploadClick = () => fileInputRef.current?.click();
 
 	const csvToArray = (str: string, delimiter = ";") => {
 		const fixedStr = str.replace(/,/g, ";").replace(/\r/g, "");
@@ -114,7 +146,7 @@ const ImportModal = (props: IImportModal): JSX.Element => {
 							/>
 							<Button className="button" type="button" buttonStyle="line">
 								<a
-									href={process.env.PUBLIC_URL + "/templates/template-redirects.csv"}
+									href={`${process.env.PUBLIC_URL}/templates/template-redirects.csv`}
 									download={"template-redirects.csv"}
 								>
 									Download Template
@@ -132,7 +164,14 @@ const ImportModal = (props: IImportModal): JSX.Element => {
 };
 
 const ImportCheckModal = (props: IImportCheckModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, imports, totalImports } = props;
+	const { isOpen, toggleModal, onImport, imports, totalImports } = props;
+
+	const mainModalAction = {
+		title: "Import correct directs",
+		onClick: onImport,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	const mapModalItems = (items: IRedirect[], icon: string, type: "online" | "error" | "info") => {
 		return items.map((item: IRedirect) => (
@@ -206,6 +245,13 @@ interface IImportCheckModal extends IModal {
 		existing: IRedirect[];
 		ok: IRedirect[];
 	};
+	onImport(): void;
+}
+
+interface IDeleteModalProps extends IModal {
+	onDelete(): void;
+	isDeleting?: boolean;
+	redirectFrom?: string;
 }
 
 export { DeleteModal, ImportModal, OverwriteModal, ImportCheckModal };