@griddo/ax 11.14.2-rc.0 → 11.14.2

package/src/modules/Sites/SitesList/AllSitesHeader/index.tsx

@@ -0,0 +1,33 @@
+import { IconAction } from "@ax/components";
+import type { IQueryValue, ISiteListConfig } from "@ax/types";
+
+import GridHeaderFilter from "../GridView/GridHeaderFilter";
+
+import * as S from "./style";
+
+const AllSitesHeader = ({ displayMode, sortItems, sortedListStatus, changeDisplayMode }: IAllSitesHeaderProps) => (
+	<S.SectionHeader data-testid="all-sites-header">
+		<S.Title isActive={true} data-testid="all-sites-title">
+			All sites
+		</S.Title>
+		<S.HeaderIconsWrapper data-testid="all-sites-header-icons">
+			{displayMode === "grid" ? (
+				<S.FilterSelect data-testid="all-sites-grid-filter">
+					<S.FilterSelectLabel data-testid="all-sites-grid-filter-label">Sort by:</S.FilterSelectLabel>{" "}
+					<GridHeaderFilter sortItems={sortItems} sortedState={sortedListStatus} />{" "}
+				</S.FilterSelect>
+			) : null}
+			<IconAction icon="Grid2" onClick={() => changeDisplayMode("grid")} active={displayMode === "grid"} />
+			<IconAction icon="BulletList" onClick={() => changeDisplayMode("list")} active={displayMode === "list"} />
+		</S.HeaderIconsWrapper>
+	</S.SectionHeader>
+);
+
+export interface IAllSitesHeaderProps {
+	displayMode: "list" | "grid";
+	sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
+	sortedListStatus: ISiteListConfig["sortedListStatus"];
+	changeDisplayMode: (mode: "list" | "grid") => void;
+}
+
+export default AllSitesHeader;

package/src/modules/Sites/SitesList/AllSitesHeader/style.tsx

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+const SectionHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 0 ${(p) => p.theme.spacing.m};
+  margin-top: ${(p) => p.theme.spacing.m};
+`;
+
+const Title = styled.h1<{ isActive?: boolean }>`
+  margin: 0;
+  margin-right: ${(p) => p.theme.spacing.m};
+  ${(p) => p.theme.textStyle.headingM};
+  color: ${(p) => (p.isActive ? p.theme.colors.textHighEmphasis : p.theme.colors.textMediumEmphasis)};
+`;
+
+const HeaderIconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const FilterSelectLabel = styled.span`
+  color: ${(p) => p.theme.color.interactive01};
+`;
+
+const FilterSelect = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  line-height: 32px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  color: ${(p) => p.theme.color.textLowEmphasis};
+`;
+
+export { SectionHeader, Title, HeaderIconsWrapper, FilterSelect, FilterSelectLabel };

package/src/modules/Sites/SitesList/GridView/GridHeaderFilter/index.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import { FloatingMenu, Icon, ListItem, ListTitle } from "@ax/components";
+import type { IQueryValue } from "@ax/types";
 
-import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
-import { IQueryValue } from "@ax/types";
+import type { ISortedListStatus } from "../../utils";
 
 import * as S from "./style";
 
@@ -66,8 +66,8 @@ const GridHeaderFilter = ({ sortItems, sortedState }: IGridHeaderFilterProps): J
 };
 
 export interface IGridHeaderFilterProps {
-	sortedState: any;
-	sortItems(orderPointer: IQueryValue[], isAscending: boolean): any;
+	sortedState: ISortedListStatus;
+	sortItems(orderPointer: IQueryValue[], isAscending: boolean): void;
 }
 
 export default GridHeaderFilter;

package/src/modules/Sites/SitesList/GridView/GridSiteItem/index.tsx

