@griddo/ax 11.14.2-rc.0 → 11.14.2

package/src/modules/Sites/SitesList/hooks.tsx

@@ -1,20 +1,19 @@
 import { useEffect, useRef, useState } from "react";
-import { IQueryValue } from "@ax/types";
-
-const useSortedListStatus = () => {
-	const sortedInitialState: {
-		isAscending: boolean;
-		sortedByTitle: boolean;
-		sortedByLastAccess: boolean;
-		sortedByDateCreated: boolean;
-	} = {
-		isAscending: false,
-		sortedByTitle: false,
-		sortedByLastAccess: true,
-		sortedByDateCreated: false,
-	};
 
-	const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
+import { useModal, usePermission } from "@ax/hooks";
+import type { IGetSitesParams, IQueryValue, ISite } from "@ax/types";
+
+import type { ISortedListStatus } from "./utils";
+
+const sortedListDefaultState: ISortedListStatus = {
+	isAscending: false,
+	sortedByTitle: false,
+	sortedByLastAccess: true,
+	sortedByDateCreated: false,
+};
+
+const useSortedListStatus = (initialValue?: ISortedListStatus) => {
+	const [sortedListStatus, setSortedListStatus] = useState<ISortedListStatus>(initialValue || sortedListDefaultState);
 
 	return {
 		sortedListStatus,
@@ -111,4 +110,138 @@ interface ISitesFilterQuery {
 	filterQuery: string;
 }
 
-export { useSortedListStatus, useFilterQuery, useIsMount };
+interface IUseSiteActionsParams {
+	site: ISite;
+	setSiteInfo(currentSiteInfo: ISite): Promise<void>;
+	setHistoryPush(page: string, isEditor: boolean): void;
+	deleteSite(siteID: number, params?: IGetSitesParams): Promise<void>;
+	publishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
+	unpublishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
+	getParams: () => IGetSitesParams;
+}
+
+const publishedTooltip: Record<string, string> = {
+	active: "Live",
+	"upload-pending": "Publication pending",
+	offline: "Offline",
+	"offline-pending": "Offline pending",
+};
+
+const getPublishedState = (isPublished: boolean, updated: boolean): string => {
+	switch (isPublished) {
+		case true:
+			return updated ? "active" : "upload-pending";
+		case false:
+			return updated ? "offline" : "offline-pending";
+	}
+};
+
+const useSiteActions = ({
+	site,
+	setSiteInfo,
+	setHistoryPush,
+	deleteSite,
+	publishSite,
+	unpublishSite,
+	getParams,
+}: IUseSiteActionsParams) => {
+	const { isOpen: isOpenDelete, toggleModal: toggleDeleteModal } = useModal();
+	const { isOpen: isOpenPublish, toggleModal: togglePublishModal } = useModal();
+	const [inputValue, setInputValue] = useState("");
+
+	const allowedToDeleteSite = usePermission("general.deleteSite");
+	const allowedToPublishSite = usePermission("general.publishSite");
+	const allowedToUnpublishSite = usePermission("general.unpublishSite");
+
+	const { updated, isPublished } = site;
+	const publishedState = getPublishedState(isPublished, updated);
+
+	const setSite = async () => {
+		await setSiteInfo(site);
+		setHistoryPush("/sites/pages", false);
+	};
+
+	const deleteOption = allowedToDeleteSite ? { label: "delete", icon: "delete", action: toggleDeleteModal } : undefined;
+
+	const publishOptionProps =
+		isPublished && allowedToUnpublishSite
+			? { label: "Unpublish", icon: "offlinePending" }
+			: !isPublished && allowedToPublishSite
+				? { label: "Publish", icon: "uploadPending" }
+				: null;
+
+	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 publishModal = 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>
+				),
+			};
+
+	return {
+		publishedState,
+		publishedTooltip,
+		setSite,
+		menuOptions,
+		inputValue,
+		setInputValue,
+		isOpenDelete,
+		toggleDeleteModal,
+		mainDeleteAction,
+		secondaryDeleteAction,
+		isOpenPublish,
+		togglePublishModal,
+		publishModal,
+	};
+};
+
+export { useSortedListStatus, useFilterQuery, useIsMount, useSiteActions };

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

@@ -1,12 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { connect } from "react-redux";
 
 import {
 	EmptyState,
 	ErrorToast,
 	FilterTagsBar,
-	Icon,
-	IconAction,
 	Loading,
 	MainWrapper,
 	Modal,
@@ -26,20 +24,36 @@ import type {
 	ISettingsForm,
 	ISite,
 	ISiteListConfig,
+	IUser,
 } from "@ax/types";
 
-import GridHeaderFilter from "./GridView/GridHeaderFilter";
+import AllSitesHeader from "./AllSitesHeader";
 import GridSiteItem from "./GridView/GridSiteItem";
 import { useFilterQuery, useIsMount, useSortedListStatus } from "./hooks";
 import BulkHeader from "./ListView/BulkHeader";
 import ListSiteItem from "./ListView/ListSiteItem";
-import RecentSiteItem from "./RecentSiteItem";
+import RecentSitesList from "./RecentSites";
 import SiteModal from "./SiteModal";
 import { filterByStatus, getSortedListStatus } from "./utils";
+import WelcomeModal from "./WelcomeModal";
 
 import * as S from "./style";
 
-const SitesList = (props: ISitesListProps): JSX.Element => {
+const initialState = {
+	name: "",
+	defaultLanguage: null,
+	path: "",
+	domain: null,
+};
+
+const itemsPerPage = 30;
+const firstPage = 1;
+
+const filterLabels = {
+	liveStatus: "Live",
+};
+
+const SitesList = (props: ISitesListProps) => {
 	const {
 		token,
 		sites,
@@ -57,55 +71,71 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 		setHasAnimation,
 		isLoading,
 		isSitesLoading,
+		currentUser,
 	} = props;
 
 	const isMount = useIsMount();
-	const initialState = {
-		name: "",
-		defaultLanguage: null,
-		path: "",
-		domain: null,
-	};
-
-	const itemsPerPage = 30;
-	const firstPage = 1;
 
 	const [page, setPage] = useState(firstPage);
-	const [form, setForm] = useState(initialState);
-	const currentConfig = localStorage.getItem("sitesConfig")
-		? JSON.parse(localStorage.getItem("sitesConfig") || "{}")
-		: config;
+	const [form, setForm] = useState<ISettingsForm>(initialState);
+
+	const currentConfig = useMemo(() => {
+		const raw = localStorage.getItem("sitesConfig");
+		return raw ? JSON.parse(raw) : config;
+	}, [config]);
+
+	const initialHasAnimation = useRef(hasAnimation);
+	const currentConfigRef = useRef(currentConfig);
+	useLayoutEffect(() => {
+		currentConfigRef.current = currentConfig;
+	}, [currentConfig]);
+
 	const [isRecentSitesListDisplayed, setIsRecentSitesListDisplayed] = useState<boolean>(
 		currentConfig.displayRecentSites,
 	);
-	const [displayMode, setDisplayMode] = useState<string | "list" | "grid">(currentConfig.mode);
+
+	const [displayMode, setDisplayMode] = useState<"list" | "grid">(currentConfig.mode);
 	const [searchQuery, setSearchQuery] = useState<string>("");
 	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const tableRef = useRef<HTMLDivElement>(null);
 	const errorRef = useRef<HTMLDivElement>(null);
 
+	const scrollToTop = useCallback(() => {
+		if (tableRef.current) {
+			tableRef.current.scrollTo(0, 0);
+		}
+	}, []);
+
+	const handlePageChange = useCallback(
+		(newPage: number) => {
+			scrollToTop();
+			setPage(newPage);
+		},
+		[scrollToTop],
+	);
+
 	const sitesIds = sites?.map((site: ISite) => site.id);
 
 	const allowedToCreateSite = usePermission("general.createSite");
 
 	const pagination = {
-		setPage,
+		setPage: handlePageChange,
 		itemsPerPage,
 		totalItems,
 		currPage: page,
 	};
 
 	const { isOpen, toggleModal } = useModal();
+	const { isOpen: isWelcomeOpen, toggleModal: toggleWelcomeModal } = useModal();
 
-	const openModal = () => toggleModal();
 	const rightButtonProps = allowedToCreateSite
 		? {
 				label: "New",
-				action: openModal,
+				action: toggleModal,
 			}
 		: undefined;
 
-	const { setSortedListStatus } = useSortedListStatus();
+	const { sortedListStatus, setSortedListStatus } = useSortedListStatus(currentConfig.sortedListStatus);
 	const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery } = useFilterQuery(
 		currentConfig.filterValues,
 	);
@@ -126,6 +156,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 	const getSiteList = useCallback(async () => {
 		if (token) {
 			const params = getParams();
+			// On first mount, token is required for initial authentication
 			if (isMount) {
 				await getSites({ ...params, token });
 			} else {
@@ -134,19 +165,19 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 		}
 	}, [getParams, getSites, isMount, token]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		getSiteList();
-	}, [filterQuery, searchQuery, page]);
+	}, [getSiteList]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
-		if (tableRef.current) {
-			tableRef.current.scrollTo(0, 0);
-			const updatedConfig = { ...currentConfig, filterValues };
-			setListConfig(updatedConfig);
+		if (!initialHasAnimation.current && !currentUser.profileCreated) {
+			toggleWelcomeModal();
 		}
-	}, [page, searchQuery, filterValues]);
+	}, [toggleWelcomeModal, currentUser]);
+
+	useEffect(() => {
+		setListConfig({ ...currentConfigRef.current, filterValues });
+	}, [filterValues, setListConfig]);
 
 	useEffect(() => {
 		const errorCode = error?.code;
@@ -163,27 +194,27 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 		}
 	};
 
