@griddo/ax 11.10.50 → 11.10.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.10.50",
+  "version": "11.10.51",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "436955fcbd3b425d3281aab388824c46bc41cc44"
+  "gitHead": "9d1f19c90a45a5f03e5a2aaa6af48c244cac5b8f"
 }

package/src/__tests__/modules/Settings/Social/Social.test.tsx

@@ -0,0 +1,234 @@
+import { Router } from "react-router-dom";
+
+import { parseTheme } from "@ax/helpers";
+import Social from "@ax/modules/Settings/Social";
+import history from "@ax/routes/history";
+import globalTheme from "@ax/themes/theme.json";
+
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { ThemeProvider } from "styled-components";
+
+import { act, cleanup, render, screen } from "../../../../../config/jest/test-utils";
+
+afterEach(cleanup);
+
+const mockComponent = () => null;
+
+const mockNavItems = [
+	{ title: "Social", path: "/settings/social", component: mockComponent },
+	{ title: "Other", path: "/settings/other", component: mockComponent },
+];
+
+const mockCurrentNavItem = { title: "Social", path: "/settings/social", component: mockComponent };
+
+const createMockStore = (overrides = {}) => {
+	const defaultStore = {
+		app: { isSaving: false },
+		social: {},
+		sites: { currentSiteInfo: { id: 1 } },
+		users: { currentPermissions: [] },
+		...overrides,
+	};
+	const middlewares: any = [thunk];
+	const mockStore = configureStore(middlewares);
+	return mockStore(defaultStore);
+};
+
+describe("Social Settings Component", () => {
+	it("should render the Social settings component", async () => {
+		const store = createMockStore();
+
+		await act(async () => {
+			render(
+				<Router history={history}>
+					<ThemeProvider theme={parseTheme(globalTheme)}>
+						<Social navItems={mockNavItems} currentNavItem={mockCurrentNavItem} />
+					</ThemeProvider>
+				</Router>,
+				{ store },
+			);
+		});
+
+		// Check that the title is rendered
+		expect(screen.getByRole("heading", { name: "Social" })).toBeTruthy();
+	});
+
+	it("should render social fields from state", async () => {
+		const store = createMockStore({
+			social: {
+				instagram: "https://instagram.com/user",
+				twitter: "https://twitter.com/user",
+			},
+		});
+
+		await act(async () => {
+			render(
+				<Router history={history}>
+					<ThemeProvider theme={parseTheme(globalTheme)}>
+						<Social navItems={mockNavItems} currentNavItem={mockCurrentNavItem} />
+					</ThemeProvider>
+				</Router>,
+				{ store },
+			);
+		});
+
+		expect(await screen.findByDisplayValue("https://instagram.com/user")).toBeTruthy();
+		expect(screen.getByDisplayValue("https://twitter.com/user")).toBeTruthy();
+	});
+
+	it("should render hardcoded socials when they have values", async () => {
+		const store = createMockStore({
+			social: {
+				instagram: "https://instagram.com/user",
+				facebook: "",
+			},
+		});
+
+		await act(async () => {
+			render(
+				<Router history={history}>
+					<ThemeProvider theme={parseTheme(globalTheme)}>
+						<Social navItems={mockNavItems} currentNavItem={mockCurrentNavItem} />
+					</ThemeProvider>
+				</Router>,
+				{ store },
+			);
+		});
+
+		// Check that fields with values from social state are rendered
+		expect(screen.getByDisplayValue("https://instagram.com/user")).toBeTruthy();
+	});
+
+	it("should have Instagram field visible", async () => {
+		const store = createMockStore({
+			social: {
+				instagram: "https://instagram.com/user",
+			},
+		});
+
+		await act(async () => {
+			render(
+				<Router history={history}>
+					<ThemeProvider theme={parseTheme(globalTheme)}>
+						<Social navItems={mockNavItems} currentNavItem={mockCurrentNavItem} />
+					</ThemeProvider>
+				</Router>,
+				{ store },
+			);
+		});
+
+		// Verify Instagram field is rendered with correct value
+		const instagramValue = screen.getByDisplayValue("https://instagram.com/user");
+		expect(instagramValue).toBeTruthy();
+	});
+
+	it("should show button with correct state when form is not dirty", async () => {
+		const store = createMockStore({
+			social: {
+				instagram: "https://instagram.com/user",
+			},
+		});
+
+		await act(async () => {
+			render(
+				<Router history={history}>
+					<ThemeProvider theme={parseTheme(globalTheme)}>
+						<Social navItems={mockNavItems} currentNavItem={mockCurrentNavItem} />
+					</ThemeProvider>
+				</Router>,
+				{ store },
+			);
+		});
+
+		// Should have a button (the save button) that is disabled when not dirty
+		const buttons = screen.getAllByRole("button");
+		const saveButton = buttons.find((btn) => btn.textContent?.includes("Save"));
+		expect(saveButton).toBeTruthy();
+		expect(saveButton?.hasAttribute("disabled")).toBe(true);
+	});
+
+	it("should display saving state", async () => {
+		const store = createMockStore({
+			app: { isSaving: true },
+		});
+
+		await act(async () => {
+			render(
+				<Router history={history}>
+					<ThemeProvider theme={parseTheme(globalTheme)}>
+						<Social navItems={mockNavItems} currentNavItem={mockCurrentNavItem} />
+					</ThemeProvider>
+				</Router>,
+				{ store },
+			);
+		});
+
+		const saveButton = screen.getByRole("button", { name: /saving/i });
+		expect(saveButton.textContent).toBe("Saving");
+		expect(saveButton.hasAttribute("disabled")).toBe(true);
+	});
+
+	it("should render instance socials from config", async () => {
+		const store = createMockStore({
+			social: {
+				customSocial: "https://example.com",
+			},
+		});
+
+		await act(async () => {
+			render(
+				<Router history={history}>
+					<ThemeProvider theme={parseTheme(globalTheme)}>
+						<Social navItems={mockNavItems} currentNavItem={mockCurrentNavItem} />
+					</ThemeProvider>
+				</Router>,
+				{ store },
+			);
+		});
+
+		// The component should render without errors even if config.schemas.config.socials is empty
+		expect(screen.getByRole("heading", { name: "Social" })).toBeTruthy();
+	});
+
+	it("should not duplicate socials between instance and hardcoded", async () => {
+		const store = createMockStore({
+			social: {
+				instagram: "https://instagram.com/user",
+			},
+		});
+
+		await act(async () => {
+			render(
+				<Router history={history}>
+					<ThemeProvider theme={parseTheme(globalTheme)}>
+						<Social navItems={mockNavItems} currentNavItem={mockCurrentNavItem} />
+					</ThemeProvider>
+				</Router>,
+				{ store },
+			);
+		});
+
+		// Instagram should only appear once (from instance or hardcoded, not both)
+		const instagramLabels = screen.queryAllByText(/instagram/i);
+		expect(instagramLabels.length).toBeGreaterThanOrEqual(1);
+	});
+
+	it("should handle nav menu clicks with dispatch", async () => {
+		const store = createMockStore();
+
+		await act(async () => {
+			render(
+				<Router history={history}>
+					<ThemeProvider theme={parseTheme(globalTheme)}>
+						<Social navItems={mockNavItems} currentNavItem={mockCurrentNavItem} />
+					</ThemeProvider>
+				</Router>,
+				{ store },
+			);
+		});
+
+		// Component should render the Nav component which handles menu clicks
+		expect(screen.getByRole("heading", { name: "Social" })).toBeTruthy();
+	});
+});

