@griddo/ax 11.14.1 → 11.14.2-rc.1

package/src/hooks/forms.tsx

@@ -2,7 +2,6 @@ import { memo, useCallback, useEffect, useRef, useState } from "react";
 
 import { cleanPageValues } from "@ax/forms";
 import { deepClone, isEmptyObj } from "@ax/helpers";
-import type { FormContent, IUser } from "@ax/types";
 
 import isEqual from "lodash.isequal";
 
@@ -197,60 +196,58 @@ const useIsDirty = (
 	return { isDirty, setIsDirty, resetDirty };
 };
 
-const cleanModified = (updatedValues: any, originalValues: any) => {
-	delete updatedValues.modified;
+const useShouldBeSaved = (form: Record<string, any> | null | undefined, debug = DEBUG_DIRTY) => {
+	const [isDirty, setIsDirtyState] = useState(false);
+	const originalRef = useRef<Record<string, any>>();
 
-	delete originalValues.modified;
-
-	return {
-		cleanUpdatedValues: updatedValues,
-		cleanOriginalValues: originalValues,
-	};
-};
-
-const useShouldBeSaved = (form: Record<string, unknown> | IUser | FormContent, debug = DEBUG_DIRTY) => {
-	const [isDirty, setIsDirty] = useState(false);
-	const formRef = useRef();
-
-	const stringValue = form && JSON.stringify(form);
+	// Intercept setIsDirty to update baseline when saved
+	const setIsDirty = useCallback(
+		(value: boolean) => {
+			setIsDirtyState(value);
+			if (value === false && form) {
+				originalRef.current = deepClone(form);
+			}
+		},
+		[form],
+	);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO fix this
 	useEffect(() => {
-		if (!formRef.current) {
-			formRef.current = stringValue && JSON.parse(stringValue);
+		if (!form) {
+			if (debug) console.log("[useShouldBeSaved] form=null → isDirty=false");
+			setIsDirtyState(false);
+			return;
 		}
-		if (form !== null) {
-			const { cleanUpdatedValues, cleanOriginalValues } = cleanModified(formRef.current, form);
-			const isFormDirty =
-				cleanOriginalValues.id && !cleanUpdatedValues.id ? false : !isEqual(cleanUpdatedValues, cleanOriginalValues);
 
-			if (debug) {
-				console.groupCollapsed(
-					`[useShouldBeSaved] isDirty: %c${isFormDirty}`,
-					isFormDirty ? "color: red; font-weight: bold" : "color: green",
-				);
-				console.log("Stored ref (cleaned):", cleanUpdatedValues);
-				console.log("Current    (cleaned):", cleanOriginalValues);
-				if (cleanOriginalValues.id && !cleanUpdatedValues.id) {
-					console.log("Suppressed: original has id, ref does not.");
-				}
-				const diffs = getChangedKeys(
-					cleanUpdatedValues as Record<string, unknown>,
-					cleanOriginalValues as Record<string, unknown>,
-				);
-				if (diffs.length > 0) {
-					console.table(diffs);
-				}
-				console.groupEnd();
-			}
+		// Initialize baseline on first render
+		if (!originalRef.current) {
+			originalRef.current = deepClone(form);
+			return;
+		}
 
-			setIsDirty(isFormDirty);
-			formRef.current = stringValue && JSON.parse(stringValue);
-		} else {
-			if (debug) console.log("[useShouldBeSaved] form=null → isDirty=false");
-			setIsDirty(false);
+		// Compare against the baseline (original)
+		const original = { ...originalRef.current } as Record<string, unknown>;
+		const current = { ...form } as Record<string, unknown>;
+		delete original.modified;
+		delete current.modified;
+
+		const hasChanges = !isEqual(original, current);
+
+		if (debug) {
+			console.groupCollapsed(
+				`[useShouldBeSaved] isDirty: %c${hasChanges}`,
+				hasChanges ? "color: red; font-weight: bold" : "color: green",
+			);
+			console.log("Original (cleaned):", original);
+			console.log("Current  (cleaned):", current);
+			const diffs = getChangedKeys(original as Record<string, unknown>, current as Record<string, unknown>);
+			if (diffs.length > 0) {
+				console.table(diffs);
+			}
+			console.groupEnd();
 		}
-	}, [form]);
+
+		setIsDirtyState(hasChanges);
+	}, [form, debug]);
 
 	return { isDirty, setIsDirty };
 };

package/src/hooks/modals.tsx

@@ -2,9 +2,10 @@ import { useCallback, useEffect, useRef, useState } from "react";
 
 const useModal = (initialState?: boolean, bodyBlock = true) => {
 	const [isOpen, setIsOpen] = useState(initialState || false);
-	const toggleModal = () => {
-		setIsOpen(!isOpen);
-	};
+
+	const toggleModal = useCallback(() => {
+		setIsOpen((prev) => !prev);
+	}, []);
 
 	useEffect(() => {
 		if (isOpen && bodyBlock) {

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

@@ -19,7 +19,7 @@ const UserItem = (props: IUserItemProps) => {
 		<S.Item>
 			<S.User>
 				<S.AvatarWrapper>
-					<Avatar image={image} name={name || ""} size="s" />
+					<Avatar image={image} name={name || ""} size={24} />
 				</S.AvatarWrapper>
 				<S.Name>{name}</S.Name>
 				{!isOpen && <S.CounterWrapper>{logActivity.length} events created</S.CounterWrapper>}

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

@@ -1,17 +1,15 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { connect } from "react-redux";
 
-import { ILogoutAction } from "@ax/containers/App/interfaces";
 import { appActions } from "@ax/containers/App";
+import type { ILogoutAction } from "@ax/containers/App/interfaces";
 
 const Logout = (props: IProps) => {
 	const { logout, setHistoryPush } = props;
 
 	useEffect(() => {
+		logout();
 		setHistoryPush("/login");
-		return () => {
-			logout();
-		};
 	}, [logout, setHistoryPush]);
 
 	return <></>;

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

@@ -1,17 +1,17 @@
 import React, { useContext } from "react";
 
-import { IRouter } from "@ax/routes";
+import { Avatar, Icon } from "@ax/components";
 import { Restricted } from "@ax/guards";
-import { Icon } from "@ax/components";
+import type { IRouter } from "@ax/routes";
 
-import NavSubItem from "./NavSubItem";
 import { NavContext } from "./../context";
+import NavSubItem from "./NavSubItem";
 
 import * as S from "./style";
 
 const NavItem = (props: IProps) => {
 	const {
-		route: { component, path, name, icon, routesGroups, onClick, url, target = "_blank" },
+		route: { component, path, name, icon, routesGroups, onClick, url, target = "_blank", avatar },
 		location,
 		type,
 		isOpened,
@@ -20,89 +20,110 @@ const NavItem = (props: IProps) => {
 
 	const { state, toggleSubmenu } = useContext(NavContext)!;
 
-	const isSelected = location && (location.pathname === path || location.pathname.includes(path));
+	const isSelected = location ? location.pathname === path || location.pathname.includes(path) : false;
 	const isSelectedClass = isSelected ? "selected" : "";
+	const hasImage = avatar ? "withImage" : "";
 
 	const hasSubmenu = routesGroups && routesGroups.length > 0;
+	const isSubmenuOpen = !!state[name];
 
 	const handleClick = () => {
 		if (onClick) {
 			onClick();
 		} else if (url) {
 			window.open(url, target);
-		} else if (component && location.pathname !== path) {
+		} else if (component && location && location.pathname !== path) {
 			setHistoryPush(path);
 		} else if (isOpened && hasSubmenu) {
 			toggleSubmenu(name);
 		}
 	};
 
-	const subMenuIcon = state[name] ? "UpArrow" : "DownArrow";
+	const subMenuIcon = isSubmenuOpen ? "UpArrow" : "DownArrow";
 
 	const DropdownClass = isOpened ? "inline" : "floating";
 
 	return (
-		<S.Item key={name} type={type} isOpened={isOpened} isSubmenuOpen={state[name]} active={isSelected}>
-			<S.NavLink onClick={handleClick} className={isSelectedClass}>
-				<S.Icon>{icon && <Icon name={icon} size="24px" />}</S.Icon>
-				<S.LinkName active={isSelected || state[name]}>{name}</S.LinkName>
+		<S.Item key={name} type={type} isOpened={isOpened} isSubmenuOpen={isSubmenuOpen} active={isSelected}>
+			<S.NavLink onClick={handleClick} className={`${isSelectedClass} ${hasImage}`}>
+				{avatar ? (
+					<S.AvatarWithBorder>
+						<Avatar image={avatar.image} name={avatar.name} size={32} background bold />
+					</S.AvatarWithBorder>
+				) : (
+					<S.Icon>{icon && <Icon name={icon} size="24px" />}</S.Icon>
+				)}
+				<S.LinkName active={isSelected || isSubmenuOpen}>{name}</S.LinkName>
 				{hasSubmenu && isOpened && (
 					<S.Arrow>
 						<Icon name={subMenuIcon} />
 					</S.Arrow>
 				)}
 			</S.NavLink>
-			<S.Dropdown isSubmenu={hasSubmenu} isSubmenuOpen={state[name]} className={DropdownClass} type={type}>
+			<S.Dropdown isSubmenu={hasSubmenu} isSubmenuOpen={isSubmenuOpen} className={DropdownClass} type={type}>
 				<S.Heading onClick={handleClick}>
 					<div>{name}</div>
 				</S.Heading>
-				{routesGroups &&
-					routesGroups.map((subGroup: any, groupI: any) => (
-						<React.Fragment key={groupI}>
-							{subGroup.routes && (
-								<>
-									{subGroup.routes.map((subLink: any, subI: any) => {
-										const goToSubLink = () => {
-											if (location.pathname !== subLink.path) {
-												const isEditor = subLink.isEditor ? true : false;
-												setHistoryPush(subLink.path, isEditor);
-											}
-											if (subLink.setDataAction) {
-												const setCurrentData = (id: string) => subLink.setDataAction(id);
-												setCurrentData(subLink.item.id);
-											}
-										};
-
-										const isSelectedSubItem = location.pathname === subLink.path ? true : false;
-
-										const navSubItem = (
-											<NavSubItem key={subI} active={isSelectedSubItem} type={type}>
-												<S.NavLink onClick={goToSubLink}>
-													<S.LinkName active={isSelected}>{subLink.name}</S.LinkName>
-												</S.NavLink>
-											</NavSubItem>
-										);
-
-										return subLink.permission ? (
-											<Restricted to={subLink.permission} key={subI}>
-												{navSubItem}
-											</Restricted>
-										) : (
-											navSubItem
-										);
-									})}
-								</>
-							)}
-						</React.Fragment>
-					))}
+				{routesGroups?.map((subGroup: IRouteGroup, groupI: number) => (
+					<React.Fragment key={`${subGroup.name}-${groupI}`}>
+						{subGroup.routes && (
+							<>
+								{subGroup.routes.map((subLink: ISubRoute, subI: number) => {
+									const goToSubLink = () => {
+										if (location && location.pathname !== subLink.path) {
+											const isEditor = !!subLink.isEditor;
+											setHistoryPush(subLink.path, isEditor);
+										}
+										if (subLink.setDataAction && subLink.item) {
+											subLink.setDataAction(subLink.item.id);
+										}
+									};
+
+									const isSelectedSubItem = location ? location.pathname === subLink.path : false;
+
+									const navSubItem = (
+										<NavSubItem key={`${subLink.path}-${subI}`} active={isSelectedSubItem} type={type}>
+											<S.NavLink onClick={goToSubLink}>
+												<S.LinkName active={isSelected}>{subLink.name}</S.LinkName>
+											</S.NavLink>
+										</NavSubItem>
+									);
+
+									return subLink.permission ? (
+										<Restricted to={subLink.permission} key={`${subLink.path}-${subI}`}>
+											{navSubItem}
+										</Restricted>
+									) : (
+										navSubItem
+									);
+								})}
+							</>
+						)}
+					</React.Fragment>
+				))}
 			</S.Dropdown>
 		</S.Item>
 	);
 };
 
+interface ISubRoute {
+	path: string;
+	component?: any;
+	name: string;
+	permission?: string;
+	isEditor?: boolean;
+	setDataAction?: (id: string) => void;
+	item?: { id: string };
+}
+
+interface IRouteGroup {
+	name: string;
+	routes: ISubRoute[];
+}
+
 interface IProps {
 	route: IRouter;
-	location?: any;
+	location?: Location;
 	type: string;
 	isOpened: boolean;
 	setHistoryPush(path: string, isEditor?: boolean): void;

package/src/modules/App/Routing/NavMenu/NavItem/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Heading = styled.li`
+const Heading = styled.li`
   ${(p) => p.theme.textStyle.headingXXS};
   width: 100%;
   height: 100%;
@@ -8,7 +8,7 @@ export const Heading = styled.li`
   align-items: center;
 `;
 
-export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean; type: string }>`
+const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean; type: string }>`
   background-color: ${(p) =>
 		p.type === "multisite" ? p.theme.color.uiMainMenuBackgroundDark : p.theme.color.uiSiteMenuDark};
   color: ${(p) => p.theme.color.textHighEmphasisInverse};
@@ -54,7 +54,7 @@ export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean;
   }
 `;
 
-export const Arrow = styled.div`
+const Arrow = styled.div`
   margin-left: auto;
   height: ${(p) => p.theme.spacing.m};
   width: ${(p) => p.theme.spacing.m};
@@ -64,13 +64,13 @@ export const Arrow = styled.div`
   }
 `;
 
-export const LinkName = styled.span<{ active: boolean }>`
+const LinkName = styled.span<{ active: boolean }>`
   white-space: nowrap;
   overflow: hidden;
   color: ${(p) => (p.active ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse)};
 `;
 
-export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen: boolean; active: boolean }>`
+const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen: boolean; active: boolean }>`
   position: relative;
   margin-left: ${(p) => (p.isSubmenuOpen ? "0" : p.theme.spacing.s)};
   margin-right: ${(p) => (p.isOpened && !p.isSubmenuOpen ? p.theme.spacing.s : "0")};
@@ -155,11 +155,16 @@ export const Item = styled.li<{ type: string; isOpened: boolean; isSubmenuOpen:
   }
 `;
 
-export const NavLink = styled.a`
+const NavLink = styled.a`
   display: flex;
+
+  &.withImage {
+    padding: 2px;
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
 `;
 
-export const Icon = styled.div`
+const Icon = styled.div`
   display: flex;
   margin-right: ${(p) => p.theme.spacing.s};
   height: ${(p) => p.theme.spacing.m};
@@ -169,3 +174,12 @@ export const Icon = styled.div`
     fill: ${(p) => p.theme.color.textMediumEmphasisInverse};
   }
 `;
+
+const AvatarWithBorder = styled.div`
+  display: flex;
+  border: 2px solid;
+  border-color: ${(p) => p.theme.color.textHighEmphasisInverse};
+  border-radius: 50%;
+`;
+
+export { Heading, Dropdown, Arrow, LinkName, Item, NavLink, Icon, AvatarWithBorder };

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

@@ -1,18 +1,17 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
-import { RouteComponentProps, withRouter } from "react-router-dom";
-import { version } from "./../../../../../package.json";
-
-import { IRouter, multisite, site } from "@ax/routes";
+import { type RouteComponentProps, withRouter } from "react-router-dom";
 
-import { ILanguage, IRootState, ISite, IStructuredData } from "@ax/types";
-import { IGlobalSettings } from "@ax/containers/App/reducer";
-import { appActions } from "@ax/containers/App";
 import { Icon, Tag } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import type { IGlobalSettings } from "@ax/containers/App/reducer";
 import { Restricted } from "@ax/guards";
+import { type IRouter, multisite, site } from "@ax/routes";
+import type { ILanguage, IRootState, ISite, IStructuredData, IUser } from "@ax/types";
 
-import NavItem from "./NavItem";
+import { version } from "./../../../../../package.json";
 import { NavProvider } from "./context";
+import NavItem from "./NavItem";
 
 import * as S from "./style";
 
@@ -20,13 +19,14 @@ const NavMenu = (props: IProps) => {
 	const {
 		location,
 		setHistoryPush,
-		logout,
+		logoutAndNavigate,
 		currentSiteInfo,
 		siteLanguages,
 		lang,
 		categories,
 		globalSettings,
 		structuredData,
+		currentUser,
 	} = props;
 
 	const { useForms } = globalSettings;
@@ -48,9 +48,8 @@ const NavMenu = (props: IProps) => {
 		setIsOpened(!isOpened);
 	};
 
-	const siteLogo = currentSiteInfo && currentSiteInfo.bigAvatar ? currentSiteInfo.bigAvatar : logoPlaceholder;
-	const siteLogoMini =
-		currentSiteInfo && currentSiteInfo.smallAvatar ? currentSiteInfo.smallAvatar : logoMiniPlaceholder;
+	const siteLogo = currentSiteInfo?.bigAvatar ? currentSiteInfo.bigAvatar : logoPlaceholder;
+	const siteLogoMini = currentSiteInfo?.smallAvatar ? currentSiteInfo.smallAvatar : logoMiniPlaceholder;
 
 	const sitesPath = "/sites/";
 	const isSite =
@@ -59,7 +58,7 @@ const NavMenu = (props: IProps) => {
 
 	const goToPublishedSite = () => {
 		const language = siteLanguages.find((l) => l.id === lang.id);
-		if (language && language.home) {
+		if (language?.home) {
 			const urlHome = `${language.home}${language.home.endsWith("/") ? "" : "/"}`;
 			window.open(urlHome, "_blank");
 		}
@@ -74,10 +73,10 @@ const NavMenu = (props: IProps) => {
 		setHistoryPush(profileRoute);
 	};
 
-	const filteredSiteRoutes = site.filter((route: IRouter) => useForms || (!useForms && !route.path.includes("/forms")));
-	const filteredMultisiteRoutes = multisite.filter(
-		(route: IRouter) => useForms || (!useForms && !route.path.includes("/forms")),
-	);
+	const filterRoutes = (routes: IRouter[]) => routes.filter((route) => useForms || !route.path.includes("/forms"));
+
+	const filteredSiteRoutes = filterRoutes(site);
+	const filteredMultisiteRoutes = filterRoutes(multisite);
 
 	const config: IConfig = isSite
 		? {
@@ -114,7 +113,7 @@ const NavMenu = (props: IProps) => {
 		name: "Logout",
 		icon: "Power",
 		path: "",
-		onClick: logout,
+		onClick: logoutAndNavigate,
 	};
 
 	const profileRoute = {
@@ -123,6 +122,7 @@ const NavMenu = (props: IProps) => {
 		icon: "User",
 		path: isSite ? "/site/profile" : "/profile",
 		onClick: goToProfile,
+		avatar: currentUser ? { image: currentUser.image?.url, name: currentUser.name } : undefined,
 	};
 
 	const toggleIcon = isOpened ? "Collapsed" : "Extend";
@@ -140,15 +140,21 @@ const NavMenu = (props: IProps) => {
 
 	if (isSite) {
 		const isSiteCategoriesAvailable = !!categories.site.length;
-		const siteCategoriesRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/sites/categories");
-		config.routes[siteCategoriesRouteIdx].showInNav = isSiteCategoriesAvailable;
+		config.routes = config.routes.map((route) =>
+			route.path === "/sites/categories" ? { ...route, showInNav: isSiteCategoriesAvailable } : route,
+		);
 	} else {
 		const isGlobalCategoriesAvailable = !!categories.global.length;
 		const isGlobalDataAvailable = !!structuredData.global.length;
-		const globalCategoriesRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/categories");
-		const globalDataRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/data");
-		config.routes[globalCategoriesRouteIdx].showInNav = isGlobalCategoriesAvailable;
-		config.routes[globalDataRouteIdx].showInNav = isGlobalDataAvailable;
+		config.routes = config.routes.map((route) => {
+			if (route.path === "/categories") {
+				return { ...route, showInNav: isGlobalCategoriesAvailable };
+			}
+			if (route.path === "/data") {
+				return { ...route, showInNav: isGlobalDataAvailable };
+			}
+			return route;
+		});
 	}
 
 	return (
@@ -165,37 +171,34 @@ const NavMenu = (props: IProps) => {
 				</S.Home>
 				<S.Lists>
 					<S.List>
-						{config.routes &&
-							config.routes
-								.filter((route: IRouter) => route.showInNav)
-								.map((route: IRouter): JSX.Element => {
-									const navItem = (
-										<NavItem
-											setHistoryPush={setHistoryPush}
-											key={route.name}
-											route={route}
-											location={location}
-											type={config.type}
-											isOpened={isOpened}
-										/>
-									);
-
-									return route.permission ? (
-										<Restricted key={route.name} to={route.permission}>
-											{navItem}
-										</Restricted>
-									) : (
-										navItem
-									);
-								})}
+						{config.routes
+							?.filter((route: IRouter) => route.showInNav)
+							.map((route: IRouter): JSX.Element => {
+								const navItem = (
+									<NavItem
+										setHistoryPush={setHistoryPush}
+										key={route.name}
+										route={route}
+										location={location}
+										type={config.type}
+										isOpened={isOpened}
+									/>
+								);
+
+								return route.permission ? (
+									<Restricted key={route.name} to={route.permission}>
+										{navItem}
+									</Restricted>
+								) : (
+									navItem
+								);
+							})}
 					</S.List>
 					<S.List>
 						{isSitePublished && (
-							<>
-								<NavItem setHistoryPush={setHistoryPush} route={siteRoute} type={config.type} isOpened={isOpened} />
-								<S.Separator />
-							</>
+							<NavItem setHistoryPush={setHistoryPush} route={siteRoute} type={config.type} isOpened={isOpened} />
 						)}
+						<S.Separator />
 						<NavItem
 							setHistoryPush={setHistoryPush}
 							route={profileRoute}
@@ -214,7 +217,7 @@ const NavMenu = (props: IProps) => {
 };
 
 interface IDispatchProps {
-	logout(): void;
+	logoutAndNavigate(): void;
 	setHistoryPush(path: string): void;
 }
 
@@ -237,6 +240,7 @@ interface INavMenuProps {
 	siteLanguages: ILanguage[];
 	lang: { locale: string; id: number };
 	globalSettings: IGlobalSettings;
+	currentUser: IUser | null;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -246,12 +250,13 @@ const mapStateToProps = (state: IRootState) => ({
 	siteLanguages: state.sites.currentSiteLanguages,
 	lang: state.app.lang,
 	globalSettings: state.app.globalSettings,
+	currentUser: state.users.currentUser,
 });
 
 type IProps = INavMenuProps & IDispatchProps & RouteComponentProps;
 
 const mapDispatchToProps = {
-	logout: appActions.logout,
+	logoutAndNavigate: appActions.logoutAndNavigate,
 	setHistoryPush: appActions.setHistoryPush,
 };