-	const mandatoryKeysLength = 4;
 	const isSubmitDisabled =
-		Object.values(form).filter((el: any) => (typeof el === "string" ? el.trim().length : el)).length !==
-		mandatoryKeysLength;
+		Object.values(form).filter((el) => (typeof el === "string" ? el.trim().length : el)).length !==
+		Object.keys(initialState).length;
 
 	const mainAction = { title: "Create site", onClick: saveSiteSettings, disabled: isSubmitDisabled };
 	const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
 	const toggleRecentSites = () => {
-		const updatedConfig = { ...config, displayRecentSites: !isRecentSitesListDisplayed };
+		const updatedConfig = { ...currentConfig, displayRecentSites: !isRecentSitesListDisplayed };
 		setListConfig(updatedConfig);
 		setIsRecentSitesListDisplayed(!isRecentSitesListDisplayed);
 	};
 
 	const changeDisplayMode = (mode: "grid" | "list") => {
-		const updatedConfig = { ...config, mode };
+		const updatedConfig = { ...currentConfig, mode };
 		setListConfig(updatedConfig);
 		setDisplayMode(mode);
 	};
 
 	const sortItems = (orderPointer: IQueryValue[], isAscending: boolean) => {
+		scrollToTop();
 		setPage(firstPage);
 		const orderString = orderPointer[0].value.toString();
 		const sortedState = getSortedListStatus(orderString, isAscending);
@@ -195,62 +226,13 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 	};
 
 	const filterItems = async (filterPointer: string, filtersSelected: IQueryValue[]) => {
+		scrollToTop();
 		setPage(firstPage);
 		setFiltersSelection(filterPointer, filtersSelected);
 		const updatedConfig = { ...currentConfig, filter: filterQuery };
 		setListConfig(updatedConfig);
 	};
 
