@griddo/ax 12.6.0 → 12.6.1

package/src/modules/ActivityLog/ItemLogUser/UserItem/EventItem/index.tsx

@@ -1,6 +1,5 @@
 import type React from "react";
 import { useState } from "react";
-import { connect } from "react-redux";
 
 import { RestoreModal } from "@ax/components";
 import { activityLogActions } from "@ax/containers/ActivityLog";
@@ -8,9 +7,9 @@ import { navigationActions } from "@ax/containers/Navigation";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { useModal } from "@ax/hooks";
-import type { IRootState } from "@ax/types";
+import { useAppDispatch, useAppSelector } from "@ax/store";
 
-import type { LogActivityDTO, LogContentDTO, LogContentTypeDTO } from "@griddo/api-types";
+import type { LogActivityDTO } from "@griddo/api-types";
 
 import { eventKey } from "./../../../constants";
 import DetailModal from "./../../../DetailModal";
@@ -19,7 +18,10 @@ import { getContentTypeSchemaVersion, getPageSchemaVersion } from "./../../../ut
 import * as S from "./style";
 
 const EventItem = (props: IEventItemProps) => {
-	const { item, schemaVersion, restorePage, restoreNavigation, restoreStructuredData, goToLogContent, getLog } = props;
+	const { item, getLog } = props;
+
+	const dispatch = useAppDispatch();
+	const schemaVersion = useAppSelector((state) => state.structuredData.schemaVersion);
 
 	const { created, site, contentType, content, eventType } = item;
 
@@ -33,14 +35,14 @@ const EventItem = (props: IEventItemProps) => {
 		switch (type) {
 			case eventKey.DELETED_PAGE:
 			case eventKey.DELETED_CONTENT_TYPE_PAGE:
-				return await restorePage(id);
+				return await dispatch(pageEditorActions.restorePage(id));
 			case eventKey.DELETED_HEADER:
-				return await restoreNavigation(id, "header");
+				return await dispatch(navigationActions.restoreNavigation(id, "header"));
 			case eventKey.DELETED_FOOTER:
-				return await restoreNavigation(id, "footer");
+				return await dispatch(navigationActions.restoreNavigation(id, "footer"));
 			case eventKey.DELETED_CATEGORY:
 			case eventKey.DELETED_CONTENT_TYPE:
-				return await restoreStructuredData(id);
+				return await dispatch(structuredDataActions.restoreStructuredDataContent(id));
 			default:
 				return false;
 		}
@@ -84,12 +86,12 @@ const EventItem = (props: IEventItemProps) => {
 	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
 		e.stopPropagation();
 		const siteID = site?.id || null;
-		goToLogContent(contentType, content, siteID);
+		dispatch(activityLogActions.goToLogContent({ contentType, content, site: siteID }));
 	};
 
 	const handleKeyDown = () => {
 		const siteID = site?.id || null;
-		goToLogContent(contentType, content, siteID);
+		dispatch(activityLogActions.goToLogContent({ contentType, content, site: siteID }));
 	};
 
 	return (
@@ -151,23 +153,7 @@ const EventItem = (props: IEventItemProps) => {
 
 interface IEventItemProps {
 	item: LogActivityDTO;
-	schemaVersion: string;
-	restorePage(id: number): Promise<boolean>;
-	restoreNavigation(navID: number, type: string): Promise<boolean>;
-	restoreStructuredData(dataID: number): Promise<boolean>;
-	goToLogContent(contentType: LogContentTypeDTO | null, content: LogContentDTO | null, site: number | null): void;
 	getLog(): void;
 }
 
-const mapStateToProps = (state: IRootState) => ({
-	schemaVersion: state.structuredData.schemaVersion,
-});
-
-const mapDispatchToProps = {
-	restorePage: pageEditorActions.restorePage,
-	restoreNavigation: navigationActions.restoreNavigation,
-	restoreStructuredData: structuredDataActions.restoreStructuredDataContent,
-	goToLogContent: activityLogActions.goToLogContent,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(EventItem);
+export default EventItem;

package/src/modules/ActivityLog/index.tsx

@@ -1,33 +1,27 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { connect } from "react-redux";
-import { format, subDays } from "date-fns";
 
-import type { LogActivityExportRequest, LogActivityPaginationRequest } from "@griddo/api-types";
-import type { ILogItemsByDay, ILogItemsByUser, IQueryValue, IRootState, IStructuredData } from "@ax/types";
 import { EmptyState, ErrorToast, FilterTagsBar, MainWrapper, SearchTagsBar, Select, TableList } from "@ax/components";
 import { activityLogActions } from "@ax/containers/ActivityLog";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { useModal } from "@ax/hooks";
+import { useAppDispatch, useAppSelector } from "@ax/store";
+import type { ILogItemsByDay, ILogItemsByUser, IQueryValue } from "@ax/types";
 
+import type { LogActivityExportRequest, LogActivityPaginationRequest } from "@griddo/api-types";
+import { format, subDays } from "date-fns";
+
+import DownloadModal from "./DownloadModal";
 import { useFilterQuery } from "./hooks";
-import TableHeader from "./TableHeader";
 import ItemLog from "./ItemLog";
 import ItemLogUser from "./ItemLogUser";
-import DownloadModal from "./DownloadModal";
+import TableHeader from "./TableHeader";
 
 import * as S from "./style";
 
-const ActivityLog = (props: IActivityLogProps) => {
-	const {
-		activityLog,
-		listMode,
-		setListMode,
-		getActivityLog,
-		getActivityLogByUser,
-		downloadActivityLog,
-		getStructuredData,
-		setCurrentData,
-	} = props;
+const ActivityLog = () => {
+	const dispatch = useAppDispatch();
+	const activityLog = useAppSelector((state) => state.activityLog.activityLog);
+	const listMode = useAppSelector((state) => state.activityLog.listMode);
 
 	const itemsPerPage = 100;
 	const firstPage = 1;
@@ -68,13 +62,14 @@ const ActivityLog = (props: IActivityLogProps) => {
 	const handleGetLog = async () => {
 		const params = getParams();
 		if (isModeUser) {
-			await getActivityLogByUser(params);
+			await dispatch(activityLogActions.getActivityLogByUser(params));
 		} else {
-			await getActivityLog(params);
+			await dispatch(activityLogActions.getActivityLog(params));
 		}
 	};
 
-	const handleUpdateStructuredDate = async () => await getStructuredData(null, null, false);
+	const handleUpdateStructuredDate = async () =>
+		await dispatch(structuredDataActions.getStructuredData(null, null, false));
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
@@ -84,7 +79,7 @@ const ActivityLog = (props: IActivityLogProps) => {
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		handleUpdateStructuredDate();
-		setCurrentData(null);
+		dispatch(structuredDataActions.setCurrentData(null));
 	}, []);
 
 	const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
@@ -92,11 +87,11 @@ const ActivityLog = (props: IActivityLogProps) => {
 	const handleSelectChange = async (value: string) => {
 		const params = getParams();
 		if (value === "user") {
-			await getActivityLogByUser({ ...params, page: firstPage });
+			await dispatch(activityLogActions.getActivityLogByUser({ ...params, page: firstPage }));
 		} else {
-			await getActivityLog({ ...params, page: firstPage });
+			await dispatch(activityLogActions.getActivityLog({ ...params, page: firstPage }));
 		}
-		setListMode(value);
+		dispatch(activityLogActions.setListMode(value));
 	};
 
 	const sortItems = async (isAscending: boolean) => {
@@ -139,7 +134,7 @@ const ActivityLog = (props: IActivityLogProps) => {
 			format: [downloadForm.format],
 		};
 
-		await downloadActivityLog(data);
+		await dispatch(activityLogActions.downloadActivityLog(data));
 
 		toggleDownloadModal();
 		setDownloadForm(initialState);
@@ -211,6 +206,7 @@ const ActivityLog = (props: IActivityLogProps) => {
 	return (
 		<MainWrapper
 			title="Logs"
+			screen="activity-log"
 			rightButton={rightButtonProps}
 			rightLineButton={rightLineButtonProps}
 			searchAction={handleSearch}
@@ -294,29 +290,4 @@ export interface IDownloadFormState {
 	endDate: string | null;
 }
 
-interface IActivityLogProps {
-	activityLog: ILogItemsByDay | ILogItemsByUser;
-	listMode: string;
-	getActivityLog(params: LogActivityPaginationRequest): Promise<void>;
-	getActivityLogByUser(params: LogActivityPaginationRequest): Promise<void>;
-	setListMode(listMode: string): void;
-	downloadActivityLog(data: LogActivityExportRequest): Promise<void>;
-	getStructuredData(token: string | null, siteID?: number | null, hasLoading?: boolean): Promise<void>;
-	setCurrentData(currentStructuredData: IStructuredData | null): void;
-}
-
-const mapStateToProps = (state: IRootState) => ({
-	activityLog: state.activityLog.activityLog,
-	listMode: state.activityLog.listMode,
-});
-
-const mapDispatchToProps = {
-	getActivityLog: activityLogActions.getActivityLog,
-	getActivityLogByUser: activityLogActions.getActivityLogByUser,
-	setListMode: activityLogActions.setListMode,
-	downloadActivityLog: activityLogActions.downloadActivityLog,
-	getStructuredData: structuredDataActions.getStructuredData,
-	setCurrentData: structuredDataActions.setCurrentData,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ActivityLog);
+export default ActivityLog;

package/src/modules/Analytics/index.tsx

@@ -1,22 +1,25 @@
-import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
+import React, { memo, useEffect, useState } from "react";
 
-import type { IAnalytics, IDimension, IDimensionsGroup, IRootState } from "@ax/types";
-import { appActions } from "@ax/containers/App";
+import { ErrorToast, FieldsBehavior, Loading, MainWrapper } from "@ax/components";
 import { analyticsActions } from "@ax/containers/Analytics";
-import { MainWrapper, ErrorToast, Loading, FieldsBehavior } from "@ax/components";
+import { appActions } from "@ax/containers/App";
 import { RouteLeavingGuard } from "@ax/guards";
-import { useIsDirty } from "@ax/hooks";
-import { useModal } from "@ax/hooks";
+import { useIsDirty, useModal } from "@ax/hooks";
+import { useAppDispatch, useAppSelector } from "@ax/store";
+import type { IDimension, IDimensionsGroup } from "@ax/types";
 
 import DimensionItem from "./DimensionItem";
 import DimensionPanel from "./DimensionPanel";
 import GroupItem from "./GroupItem";
 import GroupPanel from "./GroupPanel";
+
 import * as S from "./style";
 
-const Analytics = (props: IProps): JSX.Element => {
-	const { isSaving, isLoading, analytics, getAnalytics, setHistoryPush, updateAnalytics } = props;
+const Analytics = (): JSX.Element => {
+	const dispatch = useAppDispatch();
+	const isSaving = useAppSelector((state) => state.app.isSaving);
+	const isLoading = useAppSelector((state) => state.app.isLoading);
+	const analytics = useAppSelector((state) => state.analytics);
 
 	const [analyticsState, setAnalyticsState] = useState(analytics);
 	const { isDirty, resetDirty } = useIsDirty(analyticsState);
@@ -31,16 +34,27 @@ const Analytics = (props: IProps): JSX.Element => {
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		const handleGetAnalytics = async () => await getAnalytics();
-		handleGetAnalytics();
+		// `null` is the global scope, which the API spells "global".
+		dispatch(analyticsActions.getAnalytics(null));
 	}, []);
 
+	// `resetDirty()`, not `setIsDirty(false)`: it also moves useIsDirty's baseline to the
+	// state being hydrated here. useIsDirty snapshots its baseline during render, so on
+	// the first visit — nothing persisted for this scope — the store is still the initial
+	// state and the empty→loaded hop reads as an edit: Save enabled and the leave guard
+	// armed before the user touches anything, against this screen's own AC6. Same mine as
+	// Settings/Social (docs/RTK-MIGRATION.md §5).
 	useEffect(() => {
 		setAnalyticsState(analytics);
-	}, [analytics]);
+		resetDirty();
+	}, [analytics, resetDirty]);
 
 	const handleSave = async () => {
-		const isSaved = await updateAnalytics(analyticsState);
+		// `.unwrap()` is what hands over handleRequest's boolean: the dispatch itself
+		// resolves to the fulfilled action, which would be truthy even on failure.
+		const isSaved = await dispatch(
+			analyticsActions.updateAnalytics({ analytics: analyticsState, siteId: null }),
+		).unwrap();
 		if (isSaved) resetDirty();
 	};
 
@@ -109,7 +123,7 @@ const Analytics = (props: IProps): JSX.Element => {
 		changeGroups(updatedGroups);
 	};
 
-	const setRoute = (path: string) => setHistoryPush(path);
+	const setRoute = (path: string) => dispatch(appActions.setHistoryPush(path));
 	const modalText = (
 		<>
 			Some analytics <strong>are not saved</strong>.{" "}
@@ -123,7 +137,7 @@ const Analytics = (props: IProps): JSX.Element => {
 	return (
 		<>
 			<RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
-			<MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps}>
+			<MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps} screen="analytics-global">
 				<ErrorToast />
 				<S.Wrapper>
 					<S.FormWrapper>
@@ -186,30 +200,7 @@ const Analytics = (props: IProps): JSX.Element => {
 	);
 };
 
-const mapStateToProps = (state: IRootState) => ({
-	isSaving: state.app.isSaving,
-	isLoading: state.app.isLoading,
-	analytics: state.analytics,
-});
-
-const mapDispatchToProps = {
-	setHistoryPush: appActions.setHistoryPush,
-	getAnalytics: analyticsActions.getAnalytics,
-	updateAnalytics: analyticsActions.updateAnalytics,
-};
-
-interface IAnalyticsProps {
-	isSaving: boolean;
-	isLoading: boolean;
-	analytics: IAnalytics;
-}
-
-interface IDispatchProps {
-	getAnalytics(siteId?: number | null): Promise<void>;
-	setHistoryPush(path: string, isEditor?: boolean): void;
-	updateAnalytics(analyticsState: IAnalytics, siteId?: number | null): Promise<boolean>;
-}
-
-type IProps = IAnalyticsProps & IDispatchProps;
-
-export default connect(mapStateToProps, mapDispatchToProps)(Analytics);
+// This screen is the global scope of the analytics settings: it reads everything
+// from the store and takes no props. `connect` memoised it implicitly; `memo` keeps
+// that now it is gone.
+export default memo(Analytics);

package/src/modules/App/Routing/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
-import { Switch, Route, matchPath } from "react-router-dom";
+import { Switch, Route, matchPath, useLocation } from "react-router-dom";
 
 import { ErrorGuard } from "@ax/guards";
 import type { IRootState, IUser } from "@ax/types";
@@ -17,7 +17,10 @@ import Logout from "./Logout";
 import * as S from "./style";
 
 const Routing = (props: IProps) => {
-	const { path, token, currentUser, globalSettings, setHistoryPush, logout } = props;
+	const { token, currentUser, globalSettings, setHistoryPush, logout } = props;
+
+	// Was `state.router.location.pathname` from connected-react-router's router slice.
+	const { pathname: path } = useLocation();
 
 	const { useForms } = globalSettings;
 
@@ -112,7 +115,6 @@ const Routing = (props: IProps) => {
 };
 
 const mapStateToProps = (state: IRootState) => ({
-	path: state.router.location.pathname,
 	token: state.app.token,
 	currentUser: state.users.currentUser,
 	globalSettings: state.app.globalSettings,
@@ -124,7 +126,6 @@ interface IDispatchProps {
 }
 
 interface IStateProps {
-	path?: string;
 	token: string;
 	currentUser: IUser | null;
 	globalSettings: IGlobalSettings;

package/src/modules/FileDrive/index.tsx

@@ -605,7 +605,7 @@ const FileDrive = (props: IProps) => {
 	);
 
 	return (
-		<MainWrapper backLink={false} title="File Drive Manager" rightButton={rightButtonProps}>
+		<MainWrapper backLink={false} title="File Drive Manager" rightButton={rightButtonProps} screen="file-drive">
 			<S.Wrapper ref={wrapperRef}>
 				<S.FolderPanel
 					isOpen={isPanelOpen}

package/src/modules/GlobalSettings/Robots/index.tsx

@@ -1,35 +1,31 @@
-import { useEffect, useState } from "react";
-import { connect } from "react-redux";
+import { memo, useEffect, useState } from "react";
 
 import { ErrorToast, Loading, MainWrapper, Nav } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { domainsActions } from "@ax/containers/Domains";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty } from "@ax/hooks";
-import type { IDomainRobot, INavItem, IRootState } from "@ax/types";
+import { useAppDispatch, useAppSelector } from "@ax/store";
+import type { IDomainRobot, INavItem } from "@ax/types";
 
 import Item from "./Item";
 
 import * as S from "./style";
 
 const Robots = (props: IProps): JSX.Element => {
-	const {
-		isSaving,
-		isLoading,
-		navItems,
-		currentNavItem,
-		robots,
-		getDomainsRobots,
-		setHistoryPush,
-		updateDomainRobots,
-	} = props;
+	const { navItems, currentNavItem } = props;
+
+	const dispatch = useAppDispatch();
+	const isSaving = useAppSelector((state) => state.app.isSaving);
+	const isLoading = useAppSelector((state) => state.app.isLoading);
+	const robots = useAppSelector((state) => state.domains.robots);
 
 	const [robotItems, setRobotItems] = useState(robots);
 	const { isDirty, setIsDirty, resetDirty } = useIsDirty(robotItems);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		getDomainsRobots();
+		dispatch(domainsActions.getDomainsRobots());
 		resetDirty();
 	}, []);
 
@@ -38,7 +34,7 @@ const Robots = (props: IProps): JSX.Element => {
 	}, [robots]);
 
 	const handleSave = async () => {
-		const isSaved = await updateDomainRobots(robotItems);
+		const isSaved = await dispatch(domainsActions.updateDomainsRobots(robotItems)).unwrap();
 		if (isSaved) {
 			setIsDirty(false);
 		}
@@ -51,22 +47,23 @@ const Robots = (props: IProps): JSX.Element => {
 	};
 
 	const handleMenuClick = (path: string) => {
-		setHistoryPush(path);
+		dispatch(appActions.setHistoryPush(path));
 	};
 
 	const mapItemList = (items: IDomainRobot[]) =>
 		Array.isArray(items) &&
 		items.map((item: IDomainRobot, i: number) => {
-			const handleSetItem = (newContent: string) => {
-				const newItems = [...robotItems];
-				newItems[i].content = newContent;
-				setRobotItems(newItems);
-			};
+			// Replaces the item instead of assigning onto it: the list comes from the
+			// store, so the previous `newItems[i].content = …` on a shallow copy was
+			// mutating state — and now that the slice runs through Immer, the object
+			// is frozen and that assignment would throw.
+			const handleSetItem = (newContent: string) =>
+				setRobotItems((current) => current.map((it, index) => (index === i ? { ...it, content: newContent } : it)));
 
 			return <Item key={`${item.path}${i}`} item={item} setItemContent={handleSetItem} />;
 		});
 
-	const setRoute = (path: string) => setHistoryPush(path);
+	const setRoute = (path: string) => dispatch(appActions.setHistoryPush(path));
 	const modalText = (
 		<>
 			Some robots <strong>are not saved</strong>.{" "}
@@ -76,7 +73,7 @@ const Robots = (props: IProps): JSX.Element => {
 	return (
 		<>
 			<RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
-			<MainWrapper backLink={false} title="SEO Settings" rightButton={rightButtonProps}>
+			<MainWrapper backLink={false} title="SEO Settings" rightButton={rightButtonProps} screen="robots">
 				<S.Wrapper>
 					<Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
 					<S.ContentWrapper>
@@ -93,31 +90,11 @@ const Robots = (props: IProps): JSX.Element => {
 	);
 };
 
-const mapStateToProps = (state: IRootState) => ({
-	isSaving: state.app.isSaving,
-	isLoading: state.app.isLoading,
-	robots: state.domains.robots,
-});
-
-const mapDispatchToProps = {
-	setHistoryPush: appActions.setHistoryPush,
-	getDomainsRobots: domainsActions.getDomainsRobots,
-	updateDomainRobots: domainsActions.updateDomainsRobots,
-};
-interface IRobotsProps {
-	isSaving: boolean;
-	isLoading: boolean;
+interface IProps {
 	navItems: INavItem[];
 	currentNavItem: INavItem;
-	robots: IDomainRobot[];
 }
 
-interface IDispatchProps {
-	getDomainsRobots(): void;
-	setHistoryPush(path: string, isEditor?: boolean): void;
-	updateDomainRobots(robots: IDomainRobot[]): Promise<boolean>;
-}
-
-type IProps = IRobotsProps & IDispatchProps;
-
-export default connect(mapStateToProps, mapDispatchToProps)(Robots);
+// `connect` memoised this screen implicitly; `memo` keeps that now that its props
+// come from the parent instead of the store.
+export default memo(Robots);

package/src/modules/MediaGallery/index.tsx

@@ -623,7 +623,7 @@ const MediaGallery = (props: IProps) => {
 	);
 
 	return (
-		<MainWrapper backLink={false} title="Media Gallery" rightButton={rightButtonProps}>
+		<MainWrapper backLink={false} title="Media Gallery" rightButton={rightButtonProps} screen="gallery">
 			<S.Wrapper ref={wrapperRef}>
 				<S.FolderPanel
 					isOpen={isPanelOpen}

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

@@ -1,10 +1,10 @@
 import { useState } from "react";
-import { connect } from "react-redux";
 
 import { CheckField, ContextMenu, ElementsTooltip } from "@ax/components";
 import { redirectsActions } from "@ax/containers/Redirects";
 import { useContextMenu, useModals } from "@ax/hooks";
-import type { ICheck, IRedirect, IRootState } from "@ax/types";
+import { useAppDispatch, useAppSelector } from "@ax/store";
+import type { ICheck, IRedirect } from "@ax/types";
 
 import { format } from "date-fns";
 
@@ -13,12 +13,11 @@ import RedirectPanel from "../RedirectPanel";
 
 import * as S from "./style";
 
-const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
+const RedirectItem = (props: IProps): JSX.Element => {
 	const {
 		redirect,
 		isSelected,
 		onChange,
-		deleteRedirect,
 		toggleToast,
 		setFormValues,
 		formValues,
@@ -26,9 +25,10 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 		currentFilter,
 		isSiteItem,
 		hoverCheck,
-		isSaving,
 	} = props;
 
+	const dispatch = useAppDispatch();
+	const isSaving = useAppSelector((state) => state.app.isSaving);
 	const { isOpen, toggleModal } = useModals(["edit", "delete"]);
 	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 	const [isOpenedSecond, setIsOpenedSecond] = useState(false);
@@ -47,7 +47,9 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
 	const removeItem = async () => {
 		try {
 			if (redirect.id) {
-				const deleted = await deleteRedirect(redirect.id, currentFilter);
+				const deleted = await dispatch(
+					redirectsActions.deleteRedirect({ redirectID: redirect.id, filter: currentFilter }),
+				).unwrap();
 				if (deleted) {
 					toggleToast();
 				}
@@ -148,21 +150,6 @@ interface IProps {
 	currentFilter: string;
 	isSiteItem: boolean;
 	hoverCheck: boolean;
-	isSaving: boolean;
 }
 
-interface IDispatchProps {
-	deleteRedirect(redirectID: number, filter?: string): Promise<boolean>;
-}
-
-type IRedirectItemProps = IProps & IDispatchProps;
-
-const mapStateToProps = (state: IRootState) => ({
-	isSaving: state.app.isSaving,
-});
-
-const mapDispatchToProps = {
-	deleteRedirect: redirectsActions.deleteRedirect,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(RedirectItem);
+export default RedirectItem;

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

@@ -1,9 +1,9 @@
 import React from "react";
-import { connect } from "react-redux";
 
 import type { IRedirect } from "@ax/types";
 import { Button, FieldsBehavior, FloatingPanel } from "@ax/components";
 import { redirectsActions } from "@ax/containers/Redirects";
+import { useAppDispatch } from "@ax/store";
 
 import * as S from "./style";
 
@@ -15,12 +15,13 @@ const RedirectPanel = (props: IProps): JSX.Element => {
 		isOpenedSecond,
 		toggleSecondaryPanel,
 		addRedirect,
-		updateRedirect,
 		formValues,
 		setFormValues,
 		currentFilter,
 	} = props;
 
+	const dispatch = useAppDispatch();
+
 	const handleOldUrl = (newValue: string) => setFormValues({ ...formValues, from: newValue });
 
 	const handleNewUrl = (newValue: any) => {
@@ -34,7 +35,14 @@ const RedirectPanel = (props: IProps): JSX.Element => {
 
 	const editItemAction = async () => {
 		const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
-		formValues.id && (await updateRedirect({ from: formValues.from, to: toPage }, formValues.id, currentFilter));
+		formValues.id &&
+			(await dispatch(
+				redirectsActions.updateRedirect({
+					redirect: { from: formValues.from, to: toPage },
+					redirectID: formValues.id,
+					filter: currentFilter,
+				}),
+			));
 		toggleModal();
 	};
 
@@ -97,10 +105,7 @@ const RedirectPanel = (props: IProps): JSX.Element => {
 	);
 };
 
-const mapDispatchToProps = {
-	updateRedirect: redirectsActions.updateRedirect,
-};
-interface ICategoryPanelProps {
+interface IProps {
 	isOpen: boolean;
 	isOpenedSecond: boolean;
 	toggleSecondaryPanel(): any;
@@ -109,13 +114,7 @@ interface ICategoryPanelProps {
 	formValues: IRedirect;
 	setFormValues(redirect: IRedirect): void;
 	currentFilter: string;
-}
-
-interface IDispatchProps {
 	addRedirect(force?: boolean): void;
-	updateRedirect(redirect: { from: string; to: string | number }, redirectID: number, filter?: string): Promise<void>;
 }
 
-type IProps = ICategoryPanelProps & IDispatchProps;
-
-export default connect(null, mapDispatchToProps)(RedirectPanel);
+export default RedirectPanel;