@griddo/ax 12.6.1 → 12.6.2

package/src/modules/Redirects/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { connect } from "react-redux";
 
 import {
 	EmptyState,
@@ -13,8 +14,7 @@ import {
 import { appActions } from "@ax/containers/App";
 import { redirectsActions } from "@ax/containers/Redirects";
 import { useBulkSelection, useModals, useToast } from "@ax/hooks";
-import { useAppDispatch, useAppSelector } from "@ax/store";
-import type { IEmptyStateProps, INavItem, IQueryValue, IRedirect } from "@ax/types";
+import type { IEmptyStateProps, INavItem, IQueryValue, IRedirect, IRootState, ISite } from "@ax/types";
 
 import { DeleteModal, ImportCheckModal, ImportModal, OverwriteModal } from "./atoms";
 import BulkHeader from "./BulkHeader";
@@ -26,15 +26,22 @@ import { getSortedListStatus } from "./utils";
 import * as S from "./style";
 
 const Redirects = (props: IProps): JSX.Element => {
-	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 {
+		navItems,
+		currentNavItem,
+		setHistoryPush,
+		getRedirects,
+		redirects,
+		totalItems,
+		deleteRedirect,
+		addRedirect,
+		currentSite,
+		importRedirects,
+		imports,
+		totalImports,
+		isLoading,
+		isSaving,
+	} = props;
 
 	const itemsPerPage = 50;
 	const firstPage = 1;
@@ -81,7 +88,7 @@ const Redirects = (props: IProps): JSX.Element => {
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		const params = getParams();
-		dispatch(redirectsActions.getRedirects({ params, filters: filterQuery }));
+		getRedirects(params, filterQuery);
 		if (tableRef.current) {
 			tableRef.current.scrollTo(0, 0);
 		}
@@ -118,7 +125,7 @@ const Redirects = (props: IProps): JSX.Element => {
 	} = useBulkSelection(redIds);
 
 	const bulkDelete = async () => {
-		const deleted = await dispatch(redirectsActions.deleteRedirect({ redirectID: selectedItems.all })).unwrap();
+		const deleted = await deleteRedirect(selectedItems.all);
 		if (deleted) {
 			toggleToast();
 		}
@@ -184,7 +191,7 @@ const Redirects = (props: IProps): JSX.Element => {
 	};
 
 	const handleMenuClick = (path: string) => {
-		dispatch(appActions.setHistoryPush(path));
+		setHistoryPush(path);
 	};
 
 	const handleModal = () => {
@@ -195,13 +202,7 @@ const Redirects = (props: IProps): JSX.Element => {
 
 	const handleAddRedirect = async (force?: boolean) => {
 		const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
-		// 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");
+		await addRedirect({ from: formValues.from, to: toPage }, () => toggleModal("overwrite"), force, filterQuery);
 		isOpen("edit") && toggleModal("edit");
 	};
 
@@ -229,14 +230,14 @@ const Redirects = (props: IProps): JSX.Element => {
 
 	const handleCheckImportData = async (data: { from: string; to: string }[]) => {
 		setImportData(data);
-		await dispatch(redirectsActions.importRedirects({ rows: data, check: true }));
+		await importRedirects(data, true);
 		toggleModal("import");
 		setIsUploading(false);
 		toggleModal("checkImport");
 	};
 
 	const handleImportData = async () => {
-		const imported = await dispatch(redirectsActions.importRedirects({ rows: importData, check: false })).unwrap();
+		const imported = await importRedirects(importData, false);
 		if (imported) {
 			toggleImportToast();
 		}
@@ -252,7 +253,6 @@ const Redirects = (props: IProps): JSX.Element => {
 		<MainWrapper
 			backLink={false}
 			title="SEO Settings"
-			screen="redirects"
 			rightButton={rightButtonProps}
 			rightLineButton={rightLineButtonProps}
 			searchAction={handleSearch}
@@ -360,9 +360,52 @@ const Redirects = (props: IProps): JSX.Element => {
 	);
 };
 
-interface IProps {
+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 {
 	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[];
+	};
 }
 
-export default Redirects;
+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);

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

@@ -1,6 +1,5 @@
 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";
@@ -31,11 +30,9 @@ 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);
@@ -223,6 +220,7 @@ interface IProps {
 	selected: any;
 	form: any;
 	activatedDataPacks: IDataPack[];
+	routerAction: string;
 	getSiteDataPacks: (queryParams?: string) => void;
 	setSelected: (dataPack?: any) => void;
 	updateDataPack: (dataPack?: any) => Promise<boolean>;
@@ -248,6 +246,7 @@ 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,19 +1,17 @@
-import React, { memo } from "react";
+import React from "react";
+import { connect } from "react-redux";
 
-import { FieldsBehavior } from "@ax/components";
+import type { IRootState } from "@ax/types";
 import { languagesActions } from "@ax/containers/Settings";
-import { useAppDispatch, useAppSelector } from "@ax/store";
+import { FieldsBehavior } from "@ax/components";
 
 const ConnectedField = (props: IProps) => {
-	const { type, name } = props;
+	const { form, type, name, updateFormValue } = props;
 
-	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 value = form[name];
 
 	const handleChange = (newValue: any) => {
-		dispatch(languagesActions.updateFormValue({ [name]: newValue }));
+		updateFormValue({ [name]: newValue });
 	};
 
 	const fieldProps = {
@@ -26,6 +24,7 @@ const ConnectedField = (props: IProps) => {
 };
 
 interface IProps {
+	form: any;
 	type: string;
 	title: string;
 	name: string;
@@ -34,8 +33,16 @@ interface IProps {
 	helptext?: string;
 	options?: any;
 	filter?: any;
+	updateFormValue: (value: any) => void;
 	autoComplete?: string;
 }
 
-// `connect` used to memoise this component implicitly; keep that now it is gone.
-export default memo(ConnectedField);
+const mapStateToProps = (state: IRootState) => ({
+	form: state.languages.form,
+});
+
+const mapDispatchToProps = {
+	updateFormValue: languagesActions.updateFormValue,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConnectedField);

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

@@ -1,17 +1,14 @@
 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 { item } = props;
-
-	const currentSiteLanguages = useAppSelector((state) => state.sites.currentSiteLanguages);
+	const { currentSiteLanguages, item } = props;
 
 	const currentSiteLanguagesIds = currentSiteLanguages.map((e) => e.id);
 
@@ -55,8 +52,13 @@ const Form = (props: IProps): JSX.Element => {
 	);
 };
 
+const mapStateToProps = (state: IRootState) => ({
+	currentSiteLanguages: state.sites.currentSiteLanguages,
+});
+
 interface IProps {
 	item?: ILanguage;
+	currentSiteLanguages: ILanguage[];
 }
 
-export default Form;
+export default connect(mapStateToProps)(Form);

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

@@ -1,34 +1,28 @@
 import React from "react";
+import { connect } from "react-redux";
 
-import { Button, FloatingPanel } from "@ax/components";
+import type { ILanguage, IRootState, ISiteLanguage } from "@ax/types";
 import { languagesActions } from "@ax/containers/Settings";
-import { useAppDispatch, useAppSelector } from "@ax/store";
-import type { ILanguage } from "@ax/types";
+import { FloatingPanel, Button } from "@ax/components";
 
 import Form from "./Form";
 
 import * as S from "./style";
 
 const LanguagePanel = (props: IProps): JSX.Element => {
-	const { isOpen, toggleModal, item } = props;
-
-	const dispatch = useAppDispatch();
-	const currentSiteID = useAppSelector((state) => state.sites.currentSiteInfo?.id ?? null);
-	const languageData = useAppSelector((state) => state.languages.form);
+	const { isOpen, toggleModal, createSiteLanguage, updateSiteLanguage, currentSiteID, languageData, item } = props;
 
 	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 = () => {
-		dispatch(languagesActions.createSiteLanguage({ siteID: currentSiteID, data: languageData }));
+		createSiteLanguage(currentSiteID, languageData);
 		toggleModal();
 	};
 
 	const editItemAction = () => {
-		dispatch(languagesActions.updateSiteLanguage({ siteID: currentSiteID, data: languageData }));
+		updateSiteLanguage(currentSiteID, languageData);
 		toggleModal();
 	};
 
@@ -46,40 +40,52 @@ 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}>
-			{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>
-			)}
+			<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>
 	);
 };
 
-interface IProps {
+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 {
 	item?: ILanguage;
 	isOpen: boolean;
 	toggleModal(): any;
 }
 
-export default LanguagePanel;
+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);

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

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

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

@@ -1,32 +1,26 @@
-import React, { memo } from "react";
+import React from "react";
+import { connect } from "react-redux";
 
 import { ContextMenu, Flag } from "@ax/components";
-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 type { ILanguage, ISiteLanguage, IRootState, ISite } from "@ax/types";
+import { languagesActions } from "@ax/containers/Settings";
 import LanguagePanel from "../../LanguagePanel";
 
 import * as S from "./style";
 
-const Item = (props: IProps): JSX.Element => {
-	const { item } = props;
+const Item = (props: IItemProps): JSX.Element => {
+	const { item, resetForm, setForm, deleteSiteLanguage, currentSiteInfo } = props;
 
-	const dispatch = useAppDispatch();
-	const currentSiteInfo = useAppSelector((state) => state.sites.currentSiteInfo);
+	if (!currentSiteInfo) {
+		throw new Error(`ERROR: User reached Site Languages with null site info`);
+	}
 
 	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 || "",
@@ -34,8 +28,7 @@ const Item = (props: IProps): JSX.Element => {
 		isDefault: item.isDefault,
 	};
 
-	const removeItemAction = () =>
-		dispatch(languagesActions.deleteSiteLanguage({ siteID: currentSiteInfo.id, languageID: item.id }));
+	const removeItemAction = () => deleteSiteLanguage(currentSiteInfo.id, item.id);
 
 	const menuOptions = isAllowedToDelete
 		? [
@@ -47,9 +40,13 @@ const Item = (props: IProps): JSX.Element => {
 			]
 		: [];
 
+	const resetValues = () => resetForm();
+
+	const setItem = (item: ISiteLanguage) => setForm(item);
+
 	const openModal = () => {
-		dispatch(languagesActions.resetForm());
-		dispatch(languagesActions.setForm(siteLanguage));
+		resetValues();
+		setItem(siteLanguage);
 		toggleModal();
 	};
 
@@ -71,7 +68,25 @@ const Item = (props: IProps): JSX.Element => {
 
 interface IProps {
 	item: ILanguage;
+	currentSiteInfo: ISite | null;
 }
 
-// One per row: `connect` memoised it implicitly, so keep that now it is gone.
-export default memo(Item);
+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);

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

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

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

@@ -1,37 +1,30 @@
 import React, { useEffect } from "react";
+import { connect } from "react-redux";
 
-import { ErrorToast, Loading, MainWrapper, Nav } from "@ax/components";
-import { appActions } from "@ax/containers/App";
+import type { INavItem, IRootState, ISite } from "@ax/types";
 import { sitesActions } from "@ax/containers/Sites";
-import { useAppDispatch, useAppSelector } from "@ax/store";
-import type { INavItem } from "@ax/types";
+import { appActions } from "@ax/containers/App";
+import { MainWrapper, Loading, ErrorToast, Nav } from "@ax/components";
 
 import Table from "./Table";
 
 import * as S from "./style";
 
 const Languages = (props: IProps): JSX.Element => {
-	const { navItems, currentNavItem } = props;
-
-	const dispatch = useAppDispatch();
-	const currentSiteInfo = useAppSelector((state) => state.sites.currentSiteInfo);
-	const isLoading = useAppSelector((state) => state.app.isLoading);
+	const { isLoading, currentSiteInfo, getSiteLanguages, setHistoryPush, navItems, currentNavItem } = props;
 
-	// 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) {
-			dispatch(sitesActions.getSiteLanguages(currentSiteInfo.id));
+			getSiteLanguages(currentSiteInfo.id);
 		}
-	}, [currentSiteInfo, dispatch]);
+	}, [currentSiteInfo, getSiteLanguages]);
 
 	const handleMenuClick = (path: string) => {
-		dispatch(appActions.setHistoryPush(path));
+		setHistoryPush(path);
 	};
 
 	return (
-		<MainWrapper title={`Languages`} screen="languages">
+		<MainWrapper title={`Languages`}>
 			<S.Wrapper>
 				<Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
 				<S.ContentWrapper>
@@ -49,9 +42,28 @@ const Languages = (props: IProps): JSX.Element => {
 	);
 };
 
-interface IProps {
+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;
 	navItems: INavItem[];
 	currentNavItem: INavItem;
 }
 
-export default Languages;
+type IProps = ILanguagesProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Languages);