-	const RecentSitesHeader = () => (
-		<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 = () => {
-		return (
-			<S.RecentSites data-testid="recent-sites-list" fullWidth={recentSites.length >= 5}>
-				<RecentSitesHeader />
-				<S.RecentSitesItemsWrapper data-testid="recent-sites-items-wrapper" isHidden={!isRecentSitesListDisplayed}>
-					{recentSites.map((site: ISite, i: number) => (
-						<RecentSiteItem key={i} site={site} />
-					))}
-				</S.RecentSitesItemsWrapper>
-			</S.RecentSites>
-		);
-	};
-
-	const AllSitesHeader = () => (
-		<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={currentConfig.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>
-	);
-
 	const {
 		resetBulkSelection,
 		selectedItems,
@@ -262,15 +244,16 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 		setHoverCheck,
 	} = useBulkSelection(sitesIds);
 
-	const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, sites);
+	const bulkFilter = useCallback((bulkSelection: number[]) => filterByStatus(bulkSelection, sites), [sites]);
 
-	const handleAddToBulk = (item: ICheck) => addToBulkSelection(item, bulkFilter);
+	const handleAddToBulk = useCallback(
+		(item: ICheck) => addToBulkSelection(item, bulkFilter),
+		[addToBulkSelection, bulkFilter],
+	);
 
 	const handleSelectAll = () => selectAllItems(bulkFilter);
 
-	const unselectAllItems = () => resetBulkSelection();
-
-	const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
+	const selectItems = () => (checkState.isAllSelected ? resetBulkSelection() : handleSelectAll());
 
 	const bulkPublishAction = async (isPublish: boolean) => {
 		setIsBulkLoading(true);
@@ -283,7 +266,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 		if (published.length > 0 && !isPublish) {
 			await unpublishSitesBulk(published, params);
 		}
-		unselectAllItems();
+		resetBulkSelection();
 		setIsBulkLoading(false);
 	};
 
@@ -300,7 +283,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 			totalItems={totalItems}
 			selectItems={selectItems}
 			sortItems={sortItems}
-			sortedListStatus={currentConfig.sortedListStatus}
+			sortedListStatus={sortedListStatus}
 			filterItems={filterItems}
 			filterValues={currentConfig.filterValues}
 			setHoverCheck={setHoverCheck}
@@ -309,28 +292,31 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 		/>
 	);
 