package/src/components/Fields/ComponentContainer/index.tsx

@@ -51,6 +51,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
 
 	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
 		id: editorID,
+		disabled: !!disabled,
 	});
 
 	const whiteListFirstItem: string | undefined = whiteList?.[0];

package/src/components/Fields/DateField/DatePickerInput/index.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useState, forwardRef } from "react";
-
-import { isValidDate, stringToDate, getStringifyDateRange, getRange, isValidDateRange } from "@ax/helpers";
+import type React from "react";
+import { forwardRef, useEffect, useState } from "react";
 
 import { Icon, IconAction } from "@ax/components";
+import { getRange, getStringifyDateRange, isValidDate, isValidDateRange, stringToDate } from "@ax/helpers";
 
 import * as S from "./style";
 
-const DatePickerInput = (props: IDatePickerProps, ref: any): JSX.Element => {
+const DatePickerInput = (props: IDatePickerProps): JSX.Element => {
 	const { dates, onClick, handleChange, isOpen, error, disabled, handleValidation, validators } = props;
 	const { start, end } = dates;
 	const placeholder = "dd/mm/yyyy";
@@ -14,7 +14,8 @@ const DatePickerInput = (props: IDatePickerProps, ref: any): JSX.Element => {
 	const currentDate = getStringifyDateRange(start, end);
 
 	const [value, setValue] = useState(currentDate);
-	useEffect(() => setValue(currentDate), [dates, currentDate]);
+
+	useEffect(() => setValue(currentDate), [currentDate]);
 
 	const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const inputValue = e.target.value;
@@ -36,10 +37,22 @@ const DatePickerInput = (props: IDatePickerProps, ref: any): JSX.Element => {
 		}
 	};
 
+	const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		const allowed = /^[0-9/\- ]$/;
+		const isControlKey = e.key.length > 1; // Backspace, Delete, ArrowLeft, Tab, etc.
+
+		// Detecta si se está usando Ctrl (Windows) o Cmd (Mac) para permitir atajos
+		const isKeyboardShortcut = e.ctrlKey || e.metaKey;
+
+		if (!isControlKey && !isKeyboardShortcut && !allowed.test(e.key)) {
+			e.preventDefault();
+		}
+	};
+
 	const handleOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
 		const inputValue = e.target.value;
 
-		handleValidation && handleValidation(inputValue, validators);
+		handleValidation?.(inputValue, validators);
 	};
 
 	const CalendarIcon = <IconAction icon="calendar" onClick={onClick} disabled={disabled} />;
