@griddo/ax 12.6.0 → 12.6.1

package/src/modules/Redirects/index.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { connect } from "react-redux";
 
 import {
 	EmptyState,
@@ -14,7 +13,8 @@ import {
 import { appActions } from "@ax/containers/App";
 import { redirectsActions } from "@ax/containers/Redirects";
 import { useBulkSelection, useModals, useToast } from "@ax/hooks";
-import type { IEmptyStateProps, INavItem, IQueryValue, IRedirect, IRootState, ISite } from "@ax/types";
+import { useAppDispatch, useAppSelector } from "@ax/store";
+import type { IEmptyStateProps, INavItem, IQueryValue, IRedirect } from "@ax/types";
 
 import { DeleteModal, ImportCheckModal, ImportModal, OverwriteModal } from "./atoms";
 import BulkHeader from "./BulkHeader";
@@ -26,22 +26,15 @@ import { getSortedListStatus } from "./utils";
 import * as S from "./style";
 
 const Redirects = (props: IProps): JSX.Element => {
-	const {
-		navItems,
-		currentNavItem,
-		setHistoryPush,
-		getRedirects,
-		redirects,
-		totalItems,
-		deleteRedirect,
-		addRedirect,
-		currentSite,
-		importRedirects,
-		imports,
-		totalImports,
-		isLoading,
-		isSaving,
-	} = props;
+	const { navItems, currentNavItem } = props;
+	const dispatch = useAppDispatch();
+	const redirects = useAppSelector((state) => state.redirects.redirects);
+	const totalItems = useAppSelector((state) => state.redirects.totalItems);
+	const totalImports = useAppSelector((state) => state.redirects.totalImports);
+	const imports = useAppSelector((state) => state.redirects.imports);
+	const currentSite = useAppSelector((state) => state.sites.currentSiteInfo);
+	const isLoading = useAppSelector((state) => state.app.isLoading);
+	const isSaving = useAppSelector((state) => state.app.isSaving);
 
 	const itemsPerPage = 50;
 	const firstPage = 1;
@@ -88,7 +81,7 @@ const Redirects = (props: IProps): JSX.Element => {
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		const params = getParams();
-		getRedirects(params, filterQuery);
+		dispatch(redirectsActions.getRedirects({ params, filters: filterQuery }));
 		if (tableRef.current) {
 			tableRef.current.scrollTo(0, 0);
 		}
@@ -125,7 +118,7 @@ const Redirects = (props: IProps): JSX.Element => {
 	} = useBulkSelection(redIds);
 
 	const bulkDelete = async () => {
-		const deleted = await deleteRedirect(selectedItems.all);
+		const deleted = await dispatch(redirectsActions.deleteRedirect({ redirectID: selectedItems.all })).unwrap();
 		if (deleted) {
 			toggleToast();
 		}
@@ -191,7 +184,7 @@ const Redirects = (props: IProps): JSX.Element => {
 	};
 
 	const handleMenuClick = (path: string) => {
-		setHistoryPush(path);
+		dispatch(appActions.setHistoryPush(path));
 	};
 
 	const handleModal = () => {
@@ -202,7 +195,13 @@ const Redirects = (props: IProps): JSX.Element => {
 
 	const handleAddRedirect = async (force?: boolean) => {
 		const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
-		await addRedirect({ from: formValues.from, to: toPage }, () => toggleModal("overwrite"), force, filterQuery);
+		// A taken origin (409) comes back as data now, instead of through a callback the thunk
+		// used to be handed: a function in `meta.arg` trips the serializableCheck, and deciding
+		// which modal to open was never the thunk's business (docs/RTK-MIGRATION.md §5).
+		const { isOriginTaken } = await dispatch(
+			redirectsActions.addRedirect({ redirect: { from: formValues.from, to: toPage }, force, filter: filterQuery }),
+		).unwrap();
+		if (isOriginTaken) toggleModal("overwrite");
 		isOpen("edit") && toggleModal("edit");
 	};
 
@@ -230,14 +229,14 @@ const Redirects = (props: IProps): JSX.Element => {
 
 	const handleCheckImportData = async (data: { from: string; to: string }[]) => {
 		setImportData(data);
-		await importRedirects(data, true);
+		await dispatch(redirectsActions.importRedirects({ rows: data, check: true }));
 		toggleModal("import");
 		setIsUploading(false);
 		toggleModal("checkImport");
 	};
 
 	const handleImportData = async () => {
-		const imported = await importRedirects(importData, false);
+		const imported = await dispatch(redirectsActions.importRedirects({ rows: importData, check: false })).unwrap();
 		if (imported) {
 			toggleImportToast();
 		}
@@ -253,6 +252,7 @@ const Redirects = (props: IProps): JSX.Element => {
 		<MainWrapper
 			backLink={false}
 			title="SEO Settings"
+			screen="redirects"
 			rightButton={rightButtonProps}
 			rightLineButton={rightLineButtonProps}
 			searchAction={handleSearch}
@@ -360,52 +360,9 @@ const Redirects = (props: IProps): JSX.Element => {
 	);
 };
 
-const mapStateToProps = (state: IRootState) => ({
-	redirects: state.redirects.redirects,
-	totalItems: state.redirects.totalItems,
-	currentSite: state.sites.currentSiteInfo,
-	totalImports: state.redirects.totalImports,
-	imports: state.redirects.imports,
-	isLoading: state.app.isLoading,
-	isSaving: state.app.isSaving,
-});
-
-const mapDispatchToProps = {
-	setHistoryPush: appActions.setHistoryPush,
-	getRedirects: redirectsActions.getRedirects,
-	deleteRedirect: redirectsActions.deleteRedirect,
-	addRedirect: redirectsActions.addRedirect,
-	importRedirects: redirectsActions.importRedirects,
-};
-interface IRedirectsProps {
+interface IProps {
 	navItems: INavItem[];
 	currentNavItem: INavItem;
-	redirects: IRedirect[];
-	totalItems: number;
-	currentSite: ISite | null;
-	totalImports: number;
-	isLoading: boolean;
-	isSaving: boolean;
-	imports: null | {
-		error: IRedirect[];
-		existing: IRedirect[];
-		ok: IRedirect[];
-	};
 }
 
-interface IDispatchProps {
-	setHistoryPush(path: string, isEditor?: boolean): void;
-	getRedirects(params: any, filters: string): void;
-	deleteRedirect(redirectID: number[]): Promise<boolean>;
-	addRedirect(
-		redirect: { from: string; to: string | number },
-		errorAction: () => void,
-		force?: boolean,
-		filter?: string,
-	): Promise<void>;
-	importRedirects(redirects: { from: string; to: string | number }[], check: boolean): Promise<boolean>;
-}
-
-type IProps = IRedirectsProps & IDispatchProps;
-
-export default connect(mapStateToProps, mapDispatchToProps)(Redirects);
+export default Redirects;

package/src/modules/Settings/ContentTypes/DataPacks/index.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
+import { useHistory } from "react-router-dom";
 
 import { EmptyState, ErrorToast, Loading, MainWrapper, Modal, Toast } from "@ax/components";
 import { appActions } from "@ax/containers/App";
@@ -30,9 +31,11 @@ const DataPacks = (props: IProps): JSX.Element => {
 		addDataPacks,
 		deleteSiteDataPack,
 		activatedDataPacks,
-		routerAction,
 	} = props;
 
+	// Was `state.router.action` from connected-react-router's router slice.
+	const { action: routerAction } = useHistory();
+
 	const isFromPage = selected?.templates && selected.templates.length > 0;
 
 	const { isDirty, setIsDirty } = useShouldBeSaved(selected, form);
@@ -220,7 +223,6 @@ interface IProps {
 	selected: any;
 	form: any;
 	activatedDataPacks: IDataPack[];
-	routerAction: string;
 	getSiteDataPacks: (queryParams?: string) => void;
 	setSelected: (dataPack?: any) => void;
 	updateDataPack: (dataPack?: any) => Promise<boolean>;
@@ -246,7 +248,6 @@ const mapStateToProps = (state: IRootState) => ({
 	selected: state.dataPacks.selected,
 	form: state.dataPacks.configFormData,
 	activatedDataPacks: state.dataPacks.activated,
-	routerAction: state.router.action,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(DataPacks);

package/src/modules/Settings/Languages/LanguagePanel/Form/ConnectedField/index.tsx

@@ -1,17 +1,19 @@
-import React from "react";
-import { connect } from "react-redux";
+import React, { memo } from "react";
 
-import type { IRootState } from "@ax/types";
-import { languagesActions } from "@ax/containers/Settings";
 import { FieldsBehavior } from "@ax/components";
+import { languagesActions } from "@ax/containers/Settings";
+import { useAppDispatch, useAppSelector } from "@ax/store";
 
 const ConnectedField = (props: IProps) => {
-	const { form, type, name, updateFormValue } = props;
+	const { type, name } = props;
 
-	const value = form[name];
+	const dispatch = useAppDispatch();
+	// Granular selector: this field only re-renders when its own value changes,
+	// not on every change to the form.
+	const value = useAppSelector((state) => state.languages.form[name as keyof typeof state.languages.form]);
 
 	const handleChange = (newValue: any) => {
-		updateFormValue({ [name]: newValue });
+		dispatch(languagesActions.updateFormValue({ [name]: newValue }));
 	};
 
 	const fieldProps = {
@@ -24,7 +26,6 @@ const ConnectedField = (props: IProps) => {
 };
 
 interface IProps {
-	form: any;
 	type: string;
 	title: string;
 	name: string;
@@ -33,16 +34,8 @@ interface IProps {
 	helptext?: string;
 	options?: any;
 	filter?: any;
-	updateFormValue: (value: any) => void;
 	autoComplete?: string;
 }
 
-const mapStateToProps = (state: IRootState) => ({
-	form: state.languages.form,
-});
-
-const mapDispatchToProps = {
-	updateFormValue: languagesActions.updateFormValue,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ConnectedField);
+// `connect` used to memoise this component implicitly; keep that now it is gone.
+export default memo(ConnectedField);

package/src/modules/Settings/Languages/LanguagePanel/Form/index.tsx

@@ -1,14 +1,17 @@
 import React from "react";
-import { connect } from "react-redux";
 
-import type { ILanguage, IRootState } from "@ax/types";
 import { Flag } from "@ax/components";
+import { useAppSelector } from "@ax/store";
+import type { ILanguage } from "@ax/types";
+
 import ConnectedField from "./ConnectedField";
 
 import * as S from "./style";
 
 const Form = (props: IProps): JSX.Element => {
-	const { currentSiteLanguages, item } = props;
+	const { item } = props;
+
+	const currentSiteLanguages = useAppSelector((state) => state.sites.currentSiteLanguages);
 
 	const currentSiteLanguagesIds = currentSiteLanguages.map((e) => e.id);
 
@@ -52,13 +55,8 @@ const Form = (props: IProps): JSX.Element => {
 	);
 };
 
-const mapStateToProps = (state: IRootState) => ({
-	currentSiteLanguages: state.sites.currentSiteLanguages,
-});
-
 interface IProps {
 	item?: ILanguage;
-	currentSiteLanguages: ILanguage[];
 }
 
-export default connect(mapStateToProps)(Form);
+export default Form;

package/src/modules/Settings/Languages/LanguagePanel/index.tsx

@@ -1,28 +1,34 @@
 import React from "react";
-import { connect } from "react-redux";
 
-import type { ILanguage, IRootState, ISiteLanguage } from "@ax/types";
+import { Button, FloatingPanel } from "@ax/components";
 import { languagesActions } from "@ax/containers/Settings";
-import { FloatingPanel, Button } from "@ax/components";
+import { useAppDispatch, useAppSelector } from "@ax/store";
+import type { ILanguage } from "@ax/types";
 
 import Form from "./Form";
 
 import * as S from "./style";
 
 const LanguagePanel = (props: IProps): JSX.Element => {
-	const { isOpen, toggleModal, createSiteLanguage, updateSiteLanguage, currentSiteID, languageData, item } = props;
+	const { isOpen, toggleModal, item } = props;
+
+	const dispatch = useAppDispatch();
+	const currentSiteID = useAppSelector((state) => state.sites.currentSiteInfo?.id ?? null);
+	const languageData = useAppSelector((state) => state.languages.form);
 
 	if (!currentSiteID) {
 		throw new Error(`ERROR: User reached Languages with null site info`);
 	}
 
+	// Closes without awaiting the thunk, as the connect version did: a failure
+	// still closes the panel and only surfaces through the error toast.
 	const addItemAction = () => {
-		createSiteLanguage(currentSiteID, languageData);
+		dispatch(languagesActions.createSiteLanguage({ siteID: currentSiteID, data: languageData }));
 		toggleModal();
 	};
 
 	const editItemAction = () => {
-		updateSiteLanguage(currentSiteID, languageData);
+		dispatch(languagesActions.updateSiteLanguage({ siteID: currentSiteID, data: languageData }));
 		toggleModal();
 	};
 
@@ -40,52 +46,40 @@ const LanguagePanel = (props: IProps): JSX.Element => {
 
 	const title = item ? "Update Language" : "New Language";
 
+	// The panel itself stays mounted — FloatingPanel animates off `isOpen` and
+	// unmounting it would drop that animation — but its body only mounts once the
+	// panel opens. The Form holds the Language and Domain AsyncSelects, each of
+	// which fetches its options on mount, and there is one panel per row plus one
+	// in the header: keeping them mounted meant N+1 requests for `/select/domains`
+	// on every visit to a screen where the user may open no panel at all. The form
+	// state lives in the store (the row dispatches setForm before opening), so
+	// mounting late loses nothing.
 	return (
 		<FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
-			<S.Wrapper>
-				<Form item={item} />
-				<S.Footer>
-					{item ? (
-						<Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
-							{editButton.label}
-						</Button>
-					) : (
-						<Button className="button" type="button" onClick={addButton.action} disabled={addButton.disabled}>
-							{addButton.label}
-						</Button>
-					)}
-				</S.Footer>
-			</S.Wrapper>
+			{isOpen && (
+				<S.Wrapper>
+					<Form item={item} />
+					<S.Footer>
+						{item ? (
+							<Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
+								{editButton.label}
+							</Button>
+						) : (
+							<Button className="button" type="button" onClick={addButton.action} disabled={addButton.disabled}>
+								{addButton.label}
+							</Button>
+						)}
+					</S.Footer>
+				</S.Wrapper>
+			)}
 		</FloatingPanel>
 	);
 };
 
-const mapStateToProps = (state: IRootState) => ({
-	currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
-	languageData: state.languages.form,
-});
-
-const mapDispatchToProps = {
-	createSiteLanguage: languagesActions.createSiteLanguage,
-	updateSiteLanguage: languagesActions.updateSiteLanguage,
-};
-
-interface IStateProps {
-	currentSiteID: number | null;
-	languageData: ISiteLanguage;
-}
-
-interface ILanguagePanelProps {
+interface IProps {
 	item?: ILanguage;
 	isOpen: boolean;
 	toggleModal(): any;
 }
 
-interface IDispatchProps {
-	createSiteLanguage(siteID: number, data: ISiteLanguage): void;
-	updateSiteLanguage(siteID: number, data: ISiteLanguage): void;
-}
-
-type IProps = IDispatchProps & ILanguagePanelProps & IStateProps;
-
-export default connect(mapStateToProps, mapDispatchToProps)(LanguagePanel);
+export default LanguagePanel;

package/src/modules/Settings/Languages/Table/Header/index.tsx

@@ -1,26 +1,27 @@
 import React from "react";
-import { connect } from "react-redux";
 
-import { useModal } from "@ax/hooks";
-import { languagesActions } from "@ax/containers/Settings";
-import type { ILanguage } from "@ax/types";
 import { IconAction } from "@ax/components";
+import { languagesActions } from "@ax/containers/Settings";
 import { Restricted } from "@ax/guards";
+import { useModal } from "@ax/hooks";
+import { useAppDispatch } from "@ax/store";
+import type { ILanguage } from "@ax/types";
+
 import LanguagePanel from "../../LanguagePanel";
 
 import * as S from "./style";
 
 const Header = (props: IProps): JSX.Element => {
-	const { items, resetForm } = props;
+	const { items } = props;
+
+	const dispatch = useAppDispatch();
 
 	const title = items.length > 1 ? `${items.length} items` : `${items.length} item`;
 
 	const { isOpen, toggleModal } = useModal();
 
-	const resetValues = () => resetForm();
-
 	const openModal = () => {
-		resetValues();
+		dispatch(languagesActions.resetForm());
 		toggleModal();
 	};
 
@@ -34,17 +35,9 @@ const Header = (props: IProps): JSX.Element => {
 		</S.Header>
 	);
 };
-interface ITableHeaderProps {
+
+interface IProps {
 	items: ILanguage[];
 }
-interface IDispatchProps {
-	resetForm(): void;
-}
-
-type IProps = ITableHeaderProps & IDispatchProps;
-
-const mapDispatchToProps = {
-	resetForm: languagesActions.resetForm,
-};
 
-export default connect(null, mapDispatchToProps)(Header);
+export default Header;

package/src/modules/Settings/Languages/Table/Item/index.tsx

@@ -1,26 +1,32 @@
-import React from "react";
-import { connect } from "react-redux";
+import React, { memo } from "react";
 
 import { ContextMenu, Flag } from "@ax/components";
-import { useContextMenu, useModal, usePermission } from "@ax/hooks";
-import type { ILanguage, ISiteLanguage, IRootState, ISite } from "@ax/types";
 import { languagesActions } from "@ax/containers/Settings";
+import { useContextMenu, useModal, usePermission } from "@ax/hooks";
+import { useAppDispatch, useAppSelector } from "@ax/store";
+import type { ILanguage, ISiteLanguage } from "@ax/types";
+
 import LanguagePanel from "../../LanguagePanel";
 
 import * as S from "./style";
 
-const Item = (props: IItemProps): JSX.Element => {
-	const { item, resetForm, setForm, deleteSiteLanguage, currentSiteInfo } = props;
+const Item = (props: IProps): JSX.Element => {
+	const { item } = props;
 
-	if (!currentSiteInfo) {
-		throw new Error(`ERROR: User reached Site Languages with null site info`);
-	}
+	const dispatch = useAppDispatch();
+	const currentSiteInfo = useAppSelector((state) => state.sites.currentSiteInfo);
 
 	const { isOpen, toggleModal } = useModal();
 	const isAllowedToEdit = usePermission("general.editLanguage");
 	const isAllowedToDelete = usePermission("general.deleteLanguages");
 	const { contextMenu, handleContextMenu, closeContextMenu } = useContextMenu();
 
+	// After the hooks, not before: bailing out earlier would make the hook order
+	// depend on state. Same guard as the connect version, just moved down.
+	if (!currentSiteInfo) {
+		throw new Error(`ERROR: User reached Site Languages with null site info`);
+	}
+
 	const siteLanguage: ISiteLanguage = {
 		language: item.id,
 		path: item.path || "",
@@ -28,7 +34,8 @@ const Item = (props: IItemProps): JSX.Element => {
 		isDefault: item.isDefault,
 	};
 
-	const removeItemAction = () => deleteSiteLanguage(currentSiteInfo.id, item.id);
+	const removeItemAction = () =>
+		dispatch(languagesActions.deleteSiteLanguage({ siteID: currentSiteInfo.id, languageID: item.id }));
 
 	const menuOptions = isAllowedToDelete
 		? [
@@ -40,13 +47,9 @@ const Item = (props: IItemProps): JSX.Element => {
 			]
 		: [];
 
-	const resetValues = () => resetForm();
-
-	const setItem = (item: ISiteLanguage) => setForm(item);
-
 	const openModal = () => {
-		resetValues();
-		setItem(siteLanguage);
+		dispatch(languagesActions.resetForm());
+		dispatch(languagesActions.setForm(siteLanguage));
 		toggleModal();
 	};
 
@@ -68,25 +71,7 @@ const Item = (props: IItemProps): JSX.Element => {
 
 interface IProps {
 	item: ILanguage;
-	currentSiteInfo: ISite | null;
 }
 
-const mapStateToProps = (state: IRootState) => ({
-	currentSiteInfo: state.sites.currentSiteInfo,
-});
-
-const mapDispatchToProps = {
-	resetForm: languagesActions.resetForm,
-	setForm: languagesActions.setForm,
-	deleteSiteLanguage: languagesActions.deleteSiteLanguage,
-};
-
-interface IDispatchProps {
-	setForm(item: ISiteLanguage): void;
-	resetForm(): void;
-	deleteSiteLanguage(siteId: number, languageId: number): void;
-}
-
-type IItemProps = IProps & IDispatchProps;
-
-export default connect(mapStateToProps, mapDispatchToProps)(Item);
+// One per row: `connect` memoised it implicitly, so keep that now it is gone.
+export default memo(Item);

package/src/modules/Settings/Languages/Table/index.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { connect } from "react-redux";
 
-import type { ILanguage, IRootState } from "@ax/types";
+import { useAppSelector } from "@ax/store";
+import type { ILanguage } from "@ax/types";
 
-import Item from "./Item";
 import Header from "./Header";
+import Item from "./Item";
 
 import * as S from "./style";
 
-const Table = (props: IStateProps): JSX.Element => {
-	const { items } = props;
+const Table = (): JSX.Element => {
+	const items = useAppSelector((state) => state.sites.currentSiteLanguages);
 
 	const mapItemList = (menu: any) =>
 		menu && menu.map((item: ILanguage, i: number) => <Item key={`${item.label}${i}`} item={item} />);
@@ -22,12 +22,4 @@ const Table = (props: IStateProps): JSX.Element => {
 	);
 };
 
-const mapStateToProps = (state: IRootState) => ({
-	items: state.sites.currentSiteLanguages,
-});
-
-interface IStateProps {
-	items: ILanguage[];
-}
-
-export default connect(mapStateToProps)(Table);
+export default Table;

package/src/modules/Settings/Languages/index.tsx

@@ -1,30 +1,37 @@
 import React, { useEffect } from "react";
-import { connect } from "react-redux";
 
-import type { INavItem, IRootState, ISite } from "@ax/types";
-import { sitesActions } from "@ax/containers/Sites";
+import { ErrorToast, Loading, MainWrapper, Nav } from "@ax/components";
 import { appActions } from "@ax/containers/App";
-import { MainWrapper, Loading, ErrorToast, Nav } from "@ax/components";
+import { sitesActions } from "@ax/containers/Sites";
+import { useAppDispatch, useAppSelector } from "@ax/store";
+import type { INavItem } from "@ax/types";
 
 import Table from "./Table";
 
 import * as S from "./style";
 
 const Languages = (props: IProps): JSX.Element => {
-	const { isLoading, currentSiteInfo, getSiteLanguages, setHistoryPush, navItems, currentNavItem } = props;
+	const { navItems, currentNavItem } = props;
+
+	const dispatch = useAppDispatch();
+	const currentSiteInfo = useAppSelector((state) => state.sites.currentSiteInfo);
+	const isLoading = useAppSelector((state) => state.app.isLoading);
 
+	// getSiteLanguages and setHistoryPush are still legacy thunks from other areas
+	// (sites, app). The RTK dispatch takes them unchanged, which is what makes the
+	// area-by-area strangler possible.
 	useEffect(() => {
 		if (currentSiteInfo) {
-			getSiteLanguages(currentSiteInfo.id);
+			dispatch(sitesActions.getSiteLanguages(currentSiteInfo.id));
 		}
-	}, [currentSiteInfo, getSiteLanguages]);
+	}, [currentSiteInfo, dispatch]);
 
 	const handleMenuClick = (path: string) => {
-		setHistoryPush(path);
+		dispatch(appActions.setHistoryPush(path));
 	};
 
 	return (
-		<MainWrapper title={`Languages`}>
+		<MainWrapper title={`Languages`} screen="languages">
 			<S.Wrapper>
 				<Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
 				<S.ContentWrapper>
@@ -42,28 +49,9 @@ const Languages = (props: IProps): JSX.Element => {
 	);
 };
 
-const mapStateToProps = (state: IRootState) => ({
-	currentSiteInfo: state.sites.currentSiteInfo,
-	isLoading: state.app.isLoading,
-});
-
-const mapDispatchToProps = {
-	getSiteLanguages: sitesActions.getSiteLanguages,
-	setHistoryPush: appActions.setHistoryPush,
-};
-
-interface IDispatchProps {
-	getSiteLanguages(siteID: number): void;
-	setHistoryPush(path: string, isEditor?: boolean): void;
-}
-
-interface ILanguagesProps {
-	currentSiteInfo: ISite | null;
-	isLoading: boolean;
+interface IProps {
 	navItems: INavItem[];
 	currentNavItem: INavItem;
 }
 
-type IProps = ILanguagesProps & IDispatchProps;
-
-export default connect(mapStateToProps, mapDispatchToProps)(Languages);
+export default Languages;