-	const mappedSites =
-		sites.length > 0 ? (
-			sites.map((site: ISite) => {
-				const isItemSelected = isSelected(site.id);
-				return displayMode === "grid" ? (
-					<GridSiteItem key={site.id} site={site} getParams={getParams} />
-				) : (
-					<ListSiteItem
-						key={site.id}
-						site={site}
-						isSelected={isItemSelected}
-						onCheck={handleAddToBulk}
-						getParams={getParams}
-						hoverCheck={checkState.hoverCheck}
-					/>
-				);
-			})
-		) : (
-			<S.EmptyStateWrapper data-testid="empty-state">
-				<EmptyState icon="search" message="We couldn't find what you are looking for. Please, try another search." />
-			</S.EmptyStateWrapper>
-		);
+	const mappedSites = useMemo(
+		() =>
+			sites.length > 0 ? (
+				sites.map((site: ISite) => {
+					const isItemSelected = isSelected(site.id);
+					return displayMode === "grid" ? (
+						<GridSiteItem key={site.id} site={site} getParams={getParams} />
+					) : (
+						<ListSiteItem
+							key={site.id}
+							site={site}
+							isSelected={isItemSelected}
+							onCheck={handleAddToBulk}
+							getParams={getParams}
+							hoverCheck={checkState.hoverCheck}
+						/>
+					);
+				})
+			) : (
+				<S.EmptyStateWrapper data-testid="empty-state">
+					<EmptyState icon="search" message="We couldn't find what you are looking for. Please, try another search." />
+				</S.EmptyStateWrapper>
+			),
+		[sites, displayMode, isSelected, handleAddToBulk, getParams, checkState.hoverCheck],
+	);
 
 	const showPagination = totalItems > itemsPerPage;
 
@@ -344,17 +330,14 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 			</S.GridList>
 			{showPagination && (
 				<S.PaginationWrapper>
-					<Pagination totalItems={totalItems} setPage={setPage} itemsPerPage={itemsPerPage} currPage={page} />
+					<Pagination totalItems={totalItems} setPage={handlePageChange} itemsPerPage={itemsPerPage} currPage={page} />
 				</S.PaginationWrapper>
 			)}
 		</>
 	);
 
-	const filterLabels = {
-		liveStatus: "Live",
-	};
-
 	const handleSearch = (query: string) => {
+		scrollToTop();
 		setSearchQuery(query);
 		setPage(1);
 	};
@@ -376,7 +359,12 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 		</TableList>
 	);
 
-	const handleAnimationEnd = () => setHasAnimation(false);
+	const handleAnimationEnd = () => {
+		setHasAnimation(false);
+		if (!currentUser.profileCreated) {
+			toggleWelcomeModal();
+		}
+	};
 
 	if (isLoading && !hasAnimation) {
 		return <Loading />;
@@ -392,13 +380,24 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 		>
 			<ErrorToast ref={errorRef} />
 			<S.SitesListWrapper className={hasAnimation ? "animate" : ""}>
-				{recentSites?.length > 0 ? <RecentSitesList /> : null}
-				<AllSitesHeader />
+				{recentSites?.length > 0 ? (
+					<RecentSitesList
+						recentSites={recentSites}
+						isRecentSitesListDisplayed={isRecentSitesListDisplayed}
+						toggleRecentSites={toggleRecentSites}
+					/>
+				) : null}
+				<AllSitesHeader
+					displayMode={displayMode}
+					sortItems={sortItems}
+					sortedListStatus={sortedListStatus}
+					changeDisplayMode={changeDisplayMode}
+				/>
 				{isSitesLoading && !hasAnimation ? (
 					<Loading />
 				) : (
 					<S.AllSitesListWrapper className={hasAnimation ? "animate" : ""} onAnimationEnd={handleAnimationEnd}>
-						{displayMode === "grid" ? <>{gridList}</> : <>{listTable}</>}
+						{displayMode === "grid" ? gridList : listTable}
 					</S.AllSitesListWrapper>
 				)}
 			</S.SitesListWrapper>
@@ -412,6 +411,7 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 			>
 				<SiteModal form={form} setForm={setForm} />
 			</Modal>
+			<WelcomeModal isOpen={isWelcomeOpen} toggleModal={toggleWelcomeModal} />
 		</MainWrapper>
 	);
 };
@@ -426,6 +426,7 @@ interface ISitesProps {
 	hasAnimation: boolean;
 	isLoading: boolean;
 	isSitesLoading: boolean;
+	currentUser: IUser;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -438,6 +439,7 @@ const mapStateToProps = (state: IRootState) => ({
 	hasAnimation: state.app.hasAnimation,
 	isLoading: state.app.isLoading,
 	isSitesLoading: state.sites.isSitesLoading,
+	currentUser: state.users.currentUser!,
 });
 
 interface IDispatchProps {