@@ -55,6 +68,7 @@ const DatePickerInput = (props: IDatePickerProps, ref: any): JSX.Element => {
 				value={value || ""}
 				placeholder={placeholder}
 				onChange={handleOnChange}
+				onKeyDown={handleOnKeyDown}
 				onBlur={handleOnBlur}
 				disabled={disabled}
 			/>

package/src/hooks/forms.tsx

@@ -37,24 +37,32 @@ const useEqualStructured = (component: any) => {
 /**
  * Stores the provided value (object or string) and returns the previous value,
  * updating it only when a "saved" state is detected (either from the external state
- * manager, or explicitly via the second argument). Useful for detecting changes
- * and implementing dirty checks.
+ * manager, or explicitly via options). Useful for detecting changes and implementing dirty checks.
  *
  * @param value - The current value to track.
- * @param isSaved - Optional flag to indicate if the value has been saved/reset externally.
+ * @param options - Optional configuration object.
+ * @param options.isSaved - Flag to indicate if the value has been saved/reset externally.
+ * @param options.force - Force update of the stored value on next render.
  * @returns The previously saved value, or undefined for first render.
  */
-const usePrevious = (value: Record<string, unknown> | string, isSaved?: boolean) => {
+const usePrevious = (
+	value: Record<string, unknown> | string,
+	options?: {
+		isSaved?: boolean;
+		force?: boolean;
+	},
+) => {
+	const { isSaved, force } = options || {};
 	const valueStr = value && JSON.stringify(value);
 	const ref = useRef<Record<string, unknown> | string | undefined>(undefined);
 	const isSavedData = getIsSavedData();
 
 	useEffect(() => {
 		const currentValue = valueStr && JSON.parse(valueStr);
-		if (!ref.current || isEmptyObj(ref.current)) {
+		if (!ref.current || isEmptyObj(ref.current) || force) {
 			ref.current = currentValue;
 		}
-	}, [valueStr]);
+	}, [valueStr, force]);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO fix this
 	useEffect(() => {
@@ -73,8 +81,9 @@ const useIsDirty = (
 	const [isDirty, setIsDirty] = useState(false);
 	const [isSaved, setIsSaved] = useState(false);
 	const [isResetting, setIsResetting] = useState(false);
+	const [force, setForce] = useState(false);
 
-	const prevContent = usePrevious(updatedValues, isSaved);
+	const prevContent = usePrevious(updatedValues, { isSaved, force });
 
 	const hasChanged = (): boolean => {
 		if (prevContent && updatedValues) {
@@ -90,10 +99,11 @@ const useIsDirty = (
 		return false;
 	};
 
-	const resetDirty = (reseting = true) => {
+	const resetDirty = (reseting = true, force = false) => {
 		setIsDirty(false);
 		setIsSaved(true);
 		reseting && setIsResetting(true);
+		setForce(force);
 	};
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
@@ -156,4 +166,4 @@ const useShouldBeSaved = (form: Record<string, unknown> | IUser | FormContent) =
 	return { isDirty, setIsDirty };
 };
 
-export { useDebounce, useEqualStructured, usePrevious, useIsDirty, useShouldBeSaved };
+export { useDebounce, useEqualStructured, useIsDirty, usePrevious, useShouldBeSaved };

package/src/modules/PageEditor/index.tsx

@@ -483,7 +483,7 @@ const PageEditor = (props: IProps) => {
 
 	const toggleDraftPage = async () => {
 		const { getPage } = props;
-		resetDirty();
+		resetDirty(undefined, true);
 		const pageID = isDraft ? editorContent.draftFromPage : editorContent.haveDraftPage;
 		await getPage(pageID);
 	};

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

@@ -1,54 +1,102 @@
-import { INavItem, IRootState, ISocialState } from "@ax/types";
-import React, { useEffect, useState } from "react";
-import { connect } from "react-redux";
-
+//
+// Refactor: Migrado de connect() HOC a hooks de Redux
+//
+// ANTES: Patrón connect() HOC
+// ├─ interface IProps {
+// │  ├─ isSaving, socialInfo (state)
+// │  └─ saveSocial, getSocial, setHistoryPush (dispatch)
+// │
+// ├─ mapStateToProps: Selectores del estado
+// ├─ mapDispatchToProps: Acciones despachadas
+// └─ export default connect(mapStateToProps, mapDispatchToProps)(Social)
+//    └─ El HOC inyecta props automáticamente
+//
+// AHORA: Hooks de Redux
+// ├─ interface IProps { navItems, currentNavItem } (solo props propias)
+// ├─ useDispatch() → acceso directo al dispatch
+// ├─ useSelector() → selectores granulares dentro del componente
+// │  ├─ state.app.isSaving
+// │  └─ state.social
+// └─ export default Social (sin HOC)
+//
+// CAMBIOS ESPECÍFICOS:
+// • Removida toda la lógica de mapeo de props Redux
+// • dispatch() llamado directamente en setRoute() y handleMenuClick()
+// • Mejor legibilidad: el estado necesario está cerca de donde se usa
+// • Menor acoplamiento: el componente no depende de una estructura de props fija
+//
+
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { ErrorToast, FieldsBehavior, MainWrapper, Nav } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { socialActions } from "@ax/containers/Settings/Social";
 import { RouteLeavingGuard } from "@ax/guards";
+import { capitalize } from "@ax/helpers";
 import { useIsDirty } from "@ax/hooks";
+import type { INavItem, IRootState } from "@ax/types";
 
-import { appActions } from "@ax/containers/App";
-import { FieldsBehavior, MainWrapper, ErrorToast, Nav } from "@ax/components";
-import { socialActions } from "@ax/containers/Settings/Social";
+import { config } from "components";
+import type { AnyAction } from "redux";
+import type { ThunkDispatch } from "redux-thunk";
 
 import * as S from "./style";
 
-const Social = (props: IProps): JSX.Element => {
-	const { isSaving, navItems, currentNavItem, socialInfo, saveSocial, getSocial, setHistoryPush } = props;
-
-	const title = "Social";
-
-	const socialFields: { name: string; title: string }[] = [
-		{ name: "instagram", title: "Instagram URL" },
-		{ name: "linkedIn", title: "LinkedIn URL" },
-		{ name: "facebook", title: "Facebook URL" },
-		{ name: "twitter", title: "X/Twitter URL" },
-		{ name: "youtube", title: "YouTube URL" },
-		{ name: "flickr", title: "Flickr URL" },
-		{ name: "tiktok", title: "Tiktok URL" },
-		{ name: "snapchat", title: "Snapchat URL" },
-		{ name: "newsletter", title: "Newsletter URL" },
-		{ name: "podcast", title: "Podcast URL" },
-	];
+interface IProps {
+	navItems: INavItem[];
+	currentNavItem: INavItem;
+}
 
-	const [socialForm, setSocialForm] = useState<Record<string, string>>({});
-	const changeSocialForm = (field: string, value: string) => setSocialForm((state) => ({ ...state, [field]: value }));
+const instanceSocials: string[] = config.schemas.config.socials || [];
+const hardcodedSocials = [
+	{ name: "instagram", title: "Instagram URL" },
+	{ name: "linkedIn", title: "LinkedIn URL" },
+	{ name: "facebook", title: "Facebook URL" },
+	{ name: "twitter", title: "X/Twitter URL" },
+	{ name: "youtube", title: "YouTube URL" },
+	{ name: "flickr", title: "Flickr URL" },
+	{ name: "tiktok", title: "Tiktok URL" },
+	{ name: "snapchat", title: "Snapchat URL" },
+	{ name: "newsletter", title: "Newsletter URL" },
+	{ name: "podcast", title: "Podcast URL" },
+];
 
+const Social = (props: IProps): JSX.Element => {
+	const { navItems, currentNavItem } = props;
+	const dispatch = useDispatch<ThunkDispatch<IRootState, undefined, AnyAction>>();
+	const isSaving = useSelector((state: IRootState) => state.app.isSaving);
+	const socialInfo = useSelector((state: IRootState) => state.social);
+	const [socialForm, setSocialForm] = useState<Record<string, string>>({});
+	const [serverFields, setServerFields] = useState<Set<string>>(new Set());
 	const { isDirty, resetDirty, setIsDirty } = useIsDirty(socialForm);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
+	const socialFields = [
+		...instanceSocials.map((name) => ({ name, title: `${capitalize(name)} URL` })),
+		...hardcodedSocials.filter(
+			(s) => !instanceSocials.includes(s.name) && (serverFields.has(s.name) || !!socialForm[s.name]),
+		),
+	];
+
+	const changeSocialForm = (field: string, value: string) => {
+		setSocialForm((state) => ({ ...state, [field]: value }));
+	};
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: Can't add resetDirty to dependencies because it causes an infinite loop
 	useEffect(() => {
-		getSocial();
+		dispatch(socialActions.getSocial());
 		resetDirty();
-	}, []);
+	}, [dispatch]);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		setSocialForm({ ...socialInfo });
+		setServerFields(new Set(Object.keys(socialInfo).filter((k) => !!socialInfo[k])));
 		setIsDirty(false);
-	}, [socialInfo]);
+	}, [socialInfo, setIsDirty]);
 
 	const saveForm = async () => {
-		const isSaved = await saveSocial(socialForm);
-		if (isSaved) setIsDirty(false);
+		const isSaved = await dispatch(socialActions.saveSocial(socialForm));
+		if (isSaved) resetDirty();
 	};
 
 	const rightButtonProps = {
@@ -57,7 +105,10 @@ const Social = (props: IProps): JSX.Element => {
 		action: saveForm,
 	};
 
-	const setRoute = (path: string) => setHistoryPush(path);
+	const setRoute = (path: string) => {
+		dispatch(appActions.setHistoryPush(path));
+	};
+
 	const modalText = (
 		<>
 			Some settings <strong>are not saved</strong>.{" "}
@@ -65,13 +116,13 @@ const Social = (props: IProps): JSX.Element => {
 	);
 
 	const handleMenuClick = (path: string) => {
-		setHistoryPush(path);
+		dispatch(appActions.setHistoryPush(path));
 	};
 
 	return (
 		<>
 			<RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
-			<MainWrapper backLink={false} title={title} rightButton={rightButtonProps}>
+			<MainWrapper backLink={false} title="Social" rightButton={rightButtonProps}>
 				<S.Wrapper>
 					<Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
 					<S.ContentWrapper>
@@ -95,25 +146,4 @@ const Social = (props: IProps): JSX.Element => {
 	);
 };
 
-interface IProps {
-	isSaving: boolean;
-	socialInfo: ISocialState;
-	navItems: INavItem[];
-	currentNavItem: INavItem;
-	saveSocial: (form: Record<string, string>) => Promise<boolean>;
-	getSocial(): void;
-	setHistoryPush(path: string, isEditor?: boolean): void;
-}
-
-const mapDispatchToProps = {
-	setHistoryPush: appActions.setHistoryPush,
-	saveSocial: socialActions.saveSocial,
-	getSocial: socialActions.getSocial,
-};
-
-const mapStateToProps = (state: IRootState) => ({
-	isSaving: state.app.isSaving,
-	socialInfo: state.social,
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Social);
+export default Social;