@griddo/ax 1.75.0 → 1.75.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.0",
+  "version": "1.75.2",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -229,5 +229,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "947557a00bc2e4adaf70c2a86d8803f0ba299e2f"
+  "gitHead": "f2d7e58bd884b6fb5472d1127975fd806f936e17"
 }

package/src/__tests__/components/Fields/ToggleField/ToggleField.test.tsx

@@ -23,7 +23,7 @@ describe("ToggleField component rendering", () => {
   });
 
   it("should render input as checked", () => {
-    defaultProps.checked = true;
+    defaultProps.value = true;
 
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
@@ -64,7 +64,7 @@ describe("ToggleField component rendering", () => {
 
 describe("onClick events", () => {
   it("should call onChange function with value true", () => {
-    defaultProps.checked = false;
+    defaultProps.value = false;
     defaultProps.onChange = jest.fn();
 
     render(

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

@@ -4,9 +4,11 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const NumberField = (props: INumberFieldProps): JSX.Element => {
-  const { name, value, error, onChange, onBlur, maxValue, minValue, disabled, handleValidation } = props;
+  const { name, value, error, onChange, onBlur, maxValue, minValue, disabled, handleValidation, min, max } = props;
 
   const strValue = value ? value.toString() : "0";
+  const safeMax = typeof max !== "undefined" ? max : maxValue;
+  const safeMin = typeof min !== "undefined" ? min : minValue;
 
   const [inputValue, setInputValue] = useState(strValue);
 
@@ -25,9 +27,8 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
     const currentValue = parseFloat(inputValue);
 
     let updatedValue = currentValue ? currentValue : 0;
-
-    const isMin = updatedValue === minValue;
-    const isMax = updatedValue === maxValue;
+    const isMin = updatedValue === safeMin;
+    const isMax = updatedValue === safeMax;
 
     if (pressedKey === "ArrowUp" && !isMax) {
       updatedValue++;
@@ -40,8 +41,8 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
     handleValidation && handleValidation(updatedValue.toString(), validators);
   };
 
-  let validators: Record<string, unknown> = maxValue ? { maxValue } : {};
-  validators = minValue ? { ...validators, minValue } : validators;
+  let validators: Record<string, unknown> = safeMax ? { maxValue: safeMax } : {};
+  validators = safeMin ? { ...validators, minValue: safeMin } : validators;
 
   const handleOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     setValue(e.target.value, e.type);
@@ -65,8 +66,8 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
         onChange={handleChange}
         onBlur={handleOnBlur}
         error={error}
-        min={minValue}
-        max={maxValue}
+        min={safeMin}
+        max={safeMax}
         disabled={disabled}
         data-testid="input"
       />
@@ -87,8 +88,10 @@ export interface INumberFieldProps {
   onChange: (value: number) => void;
   name?: string;
   error?: boolean;
-  minValue?: number;
-  maxValue?: number;
+  minValue?: number; // to deprecate
+  maxValue?: number; // to deprecate
+  min?: number;
+  max?: number;
   onClickIcon?: () => void;
   onBlur?: (value: number) => void;
   disabled?: boolean;

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

@@ -6,7 +6,7 @@ const SliderField = (props: ITextFieldProps): JSX.Element => {
   const { value, min = 0, max = 100, defaultValue = min, step, prefix, suffix, onChange } = props;
   const bubbleRef = useRef<HTMLOutputElement>(null);
 
-  const val = typeof value === "undefined" ? defaultValue : value;
+  const val = typeof value === "undefined" || value === null ? defaultValue : value;
 
   useEffect(() => {
     onChange(Number(val));
@@ -37,14 +37,14 @@ const SliderField = (props: ITextFieldProps): JSX.Element => {
         {val}
         {suffix && ` ${suffix}`}
       </S.Bubble>
-      <S.Input data-testid="inputComponent" value={value} min={min} max={max} step={step} onChange={handleChange} />
+      <S.Input data-testid="inputComponent" value={val} min={min} max={max} step={step} onChange={handleChange} />
     </S.Slider>
   );
 };
 
 export interface ITextFieldProps {
   title: string;
-  value: number;
+  value: number | undefined | null;
   defaultValue?: number;
   min: number;
   max: number;

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

@@ -3,7 +3,7 @@ import React from "react";
 import * as S from "./style";
 
 const ToggleField = (props: IToggleFieldProps): JSX.Element => {
-  const { name, value, disabled, checked, onChange } = props;
+  const { name, value, disabled, onChange } = props;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const isChecked = e.target.checked;
@@ -15,16 +15,16 @@ const ToggleField = (props: IToggleFieldProps): JSX.Element => {
   return (
     <S.Wrapper data-testid="toggle-field-wrapper">
       <S.Input
-        id="toggle"
+        id={`toggle-${name}`}
         type="checkbox"
         name={name}
         value={value || false}
-        checked={checked}
+        checked={value || false}
         disabled={disabled}
         onChange={handleChange}
         data-testid="toggle-field-input"
       />
-      <S.Label htmlFor="toggle" />
+      <S.Label htmlFor={`toggle-${name}`} />
     </S.Wrapper>
   );
 };
@@ -32,7 +32,6 @@ const ToggleField = (props: IToggleFieldProps): JSX.Element => {
 export interface IToggleFieldProps {
   name: string;
   value: any;
-  checked?: boolean;
   disabled?: boolean;
   onChange?: (value: boolean) => void;
 }

package/src/containers/App/actions.tsx

@@ -1,4 +1,11 @@
 import { Dispatch } from "redux";
+import differenceInSeconds from "date-fns/differenceInSeconds";
+
+import { isReqOk } from "@ax/helpers";
+import { languages, global } from "@ax/api";
+import { IRootState } from "@ax/types";
+
+import history from "../../routes/history";
 
 import {
   SET_ERROR,
@@ -12,12 +19,9 @@ import {
   SET_GLOBAL_LANGUAGES,
   SET_GLOBAL_SETTINGS,
   SET_USER,
+  SET_SESSION_STARTED_AT,
 } from "./constants";
 
-import { isReqOk } from "@ax/helpers";
-import { languages, global } from "@ax/api";
-
-import history from "../../routes/history";
 import {
   ISetIsLoading,
   ISetIsSaving,
@@ -29,6 +33,7 @@ import {
   ISetGlobalLanguages,
   ISetGlobalSettings,
   ISetUserAction,
+  ISetSessionStartedAtAction,
 } from "./interfaces";
 import { IError, IUser } from "./reducer";
 
@@ -97,6 +102,10 @@ function resetError(): ISetErrorAction {
   return { type: RESET_ERROR, payload: { code: undefined, text: "" } };
 }
 
+function setSessionStartedAt(sessionStartedAt: Date): ISetSessionStartedAtAction {
+  return { type: SET_SESSION_STARTED_AT, payload: { sessionStartedAt } };
+}
+
 function handleError(response: any, isMultiple = false, msg?: string): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     if (typeof response === "string") {
@@ -139,6 +148,7 @@ function login(email: string, password: string, rememberMe: boolean): (dispatch:
         const langResponse: { status: number; data: any } = await languages.getLanguages(token);
         isReqOk(langResponse.status) && dispatch(setGlobalLanguages(langResponse.data.items));
         dispatch(setToken(loginResponse.data.token));
+        dispatch(setSessionStartedAt(new Date()));
         setHistoryPush(welcomePageURI)(dispatch);
         if (rememberMe) {
           const user: any = { token: loginResponse.data.token };
@@ -178,6 +188,22 @@ function getGlobalSettings(): (dispatch: Dispatch) => Promise<void> {
   };
 }
 
+function checkUserSession(): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
+  return async (dispatch, getState) => {
+    const {
+      app: { sessionStartedAt },
+    } = getState();
+
+    const timeSinceSessionStart = !!sessionStartedAt && differenceInSeconds(new Date(), new Date(sessionStartedAt));
+    const eightHoursInSeconds = 8 * 60 * 60;
+    const isSessionFinished = !!timeSinceSessionStart && timeSinceSessionStart > eightHoursInSeconds;
+    if (!timeSinceSessionStart || isSessionFinished) {
+      localStorage.removeItem("persist:root");
+      dispatch(setSessionStartedAt(new Date()));
+    }
+  };
+}
+
 export {
   setError,
   resetError,
@@ -194,4 +220,5 @@ export {
   login,
   getGlobalSettings,
   setUser,
+  checkUserSession,
 };

package/src/containers/App/constants.tsx

@@ -1,16 +1,17 @@
-const NAME: string = "app";
+const NAME = "app";
 
-const SET_ERROR: string = `${NAME}/SET_ERROR`;
-const RESET_ERROR: string = `${NAME}/RESET_ERROR`;
-const SET_IS_LOADING: string = `${NAME}/SET_IS_LOADING`;
-const SET_IS_SAVING: string = `${NAME}/SET_IS_SAVING`;
-const SET_TOKEN: string = `${NAME}/SET_TOKEN`;
-const LOGOUT: string = `${NAME}/LOGOUT`;
-const IS_LOGGING_IN: string = `${NAME}/IS_LOGGING_IN`;
-const SET_LANGUAGE: string = `${NAME}/SET_LANGUAGE`;
-const SET_GLOBAL_LANGUAGES: string = `${NAME}/SET_GLOBAL_LANGUAGES`;
-const SET_GLOBAL_SETTINGS: string = `${NAME}/SET_GLOBAL_SETTINGS`;
-const SET_USER: string = `${NAME}/SET_USER`;
+const SET_ERROR = `${NAME}/SET_ERROR`;
+const RESET_ERROR = `${NAME}/RESET_ERROR`;
+const SET_IS_LOADING = `${NAME}/SET_IS_LOADING`;
+const SET_IS_SAVING = `${NAME}/SET_IS_SAVING`;
+const SET_TOKEN = `${NAME}/SET_TOKEN`;
+const LOGOUT = `${NAME}/LOGOUT`;
+const IS_LOGGING_IN = `${NAME}/IS_LOGGING_IN`;
+const SET_LANGUAGE = `${NAME}/SET_LANGUAGE`;
+const SET_GLOBAL_LANGUAGES = `${NAME}/SET_GLOBAL_LANGUAGES`;
+const SET_GLOBAL_SETTINGS = `${NAME}/SET_GLOBAL_SETTINGS`;
+const SET_USER = `${NAME}/SET_USER`;
+const SET_SESSION_STARTED_AT = `${NAME}/SET_SESSION_STARTED_AT`;
 
 export {
   SET_ERROR,
@@ -23,5 +24,6 @@ export {
   SET_LANGUAGE,
   SET_GLOBAL_LANGUAGES,
   SET_GLOBAL_SETTINGS,
-  SET_USER
+  SET_USER,
+  SET_SESSION_STARTED_AT,
 };

package/src/containers/App/interfaces.tsx

@@ -8,7 +8,8 @@ import {
   SET_LANGUAGE,
   SET_GLOBAL_LANGUAGES,
   SET_GLOBAL_SETTINGS,
-  SET_USER
+  SET_USER,
+  SET_SESSION_STARTED_AT,
 } from "./constants";
 import { IUser } from "./reducer";
 
@@ -64,6 +65,16 @@ export interface ISetUserAction {
   payload: { user: IUser };
 }
 
+export interface ISetSessionStartedAtAction {
+  type: typeof SET_SESSION_STARTED_AT;
+  payload: { sessionStartedAt: null | Date };
+}
+
 export type AppActionsCreators = ISetIsLoading & ISetIsSaving;
 
-export type AuthActionsCreators = ISetTokenAction & ILogoutAction & ISetErrorAction & IIsLoggingInAction & ISetUserAction;
+export type AuthActionsCreators = ISetTokenAction &
+  ILogoutAction &
+  ISetErrorAction &
+  IIsLoggingInAction &
+  ISetUserAction &
+  ISetSessionStartedAtAction;

package/src/containers/App/reducer.tsx

@@ -11,6 +11,7 @@ import {
   SET_GLOBAL_LANGUAGES,
   SET_GLOBAL_SETTINGS,
   SET_USER,
+  SET_SESSION_STARTED_AT,
 } from "./constants";
 
 export interface IAppState {
@@ -24,6 +25,7 @@ export interface IAppState {
   lang: { locale: string; id: any };
   globalLangs: any;
   globalSettings: IGlobalSettings;
+  sessionStartedAt: null | Date;
 }
 export interface IError {
   code?: any;
@@ -75,6 +77,7 @@ export const initialState = {
     welcomeText1: "",
     welcomeText2: "",
   },
+  sessionStartedAt: null,
 };
 
 export function reducer(state = initialState, action: any): IAppState {
@@ -90,6 +93,7 @@ export function reducer(state = initialState, action: any): IAppState {
     case SET_GLOBAL_LANGUAGES:
     case SET_GLOBAL_SETTINGS:
     case SET_USER:
+    case SET_SESSION_STARTED_AT:
       return { ...state, ...action.payload };
     case SET_ERROR:
     case RESET_ERROR:

package/src/modules/Content/index.tsx

@@ -101,6 +101,7 @@ const Content = (props: IProps): JSX.Element => {
     setContentFilters,
     contentFilters,
     deleteAndRemoveFromSiteBulk,
+    checkUserSession,
   } = props;
 
   const itemsPerPage = 50;
@@ -260,6 +261,7 @@ const Content = (props: IProps): JSX.Element => {
   const fetchSitesByLang = async () => await getSitesByLang(params);
 
   useEffect(() => {
+    checkUserSession();
     if (!locationState || locationState.isFromEditor !== true) {
       setFilter("unique-pages");
     }
@@ -823,6 +825,7 @@ interface IDispatchProps {
   getSitesByLang(params: IGetSitesParams): Promise<void>;
   setContentFilters(contentFilters: Record<string, string> | null): void;
   deleteAndRemoveFromSiteBulk(pageIds: number[], globalPageIds: number[]): Promise<boolean>;
+  checkUserSession(): Promise<void>;
 }
 
 const mapDispatchToProps = {
@@ -857,6 +860,7 @@ const mapDispatchToProps = {
   getSitesByLang: sitesActions.getSitesByLang,
   setContentFilters: sitesActions.setContentFilters,
   deleteAndRemoveFromSiteBulk: sitesActions.deleteAndRemoveFromSiteBulk,
+  checkUserSession: appActions.checkUserSession,
 };
 
 interface IPagesProps {

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/index.tsx

@@ -167,7 +167,6 @@ const Form = (props: IProps): JSX.Element => {
             name="defaultParent"
             fieldType="ToggleField"
             value={(configFormData && configFormData.modifiableOnPage) || false}
-            checked={(configFormData && configFormData.modifiableOnPage) || false}
             onChange={setModifiableOnPage}
           />
           <FieldsBehavior

package/src/modules/StructuredData/StructuredDataList/index.tsx

@@ -89,6 +89,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     skipReviewOnPublish,
     setContentFilters,
     contentFilters,
+    checkUserSession,
   } = props;
 
   const itemsPerPage = 50;
@@ -297,6 +298,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   }, [isLoading, currentSitePages, currentDataContent]);
 
   useEffect(() => {
+    checkUserSession();
     getAnalytics();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -669,6 +671,7 @@ const mapDispatchToProps = {
   setCurrentDataID: structuredDataActions.setCurrentDataID,
   resetCurrentSiteErrorPages: sitesActions.resetCurrentSiteErrorPages,
   setContentFilters: structuredDataActions.setContentFilters,
+  checkUserSession: appActions.checkUserSession,
 };
 
 interface IDispatchProps {
@@ -694,6 +697,7 @@ interface IDispatchProps {
   setCurrentDataID(id: number | null): void;
   resetCurrentSiteErrorPages: () => Promise<void>;
   setContentFilters(contentFilters: Record<string, IStructuredDataQueryValues> | null): void;
+  checkUserSession(): Promise<void>;
 }
 
 interface ICategoriesProps {