@@ -1,132 +1,36 @@
-import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { useModal, usePermission } from "@ax/hooks";
-import { isDevelopment } from "@ax/helpers";
-import { IGetSitesParams, ISite } from "@ax/types";
+import { FieldsBehavior, Icon, Modal, Tooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { FieldsBehavior, Icon, Modal, Tooltip } from "@ax/components";
+import { isDevelopment } from "@ax/helpers";
+import type { IGetSitesParams, ISite } from "@ax/types";
 
 import { ItemName, ItemThumbnail } from "./../../atoms";
+import { useSiteActions } from "./../../hooks";
 
 import * as S from "./style";
 
 const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 	const { site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, getParams } = props;
-	const { isOpen: isOpenDelete, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isOpenPublish, toggleModal: togglePublishModal } = useModal();
-	const [inputValue, setInputValue] = useState("");
-	const { updated, isPublished } = site;
-
-	const allowedToDeleteSite = usePermission("general.deleteSite");
-	const allowedToPublishSite = usePermission("general.publishSite");
-	const allowedToUnpublishSite = usePermission("general.unpublishSite");
-
-	const getPublishedState = (isPublished: boolean, updated: boolean) => {
-		switch (isPublished) {
-			case true:
-				return updated ? "active" : "upload-pending";
-			case false:
-				return updated ? "offline" : "offline-pending";
-		}
-	};
-
-	const publishedState = getPublishedState(isPublished, updated);
-
-	const publishedTooltip = {
-		active: "Live",
-		"upload-pending": "Publication pending",
-		offline: "Offline",
-		"offline-pending": "Offline pending",
-	};
-
-	const setSite = async () => {
-		await setSiteInfo(site);
-		const contentPath = "/sites/pages";
-		setHistoryPush(contentPath, false);
-	};
-
-	const getPublishOption = (isPublished: boolean) =>
-		isPublished && allowedToUnpublishSite
-			? { label: "Unpublish", icon: "offlinePending" }
-			: !isPublished && allowedToPublishSite
-				? { label: "Publish", icon: "uploadPending" }
-				: null;
-
-	const publishOptionProps = getPublishOption(isPublished);
-
-	const deleteOption = allowedToDeleteSite
-		? {
-				label: "delete",
-				icon: "delete",
-				action: toggleDeleteModal,
-			}
-		: undefined;
-
-	const publishOption = publishOptionProps
-		? {
-				label: publishOptionProps.label,
-				icon: publishOptionProps.icon,
-				action: togglePublishModal,
-			}
-		: undefined;
-
-	const menuOptions = [deleteOption, publishOption];
-
-	const handleDeleteSite = async () => {
-		const params = getParams();
-		await deleteSite(site.id, params);
-		toggleDeleteModal();
-	};
-
-	const mainDeleteAction = {
-		title: "Delete Site",
-		onClick: handleDeleteSite,
-		disabled: inputValue !== site.name.toUpperCase(),
-	};
-	const secondaryDeleteAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const handlePublishSite = async () => {
-		const params = getParams();
-		await publishSite(site.id, params);
-		togglePublishModal();
-	};
-
-	const handleUnpublishSite = async () => {
-		const params = getParams();
-		await unpublishSite(site.id, params);
-		togglePublishModal();
-	};
-
-	const getPublishModal = (isPublished: boolean) =>
-		isPublished
-			? {
-					mainAction: { title: "Unpublish Site", onClick: handleUnpublishSite },
-					secondaryAction: { title: "Cancel", onClick: togglePublishModal },
-					title: "Unpublish Site",
-					content: (
-						<p>
-							You are going to unpublish <strong>{site.name}</strong> site.
-							<br />
-							This action can take several minutes.
-						</p>
-					),
-				}
-			: {
-					mainAction: { title: "Publish Site", onClick: handlePublishSite },
-					secondaryAction: { title: "Cancel", onClick: togglePublishModal },
-					title: "Publish Site",
-					content: (
-						<p>
-							You are going to publish <strong>{site.name}</strong> site.
-							<br />
-							Make sure everything is ok before you do it.
-						</p>
-					),
-				};
 
-	const { title, mainAction, secondaryAction, content } = getPublishModal(site.isPublished);
+	const {
+		publishedState,
+		publishedTooltip,
+		setSite,
+		menuOptions,
+		inputValue,
+		setInputValue,
+		isOpenDelete,
+		toggleDeleteModal,
+		mainDeleteAction,
+		secondaryDeleteAction,
+		isOpenPublish,
+		togglePublishModal,
+		publishModal,
+	} = useSiteActions({ site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, getParams });
+
+	const { title, mainAction, secondaryAction, content } = publishModal;
 
 	const siteTooltip = isDevelopment() && `Site id: ${site.id}`;
 
@@ -134,7 +38,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 		<>
 			<S.SiteWrapper key={site.id} onClick={setSite} data-testid="grid-site-item">
 				<Tooltip content={siteTooltip}>
-					<ItemThumbnail src={site.thumbnail} width={280} height={199} />
+					<ItemThumbnail src={site.thumbnail} width={290} height={199} />
 				</Tooltip>
 				<S.Wrapper>
 					<S.Title>
@@ -158,7 +62,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 				{isOpenDelete ? (
 					<S.ModalContent data-testid="delete-modal">
 						<p>
-							Are you sure you want to delete <strong>‘{site.name}’</strong> site?
+							Are you sure you want to delete <strong>'{site.name}'</strong> site?
 							<br />
 							This action <strong>cannot be undone</strong>.
 						</p>

package/src/modules/Sites/SitesList/ListView/BulkHeader/TableHeader/index.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import { CheckField, LastAccessFilter, LiveFilter, NameFilter, TableCounter, Tooltip } from "@ax/components";
+import type { IQueryValue } from "@ax/types";
 
-import { CheckField, TableCounter, LastAccessFilter, NameFilter, LiveFilter, Tooltip } from "@ax/components";
-import { IQueryValue } from "@ax/types";
+import type { ISortedListStatus } from "../../../utils";
 
 import * as S from "./style";
 
@@ -66,7 +66,7 @@ interface IProps {
 	checkState: Record<string, boolean>;
 	sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
 	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
-	sortedListStatus: { isAscending: boolean; sortedByDate: boolean; sortedByTitle: boolean; sortedByURL: boolean };
+	sortedListStatus: ISortedListStatus;
 	filterValues: Record<string, IQueryValue[]>;
 	setHoverCheck: (state: boolean) => void;
 }

package/src/modules/Sites/SitesList/ListView/BulkHeader/index.tsx

@@ -4,6 +4,7 @@ import type { IBulkSelectedItems } from "@ax/hooks";
 import { usePermission } from "@ax/hooks";
 import type { IQueryValue } from "@ax/types";
 
+import type { ISortedListStatus } from "../../utils";
 import TableHeader from "./TableHeader";
 
 import * as S from "./style";
@@ -77,15 +78,15 @@ const BulkHeader = (props: IBulkHeaderProps): JSX.Element => {
 
 export interface IBulkHeaderProps {
 	showBulk: boolean;
-	checkState: any;
+	checkState: Record<string, boolean>;
 	bulkPublish: () => void;
 	bulkUnpublish: () => void;
 	selectItems: () => void;
 	selectAllItems: () => void;
 	totalItems: number;
-	sortItems: (orderPointer: IQueryValue[], isAscending: any) => void;
+	sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
 	filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
-	sortedListStatus: any;
+	sortedListStatus: ISortedListStatus;
 	filterValues: Record<string, IQueryValue[]>;
 	setHoverCheck: (state: boolean) => void;
 	selectedItems: IBulkSelectedItems;

package/src/modules/Sites/SitesList/ListView/ListSiteItem/index.tsx

@@ -1,14 +1,13 @@
-import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { useModal, usePermission } from "@ax/hooks";
-import { getFormattedDateWithTimezone } from "@ax/helpers";
-import { ICheck, IGetSitesParams, ISite } from "@ax/types";
+import { CheckField, FieldsBehavior, Icon, Modal, Tooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { FieldsBehavior, Icon, Modal, Tooltip, CheckField } from "@ax/components";
+import { getFormattedDateWithTimezone } from "@ax/helpers";
+import type { ICheck, IGetSitesParams, ISite } from "@ax/types";
 
 import { ItemName, ItemThumbnail } from "./../../atoms";
+import { useSiteActions } from "./../../hooks";
 
 import * as S from "./style";
 
@@ -26,119 +25,23 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 		hoverCheck,
 	} = props;
 
-	const { isOpen: isOpenDelete, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isOpenPublish, toggleModal: togglePublishModal } = useModal();
-	const [inputValue, setInputValue] = useState("");
-	const { updated, isPublished } = site;
-
-	const allowedToDeleteSite = usePermission("general.deleteSite");
-	const allowedToPublishSite = usePermission("general.publishSite");
-	const allowedToUnpublishSite = usePermission("general.unpublishSite");
-
-	const getPublishedState = (isPublished: boolean, updated: boolean) => {
-		switch (isPublished) {
-			case true:
-				return updated ? "active" : "upload-pending";
-			case false:
-				return updated ? "offline" : "offline-pending";
-		}
-	};
-
-	const publishedState = getPublishedState(isPublished, updated);
-
-	const publishedTooltip = {
-		active: "Live",
-		"upload-pending": "Publication pending",
-		offline: "Offline",
-		"offline-pending": "Offline pending",
-	};
-
-	const setSite = async () => {
-		await setSiteInfo(site);
-		const contentPath = "/sites/pages";
-		setHistoryPush(contentPath, false);
-	};
-
-	const getPublishOption = (isPublished: boolean) =>
-		isPublished && allowedToUnpublishSite
-			? { label: "Unpublish", icon: "offlinePending" }
-			: allowedToPublishSite
-				? { label: "Publish", icon: "uploadPending" }
-				: null;
-
-	const publishOptionProps = getPublishOption(isPublished);
-
-	const deleteOption = allowedToDeleteSite
-		? {
-				label: "delete",
-				icon: "delete",
-				action: toggleDeleteModal,
-			}
-		: undefined;
-
-	const publishOption = publishOptionProps
-		? {
-				label: publishOptionProps.label,
-				icon: publishOptionProps.icon,
-				action: togglePublishModal,
-			}
-		: undefined;
-
-	const menuOptions = [deleteOption, publishOption];
-
-	const handleDeleteSite = async () => {
-		const params = getParams();
-		await deleteSite(site.id, params);
-		toggleDeleteModal();
-	};
-
-	const mainDeleteAction = {
-		title: "Delete Site",
-		onClick: handleDeleteSite,
-		disabled: inputValue !== site.name.toUpperCase(),
-	};
-	const secondaryDeleteAction = { title: "Cancel", onClick: toggleDeleteModal };
-
-	const handlePublishSite = async () => {
-		const params = getParams();
-		await publishSite(site.id, params);
-		togglePublishModal();
-	};
-
-	const handleUnpublishSite = async () => {
-		const params = getParams();
-		await unpublishSite(site.id, params);
-		togglePublishModal();
-	};
-
-	const getPublishModal = (isPublished: boolean) =>
-		isPublished
-			? {
-					mainAction: { title: "Unpublish Site", onClick: handleUnpublishSite },
-					secondaryAction: { title: "Cancel", onClick: togglePublishModal },
-					title: "Unpublish Site",
-					content: (
-						<p>
-							You are going to unpublish <strong>{site.name}</strong> site.
-							<br />
-							This action can take several minutes.
-						</p>
-					),
-				}
-			: {
-					mainAction: { title: "Publish Site", onClick: handlePublishSite },
-					secondaryAction: { title: "Cancel", onClick: togglePublishModal },
-					title: "Publish Site",
-					content: (
-						<p>
-							You are going to publish <strong>{site.name}</strong> site.
-							<br />
-							Make sure everything is ok before you do it.
-						</p>
-					),
-				};
-
-	const { title, mainAction, secondaryAction, content } = getPublishModal(site.isPublished);
+	const {
+		publishedState,
+		publishedTooltip,
+		setSite,
+		menuOptions,
+		inputValue,
+		setInputValue,
+		isOpenDelete,
+		toggleDeleteModal,
+		mainDeleteAction,
+		secondaryDeleteAction,
+		isOpenPublish,
+		togglePublishModal,
+		publishModal,
+	} = useSiteActions({ site, setSiteInfo, setHistoryPush, deleteSite, publishSite, unpublishSite, getParams });
+
+	const { title, mainAction, secondaryAction, content } = publishModal;
 
 	const handleOnChange = (value: ICheck) => onCheck(value);
 
@@ -181,7 +84,7 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 				{isOpenDelete ? (
 					<S.ModalContent data-testid="delete-modal">
 						<p>
-							Are you sure you want to delete <strong>‘{site.name}’</strong> site?
+							Are you sure you want to delete <strong>'{site.name}'</strong> site?
 							<br />
 							This action <strong>cannot be undone</strong>.
 						</p>
@@ -214,7 +117,7 @@ interface IListSiteItemProps {
 	deleteSite(siteID: number, params?: IGetSitesParams): Promise<void>;
 	publishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
 	unpublishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
-	onCheck: (e: any) => void;
+	onCheck: (e: ICheck) => void;
 	getParams: () => IGetSitesParams;
 }
 

package/src/modules/Sites/SitesList/{RecentSiteItem → RecentSites/RecentSiteItem}/index.tsx

@@ -1,13 +1,12 @@
-import React from "react";
 import { connect } from "react-redux";
 
-import { isDevelopment } from "@ax/helpers";
-import { ISite } from "@ax/types";
+import { Tooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { Tooltip } from "@ax/components";
+import { isDevelopment } from "@ax/helpers";
+import type { ISite } from "@ax/types";
 
-import { ItemName, ItemThumbnail } from "./../atoms";
+import { ItemName, ItemThumbnail } from "../../atoms";
 
 import * as S from "./style";
 

package/src/modules/Sites/SitesList/RecentSites/index.tsx

@@ -0,0 +1,49 @@
+import { Icon } from "@ax/components";
+import type { ISite } from "@ax/types";
+
+import RecentSiteItem from "./RecentSiteItem";
+
+import * as S from "./style";
+
+const RecentSitesHeader = ({ isRecentSitesListDisplayed, toggleRecentSites }: IRecentSitesHeaderProps) => (
+	<S.SectionHeader data-testid="recent-sites-header" isRecentSites={true}>
+		<S.Title data-testid="recent-sites-title" isActive={isRecentSitesListDisplayed}>
+			Recent sites
+		</S.Title>
+		<S.CollapseButton data-testid="recent-sites-collapse-button" onClick={toggleRecentSites}>
+			{isRecentSitesListDisplayed ? (
+				<>
+					<S.Label data-testid="recent-sites-hide-label">Hide recent sites </S.Label> <Icon name="UpArrow" />
+				</>
+			) : (
+				<>
+					<S.Label data-testid="recent-sites-show-label">Show recent sites </S.Label> <Icon name="DownArrow" />
+				</>
+			)}
+		</S.CollapseButton>
+	</S.SectionHeader>
+);
+
+const RecentSitesList = ({ recentSites, isRecentSitesListDisplayed, toggleRecentSites }: IRecentSitesListProps) => (
+	<S.RecentSites data-testid="recent-sites-list" fullWidth={recentSites.length >= 5}>
+		<RecentSitesHeader isRecentSitesListDisplayed={isRecentSitesListDisplayed} toggleRecentSites={toggleRecentSites} />
+		<S.RecentSitesItemsWrapper data-testid="recent-sites-items-wrapper" isHidden={!isRecentSitesListDisplayed}>
+			{recentSites.map((site: ISite) => (
+				<RecentSiteItem key={site.id} site={site} />
+			))}
+		</S.RecentSitesItemsWrapper>
+	</S.RecentSites>
+);
+
+interface IRecentSitesHeaderProps {
+	isRecentSitesListDisplayed: boolean;
+	toggleRecentSites: () => void;
+}
+
+export interface IRecentSitesListProps {
+	recentSites: ISite[];
+	isRecentSitesListDisplayed: boolean;
+	toggleRecentSites: () => void;
+}
+
+export default RecentSitesList;

package/src/modules/Sites/SitesList/RecentSites/style.tsx

@@ -0,0 +1,92 @@
+import styled, { css } from "styled-components";
+
+const SectionHeader = styled.div<{ isRecentSites?: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  margin: 0 ${(p) => (p.isRecentSites ? p.theme.spacing.s : p.theme.spacing.m)};
+  margin-top: ${(p) => p.theme.spacing.m};
+`;
+
+const Title = styled.h1<{ isActive?: boolean }>`
+  margin: 0;
+  margin-right: ${(p) => p.theme.spacing.m};
+  ${(p) => p.theme.textStyle.headingM};
+  color: ${(p) => (p.isActive ? p.theme.colors.textHighEmphasis : p.theme.colors.textMediumEmphasis)};
+`;
+
+const CollapseButton = styled.div`
+  display: flex;
+  align-items: center;
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+`;
+
+const Label = styled.span`
+  margin-right: 14px;
+`;
+
+const RecentSites = styled.div<{ fullWidth: boolean }>`
+  display: ${(p) => (p.fullWidth ? "block" : "inline-block")};
+  padding-bottom: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  background: ${(p) => p.theme.color.uiBackground02};
+  min-height: 56px;
+  overflow: hidden;
+  margin: ${(p) => p.theme.spacing.m};
+  margin-bottom: 0;
+  flex-shrink: 0;
+
+  h1 {
+    padding-left: 0;
+  }
+`;
+
+const RecentSitesItemsWrapper = styled.div<{ isHidden: boolean }>`
+  display: grid;
+  grid-auto-flow: column;
+  overflow: auto;
+  grid-gap: ${(p) => p.theme.spacing.m};
+  padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.s} 0px ${(p) => p.theme.spacing.s};
+  overflow: hidden;
+
+  div {
+    min-width: 100%;
+  }
+
+  ${(props) =>
+		props.isHidden &&
+		css`
+      height: 0;
+      padding: 0;
+      padding-left: ${(p) => p.theme.spacing.s};
+      padding-top: ${(p) => p.theme.spacing.xs};
+    `};
+
+  @media (min-width: 1200px) {
+    div:nth-child(6),
+    div:nth-child(7) {
+      display: none;
+    }
+  }
+
+  @media (min-width: 1600px) {
+    div:nth-child(6) {
+      display: block;
+    }
+    div:nth-child(7) {
+      display: none;
+    }
+  }
+
+  @media (min-width: 1750px) {
+    div:nth-child(6),
+    div:nth-child(7) {
+      display: block;
+    }
+  }
+`;
+
+export { SectionHeader, Title, CollapseButton, Label, RecentSites, RecentSitesItemsWrapper };

package/src/modules/Sites/SitesList/SiteModal/index.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { connect } from "react-redux";
 
-import { IRootState, ILanguage, ISettingsForm } from "@ax/types";
+import type { ILanguage, IRootState, ISettingsForm } from "@ax/types";
 import { slugify } from "@ax/helpers";
 import { ErrorToast, FieldsBehavior } from "@ax/components";
 
@@ -20,10 +20,11 @@ const SiteModal = (props: ISiteModalProps): JSX.Element => {
 	const setPathValue = (value: string) => updateForm({ path: value });
 	const setDomainValue = (value: number) => updateForm({ domain: value });
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		globalDefaultLang && setLangValue(globalDefaultLang.id);
-	}, []);
+		if (globalDefaultLang) {
+			setForm((state: ISettingsForm) => ({ ...state, defaultLanguage: globalDefaultLang.id }));
+		}
+	}, [globalDefaultLang, setForm]);
 
 	const slugHelpText =
 		"The path is for the site on this language. Please, fill with the name of the site. Example: /the-site-url";
@@ -84,8 +85,8 @@ const mapStateToProps = (state: IRootState) => ({
 
 interface IStateProps {
 	languages?: ILanguage[];
-	form: { name: string; defaultLanguage: number | null; path: string; domain: string | null };
-	setForm: React.Dispatch<React.SetStateAction<any>>;
+	form: ISettingsForm;
+	setForm: React.Dispatch<React.SetStateAction<ISettingsForm>>;
 }
 
 type ISiteModalProps = IStateProps;