@griddo/ax 11.10.23 → 11.10.24

package/src/components/ConfigPanel/GlobalPageForm/index.tsx

@@ -1,16 +1,11 @@
-import React from "react";
-import { config } from "components";
-
 import { Icon, NoteField, Tabs } from "@ax/components";
-import { INotification, ISchema } from "@ax/types";
-import { useGlobalPermission } from "@ax/hooks";
+import { useGlobalPermission, useThemes } from "@ax/hooks";
+import type { INotification, ISchema } from "@ax/types";
 
 import ConnectedField from "../Form/ConnectedField";
 
 import * as S from "./style";
 
-const themes = config.schemas.config.themes;
-
 const noteText = "This is Global content and you cannot edit it here. To do so, you must go to the Global page";
 const noteTitle = "Global content";
 const errorText = "You don't have the permissions to edit the original content.";
@@ -19,6 +14,7 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
 	const { selectedTab, setSelectedTab, schema, pageTitle, setHistoryPush, actions, header, footer } = props;
 	const tabs = ["content", "config"];
 
+	const { themes } = useThemes();
 	const isAllowedToEditGlobalData = useGlobalPermission("global.globalData.editAllGlobalData");
 
 	const handleGetGlobalPage = async () => {
@@ -30,7 +26,7 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
 		if (isAllowedToEditGlobalData) {
 			await handleGetGlobalPage();
 			const path = "/data/pages/editor";
-			setHistoryPush && setHistoryPush(path, true);
+			setHistoryPush?.(path, true);
 		} else {
 			actions.setNotificationAction({
 				type: "error",
@@ -47,6 +43,8 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
 		options: { excludeDetailPages: true },
 	};
 
+	const themeOptions = themes ?? [];
+
 	const themeField = {
 		title: "Page Options",
 		type: "FieldGroup",
@@ -57,7 +55,7 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
 				title: "Theme",
 				type: "Select",
 				key: "theme",
-				options: themes,
+				options: themeOptions,
 				helptext: "It affects the whole page: Header, Content, and footer.",
 			},
 			{
@@ -83,14 +81,14 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
 						title: "Header Theme",
 						type: "Select",
 						key: "headerTheme",
-						options: themes,
+						options: themeOptions,
 						condition: true,
 					},
 					{
 						title: "Footer Theme",
 						type: "Select",
 						key: "footerTheme",
-						options: themes,
+						options: themeOptions,
 						condition: true,
 					},
 				],
@@ -98,12 +96,8 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
 		],
 	};
 
-	const handleRestoreHeader = () =>
-		actions.restorePageNavigationAction && actions.restorePageNavigationAction("header");
-
-	const handleRestoreFooter = () =>
-		actions.restorePageNavigationAction && actions.restorePageNavigationAction("footer");
-
+	const handleRestoreHeader = () => actions.restorePageNavigationAction?.("header");
+	const handleRestoreFooter = () => actions.restorePageNavigationAction?.("footer");
 	return (
 		<section data-testid="global-page-section">
 			<Tabs tabs={tabs} active={selectedTab} setSelectedTab={setSelectedTab} />

package/src/components/Fields/Wysiwyg/helpers.tsx

@@ -1,14 +1,24 @@
 /** biome-ignore-all lint/a11y/useValidAnchor: TODO: fix this */
-import React from "react";
+
+import { schemasService } from "@ax/services";
+
 import { renderToString } from "react-dom/server";
-import { config } from "components";
 
+/**
+ * NOTA DE MIGRACIÓN: Antes, la configuración de rich text (`richTextConfig`)
+ * venía de un archivo estático (import de "components").  Ahora, se obtiene de
+ * forma centralizada usando el singleton `schemasService`.
+ */
 const getRichTextConfig = (): IRichTextConfig | null => {
-	return config.schemas.config.richTextConfig || null;
+	if (!schemasService.isLoaded()) {
+		return null;
+	}
+	return (schemasService.getSchemas().config.richTextConfig as IRichTextConfig) || null;
 };
 
 const parseClassNames = (styles: { label: string; className: string }[]) =>
 	styles.reduce(
+		// biome-ignore lint/performance/noAccumulatingSpread: TODO: fix this
 		(acc, current: { label: string; className: string }) => ({ ...acc, [current.className]: current.label }),
 		{},
 	);
@@ -85,4 +95,4 @@ const getLanguageMenuHtml = (languages: { name: string; iso: string; featured?:
 	);
 };
 
-export { getRichTextConfig, parseClassNames, getLanguageMenuHtml };
+export { getRichTextConfig, parseClassNames, getLanguageMenuHtml, type IRichTextConfig };

package/src/components/Loader/components/Dots.js

@@ -1,15 +1,14 @@
-import * as React from "react";
-
+/** biome-ignore-all lint/a11y/noSvgWithoutTitle: not necessary */
 function SvgDots(props) {
 	return (
 		<svg data-testid="dots-svg" viewBox="0 0 100 100" {...props}>
-			<circle fill="#5057FF" cx={6} cy={50} r={6}>
+			<circle fill="#5057FF" cx={30} cy={50} r={6}>
 				<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin={0.1} />
 			</circle>
-			<circle fill="#5057FF" cx={26} cy={50} r={6}>
+			<circle fill="#5057FF" cx={50} cy={50} r={6}>
 				<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin={0.2} />
 			</circle>
-			<circle fill="#5057FF" cx={46} cy={50} r={6}>
+			<circle fill="#5057FF" cx={70} cy={50} r={6}>
 				<animate attributeName="opacity" dur="1s" values="0;1;0" repeatCount="indefinite" begin={0.3} />
 			</circle>
 		</svg>

package/src/components/PageFinder/index.tsx

@@ -1,10 +1,12 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { IContentType, IGetSitePagesParams, IGlobalLanguage, IPage, IRootState, ISite } from "@ax/types";
-import { getStructuredDataTitle, isReqOk } from "@ax/helpers";
 import { sites, structuredData } from "@ax/api";
-import { Loader, Pagination, Select, Button, AsyncSelect, SearchField } from "@ax/components";
+import { AsyncSelect, Button, Loader, Pagination, SearchField, Select } from "@ax/components";
+import { getStructuredDataTitle, isReqOk } from "@ax/helpers";
+import { LOCALE } from "@ax/locales";
+import type { IContentType, IGetSitePagesParams, IGlobalLanguage, IPage, IRootState, ISite } from "@ax/types";
+
 import SelectionListItem from "./SelectionListItem";
 
 import * as S from "./style";
@@ -150,7 +152,12 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 		const { value, isChecked } = item;
 
 		let newSelection: IPage[] = [...selectedPages];
-		isChecked ? newSelection.push(value) : (newSelection = newSelection.filter((page: IPage) => page.id !== value.id));
+		if (isChecked) {
+			newSelection.push(value);
+		} else {
+			newSelection = newSelection.filter((page: IPage) => page.id !== value.id);
+		}
+
 		const newSelectionIDs = newSelection.map((page: IPage) => page.id);
 
 		setSelectedPages(newSelection);
@@ -171,8 +178,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 	};
 
 	const getPageList = (items: IPage[]) =>
-		items &&
-		items.map((page: IPage) => (
+		items?.map((page: IPage) => (
 			<SelectionListItem
 				option={page}
 				key={page.id}
@@ -221,7 +227,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 				)}
 			</S.LanguageSiteFilters>
 			<S.ContentTypeFilter>
-				<S.Text>Content type</S.Text>
+				<S.Text>{LOCALE.common.filterByPageType}</S.Text>
 				<Select
 					name="select"
 					options={contentTypeOptions}
@@ -293,7 +299,7 @@ interface IPageFinderProps {
 }
 
 const mapStateToProps = (state: IRootState) => ({
-	currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+	currentSiteID: state.sites.currentSiteInfo?.id || null,
 	allSites: state.sites.sites,
 	lang: state.app.lang,
 	globalLangs: state.app.globalLangs,

package/src/components/ResizePanel/index.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+
 import ResizeHandle from "./ResizeHandle";
 
 import * as S from "./style";
@@ -11,6 +12,11 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 	const [rwidth, setRwidth] = useState(MIN_WIDTH);
 	const rightPanelRef = useRef<HTMLDivElement>(null);
 
+	const calculateFixedPanelMinWidth = (currentWidth: number) => {
+		const minWidth = 1280 - currentWidth - 32;
+		return minWidth < 500 ? "500px" : `${minWidth}px`;
+	};
+
 	useEffect(() => {
 		requestAnimationFrame(() => {
 			if (rightPanelRef.current) {
@@ -27,7 +33,11 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 		<>
 			<S.LeftPanel data-testid="left-panel">
 				{fixed ? (
-					<S.FixedPanel width={rwidth} full={full} data-testid="fixed-panel">
+					<S.FixedPanel
+						full={full}
+						data-testid="fixed-panel"
+						style={{ minWidth: rwidth ? calculateFixedPanelMinWidth(rwidth) : "auto" }}
+					>
 						{leftPanel}
 					</S.FixedPanel>
 				) : (
@@ -35,7 +45,7 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 				)}
 			</S.LeftPanel>
 			<ResizeHandle onMouseMove={resize} />
-			<S.RightPanel width={rwidth} ref={rightPanelRef} data-testid="right-panel">
+			<S.RightPanel ref={rightPanelRef} data-testid="right-panel" style={{ width: rwidth ? `${rwidth}px` : "auto" }}>
 				{rightPanel}
 			</S.RightPanel>
 		</>

package/src/components/ResizePanel/style.tsx

@@ -1,35 +1,28 @@
 import styled from "styled-components";
 
-const getWidth = (width: number, space: string) => {
-	const minWidth = 1280 - width - parseInt(space) * 2;
-	return minWidth < 500 ? `500px` : `${minWidth}px`;
-};
-
 const LeftPanel = styled.section`
   position: relative;
   flex-grow: 1;
   min-width: 500px;
 `;
 
-const RightPanel = styled.section<{ width: number }>`
+const RightPanel = styled.section`
   display: flex;
   position: relative;
   padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
   flex-shrink: 0;
-  width: ${(p) => p.width}px;
   min-width: 344px;
   max-width: ${(p) => `calc(100% - 500px - ${p.theme.spacing.m})`};
   flex-direction: column;
 `;
 
-const FixedPanel = styled.div<{ width: number; full: boolean }>`
+const FixedPanel = styled.div<{ full: boolean }>`
   position: sticky;
   top: ${(p) => (p.full ? p.theme.spacing.xl : `calc(${p.theme.spacing.xl} + ${p.theme.spacing.m})`)};
   height: ${(p) =>
 		p.full
 			? `calc(100vh - ${p.theme.spacing.xl})`
 			: `calc(100vh - (${p.theme.spacing.xl} + (${p.theme.spacing.m} * 2)) - (${p.theme.spacing.m} + (${p.theme.spacing.xs} * 2)))`};
-  min-width: ${(p) => getWidth(p.width, p.theme.spacing.m)};
   margin-left: ${(p) => (p.full ? "0" : p.theme.spacing.m)};
 `;
 

package/src/containers/App/actions.tsx

@@ -1,42 +1,47 @@
-import { Dispatch } from "redux";
-import differenceInSeconds from "date-fns/differenceInSeconds";
-
+import { global, languages, schemas as schemasApi } from "@ax/api";
 import { isReqOk } from "@ax/helpers";
-import { languages, global } from "@ax/api";
-import { IRootState } from "@ax/types";
+import { schemasService } from "@ax/services";
+import type { IRootState } from "@ax/types";
 
-import history from "../../routes/history";
+import differenceInSeconds from "date-fns/differenceInSeconds";
+import type { Dispatch } from "redux";
 
+import history from "../../routes/history";
 import {
-	SET_ERROR,
-	SET_IS_LOADING,
-	SET_IS_SAVING,
 	IS_LOGGING_IN,
-	SET_TOKEN,
+	LOAD_SCHEMAS_ERROR,
+	LOAD_SCHEMAS_START,
+	LOAD_SCHEMAS_SUCCESS,
 	LOGOUT,
-	SET_LANGUAGE,
+	SET_ERROR,
 	SET_GLOBAL_LANGUAGES,
 	SET_GLOBAL_SETTINGS,
-	SET_USER,
-	SET_SESSION_STARTED_AT,
 	SET_HAS_ANIMATION,
+	SET_IS_LOADING,
+	SET_IS_SAVING,
+	SET_LANGUAGE,
+	SET_SESSION_STARTED_AT,
+	SET_TOKEN,
+	SET_USER,
 } from "./constants";
-
-import {
-	ISetIsLoading,
-	ISetIsSaving,
-	ISetErrorAction,
+import type {
 	IIsLoggingInAction,
-	ISetTokenAction,
+	ILoadSchemasErrorAction,
+	ILoadSchemasStartAction,
+	ILoadSchemasSuccessAction,
 	ILogoutAction,
-	ISetLanguageAction,
+	ISetErrorAction,
 	ISetGlobalLanguages,
 	ISetGlobalSettings,
-	ISetUserAction,
-	ISetSessionStartedAtAction,
 	ISetHasAnimation,
+	ISetIsLoading,
+	ISetIsSaving,
+	ISetLanguageAction,
+	ISetSessionStartedAtAction,
+	ISetTokenAction,
+	ISetUserAction,
 } from "./interfaces";
-import { IError, IUser } from "./reducer";
+import type { IError, IUser } from "./reducer";
 
 function setIsLoading(isLoading: boolean): ISetIsLoading {
 	return { type: SET_IS_LOADING, payload: { isLoading } };
@@ -210,7 +215,7 @@ function loginSSO(): (dispatch: Dispatch) => Promise<string | null> {
 			} else {
 				return null;
 			}
-		} catch (e) {
+		} catch (_error) {
 			return null;
 		}
 	};
@@ -248,6 +253,72 @@ function checkUserSession(): (dispatch: Dispatch, getState: () => IRootState) =>
 	};
 }
 
+function loadSchemasStart(): ILoadSchemasStartAction {
+	return { type: LOAD_SCHEMAS_START };
+}
+
+function loadSchemasSuccess(): ILoadSchemasSuccessAction {
+	return { type: LOAD_SCHEMAS_SUCCESS };
+}
+
+function loadSchemasError(schemasError: string): ILoadSchemasErrorAction {
+	return { type: LOAD_SCHEMAS_ERROR, payload: { schemasError } };
+}
+
+/**
+ * Carga los schemas de la instancia desde la API.
+ *
+ * Esta función thunk comprueba primero si ya se está realizando una carga (`schemasLoading`)
+ * o si el servicio Singleton `schemasService` ya tiene schemas cargados para evitar peticiones duplicadas.
+ *
+ * - Si ya está cargando (loading), retorna `false`.
+ * - Si ya están cargados (loaded), retorna `true`.
+ * - Si no, realiza la petición al API y almacena los schemas globales en el servicio (singleton) SchemasService.
+ * - En caso de error, despacha la acción de error correspondiente y retorna `false`.
+ *
+ * @function
+ * @returns {Function} Thunk Redux que recibe `dispatch` y `getState` y retorna una Promesa<boolean>:
+ *  - `true` si los schemas ya estaban cargados o se han cargado exitosamente.
+ *  - `false` si la carga está en curso o ha fallado.
+ */
+function loadSchemas(): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
+	return async (dispatch, getState) => {
+		const {
+			app: { schemasLoading },
+		} = getState();
+
+		// Avoid duplicate requests
+		if (schemasLoading) {
+			return false;
+		}
+
+		// Skip if already loaded
+		if (schemasService.isLoaded()) {
+			return true;
+		}
+
+		dispatch(loadSchemasStart());
+
+		try {
+			const response = await schemasApi.getSchemas();
+
+			if (isReqOk(response?.status)) {
+				schemasService.setSchemas(response.data);
+				dispatch(loadSchemasSuccess());
+				return true;
+			} else {
+				const errorMsg = response?.data?.message || "Failed to load schemas";
+				dispatch(loadSchemasError(errorMsg));
+				return false;
+			}
+		} catch (error) {
+			const errorMsg = error instanceof Error ? error.message : "Failed to load schemas";
+			dispatch(loadSchemasError(errorMsg));
+			return false;
+		}
+	};
+}
+
 export {
 	setError,
 	resetError,
@@ -267,4 +338,5 @@ export {
 	checkUserSession,
 	setHasAnimation,
 	loginSSO,
+	loadSchemas,
 };

package/src/containers/App/constants.tsx

@@ -13,6 +13,10 @@ const SET_USER = `${NAME}/SET_USER`;
 const SET_SESSION_STARTED_AT = `${NAME}/SET_SESSION_STARTED_AT`;
 const SET_HAS_ANIMATION = `${NAME}/SET_HAS_ANIMATION`;
 
+const LOAD_SCHEMAS_START = `${NAME}/LOAD_SCHEMAS_START`;
+const LOAD_SCHEMAS_SUCCESS = `${NAME}/LOAD_SCHEMAS_SUCCESS`;
+const LOAD_SCHEMAS_ERROR = `${NAME}/LOAD_SCHEMAS_ERROR`;
+
 export {
 	SET_ERROR,
 	SET_IS_LOADING,
@@ -26,4 +30,7 @@ export {
 	SET_USER,
 	SET_SESSION_STARTED_AT,
 	SET_HAS_ANIMATION,
+	LOAD_SCHEMAS_START,
+	LOAD_SCHEMAS_SUCCESS,
+	LOAD_SCHEMAS_ERROR,
 };

package/src/containers/App/interfaces.tsx

@@ -1,18 +1,21 @@
-import {
-	SET_TOKEN,
+import type {
+	IS_LOGGING_IN,
+	LOAD_SCHEMAS_ERROR,
+	LOAD_SCHEMAS_START,
+	LOAD_SCHEMAS_SUCCESS,
 	LOGOUT,
 	SET_ERROR,
-	IS_LOGGING_IN,
+	SET_GLOBAL_LANGUAGES,
+	SET_GLOBAL_SETTINGS,
+	SET_HAS_ANIMATION,
 	SET_IS_LOADING,
 	SET_IS_SAVING,
 	SET_LANGUAGE,
-	SET_GLOBAL_LANGUAGES,
-	SET_GLOBAL_SETTINGS,
-	SET_USER,
 	SET_SESSION_STARTED_AT,
-	SET_HAS_ANIMATION,
+	SET_TOKEN,
+	SET_USER,
 } from "./constants";
-import { IUser } from "./reducer";
+import type { IUser } from "./reducer";
 
 export interface ISetTokenAction {
 	type: typeof SET_TOKEN;
@@ -76,6 +79,21 @@ export interface ISetHasAnimation {
 	payload: { hasAnimation: boolean };
 }
 
+export interface ILoadSchemasStartAction {
+	type: typeof LOAD_SCHEMAS_START;
+}
+
+export interface ILoadSchemasSuccessAction {
+	type: typeof LOAD_SCHEMAS_SUCCESS;
+}
+
+export interface ILoadSchemasErrorAction {
+	type: typeof LOAD_SCHEMAS_ERROR;
+	payload: { schemasError: string };
+}
+
+export type SchemasActionsCreators = ILoadSchemasStartAction | ILoadSchemasSuccessAction | ILoadSchemasErrorAction;
+
 export type AppActionsCreators = ISetIsLoading & ISetIsSaving;
 
 export type AuthActionsCreators = ISetTokenAction &

package/src/containers/App/reducer.tsx

@@ -1,19 +1,24 @@
+import type { ILanguage } from "@ax/types";
+
 import { REHYDRATE } from "redux-persist/lib/constants";
+
 import {
-	SET_ERROR,
-	SET_IS_LOADING,
-	SET_IS_SAVING,
-	SET_TOKEN,
 	IS_LOGGING_IN,
+	LOAD_SCHEMAS_ERROR,
+	LOAD_SCHEMAS_START,
+	LOAD_SCHEMAS_SUCCESS,
 	LOGOUT,
-	SET_LANGUAGE,
+	SET_ERROR,
 	SET_GLOBAL_LANGUAGES,
 	SET_GLOBAL_SETTINGS,
-	SET_USER,
-	SET_SESSION_STARTED_AT,
 	SET_HAS_ANIMATION,
+	SET_IS_LOADING,
+	SET_IS_SAVING,
+	SET_LANGUAGE,
+	SET_SESSION_STARTED_AT,
+	SET_TOKEN,
+	SET_USER,
 } from "./constants";
-import { ILanguage } from "@ax/types";
 
 export interface IAppState {
 	isRehydrated: boolean;
@@ -28,6 +33,8 @@ export interface IAppState {
 	globalSettings: IGlobalSettings;
 	sessionStartedAt: null | Date;
 	hasAnimation: boolean;
+	schemasLoading: boolean;
+	schemasError: string | null;
 }
 export interface IError {
 	code?: number;
@@ -92,12 +99,14 @@ export const initialState = {
 	},
 	sessionStartedAt: null,
 	hasAnimation: false,
+	schemasLoading: false,
+	schemasError: null,
 };
 
 export function reducer(state = initialState, action: any): IAppState {
 	switch (action.type) {
 		case REHYDRATE:
-			return { ...state, isRehydrated: true };
+			return { ...state, isRehydrated: true, schemasLoading: false, schemasError: null };
 		case SET_TOKEN:
 		case SET_IS_LOADING:
 		case SET_IS_SAVING:
@@ -112,6 +121,12 @@ export function reducer(state = initialState, action: any): IAppState {
 			return { ...state, ...action.payload };
 		case SET_ERROR:
 			return { ...state, error: { ...action.payload } };
+		case LOAD_SCHEMAS_START:
+			return { ...state, schemasLoading: true, schemasError: null };
+		case LOAD_SCHEMAS_SUCCESS:
+			return { ...state, schemasLoading: false, schemasError: null };
+		case LOAD_SCHEMAS_ERROR:
+			return { ...state, schemasLoading: false, schemasError: action.payload.schemasError };
 		default:
 			return state;
 	}