@griddo/ax 1.66.1 → 1.66.4

package/src/containers/Sites/actions.tsx

@@ -1,6 +1,7 @@
 import { Dispatch } from "redux";
 import {
   SET_SITES,
+  SET_SITES_BY_LANG,
   SET_CURRENT_SITE_INFO,
   SET_CURRENT_SITE_PAGES,
   SET_FILTER,
@@ -11,6 +12,7 @@ import {
 } from "./constants";
 import {
   ISetSitesAction,
+  ISetSitesByLangAction,
   ISetCurrentSiteInfoAction,
   ISetCurrentSitePagesAction,
   ISetFilter,
@@ -42,6 +44,10 @@ function setSites(sitesList: ISite[]): ISetSitesAction {
   return { type: SET_SITES, payload: { sites: sitesList } };
 }
 
+function setSitesByLang(sitesList: ISite[]): ISetSitesByLangAction {
+  return { type: SET_SITES_BY_LANG, payload: { sitesByLang: sitesList } };
+}
+
 function setCurrentSiteInfo(currentSiteInfo: ISite): ISetCurrentSiteInfoAction {
   return { type: SET_CURRENT_SITE_INFO, payload: { currentSiteInfo } };
 }
@@ -67,20 +73,34 @@ function setSavedSiteInfo(savedSiteInfo: ISite): ISetSavedSiteInfoAction {
 }
 
 // TODO: hay que controlar que cuando da error la API borrar los sites ya guardados y sacar el error (ver los siguientes FIXME)
-function getSites(token: string): (dispatch: Dispatch) => Promise<void> {
+function getSites(): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
-      dispatch(setIsLoading(true));
-      const sitesResponse: { status: number; data: ISite[] } = await sites.getAllSites(token); // FIXME: establecer type
-      if (isReqOk(sitesResponse.status)) {
-        dispatch(setSites(sitesResponse.data));
-      } else {
-        console.log("Error en getSites"); // TODO: capturar errores mejor
-      }
-      dispatch(setIsLoading(false));
+      const responseActions = {
+        handleSuccess: (data: any) => dispatch(setSites(data)),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () => sites.getAllSites();
+
+      await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
-      dispatch(setIsLoading(false));
-      console.log(e); // TODO: capturar errores mejor
+      console.log(e);
+    }
+  };
+}
+
+function getSitesByLang(language: number): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: (data: any) => dispatch(setSitesByLang(data)),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      const callback = async () => sites.getAllSites(language);
+
+      await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
     }
   };
 }
@@ -306,10 +326,7 @@ function deleteSite(siteID: number): (dispatch: Dispatch, getState: any) => Prom
     try {
       const response = await sites.deleteSite(siteID);
       if (isReqOk(response.status)) {
-        const {
-          app: { token },
-        } = getState();
-        getSites(token)(dispatch);
+        getSites()(dispatch);
       }
     } catch (e) {
       console.log(e); // TODO: capturar error bien
@@ -322,10 +339,7 @@ function publishSite(siteID: number): (dispatch: Dispatch, getState: any) => Pro
     try {
       const response = await sites.publishSite(siteID);
       if (isReqOk(response.status)) {
-        const {
-          app: { token },
-        } = getState();
-        getSites(token)(dispatch);
+        getSites()(dispatch);
       }
     } catch (e) {
       console.log(e); // TODO: capturar error bien
@@ -338,10 +352,7 @@ function unpublishSite(siteID: number): (dispatch: Dispatch, getState: any) => P
     try {
       const response = await sites.unpublishSite(siteID);
       if (isReqOk(response.status)) {
-        const {
-          app: { token },
-        } = getState();
-        getSites(token)(dispatch);
+        getSites()(dispatch);
       }
     } catch (e) {
       console.log(e); // TODO: capturar error bien
@@ -464,6 +475,7 @@ export {
   setTotalItems,
   setCurrentSiteLanguages,
   getSites,
+  getSitesByLang,
   setSiteInfo,
   getFilteredContent,
   getSitePages,

package/src/containers/Sites/constants.tsx

@@ -1,6 +1,7 @@
 export const NAME = "sites";
 
 export const SET_SITES = `${NAME}/SET_SITES`;
+export const SET_SITES_BY_LANG = `${NAME}/SET_SITES_BY_LANG`;
 export const SET_CURRENT_SITE_INFO = `${NAME}/SET_CURRENT_SITE_INFO`;
 export const SET_CURRENT_SITE_PAGES = `${NAME}/SET_CURRENT_SITE_PAGES`;
 export const SET_FILTER: string | null = `${NAME}/SET_FILTER`;

package/src/containers/Sites/interfaces.tsx

@@ -1,5 +1,6 @@
 import {
   SET_SITES,
+  SET_SITES_BY_LANG,
   SET_CURRENT_SITE_INFO,
   SET_CURRENT_SITE_PAGES,
   SET_FILTER,
@@ -20,6 +21,11 @@ export interface ISetSitesAction {
   payload: { sites: ISite[] };
 }
 
+export interface ISetSitesByLangAction {
+  type: typeof SET_SITES_BY_LANG;
+  payload: { sitesByLang: ISite[] };
+}
+
 export interface ISetCurrentSiteInfoAction {
   type: typeof SET_CURRENT_SITE_INFO;
   payload: { currentSiteInfo: ISite };

package/src/containers/Sites/reducer.tsx

@@ -1,5 +1,6 @@
 import {
   SET_SITES,
+  SET_SITES_BY_LANG,
   SET_CURRENT_SITE_INFO,
   SET_CURRENT_SITE_PAGES,
   SET_FILTER,
@@ -17,6 +18,7 @@ export interface ISitesState {
   currentSiteName: string | null;
   currentSitePages: IPage[];
   sites: ISite[];
+  sitesByLang: ISite[];
   currentSiteInfo: any;
   currentFilter: string | null;
   totalItems: number;
@@ -28,6 +30,7 @@ export const initialState = {
   currentSiteName: null,
   currentSitePages: [],
   sites: [],
+  sitesByLang: [],
   currentSiteInfo: null,
   currentFilter: "unique-pages",
   totalItems: 0,
@@ -39,6 +42,7 @@ export function reducer(state = initialState, action: SitesActionsCreators): ISi
   switch (action.type) {
     case SET_FILTER:
     case SET_SITES:
+    case SET_SITES_BY_LANG:
     case SET_CURRENT_SITE_INFO:
     case SET_CURRENT_SITE_PAGES:
     case SET_TOTAL_ITEMS:

package/src/forms/editor.tsx

@@ -1,4 +1,4 @@
-import { deepClone } from "@ax/helpers";
+import { deepClone, getSchema } from "@ax/helpers";
 import { IPage, IBreadcrumbItem } from "@ax/types";
 
 const configKeys = ["headerConfig", "footerConfig"];
@@ -164,6 +164,38 @@ const getParentKey = (parentModule: any, editorID: number) => {
   return keyFound;
 };
 
+const checkMaxModules = (content: any, type: string): { isMaxModules: boolean; errorMessage?: string } => {
+  const { maxModulesPerPage } = getSchema(type);
+  const queue: any[] = [content];
+  let counter = 0;
+
+  while (queue.length > 0 && counter < maxModulesPerPage) {
+    const obj = queue.shift();
+    const currentObj = obj;
+
+    if (currentObj.component === type) {
+      counter++;
+    }
+
+    const keys = currentObj instanceof Object ? Object.keys(currentObj) : [];
+
+    for (const key of keys) {
+      const objVal = currentObj[key];
+      if (objVal instanceof Object) {
+        queue.push(objVal);
+      }
+    }
+  }
+
+  const isMaxModules = counter >= maxModulesPerPage;
+  const errorMessage = `There can be only ${maxModulesPerPage} ${type} on page. You already have it.`;
+
+  return {
+    isMaxModules,
+    ...(isMaxModules && { errorMessage }),
+  };
+};
+
 export {
   parseData,
   cleanContent,
@@ -177,4 +209,5 @@ export {
   getLastModuleEditorID,
   getLastComponentEditorID,
   getParentKey,
+  checkMaxModules,
 };

package/src/forms/errors.tsx

@@ -40,6 +40,7 @@ const ERRORS: Record<string, string> = {
   ERR039: "Sorry, this color doesn't exist. Please add new one.",
   ERR040: "Sorry, the file is not in a valid format.",
   ERR041: "Sorry, the password doesn’t match.",
+  ERR042: "This content is part of disabled content type package. To publish it, you must first activate it."
 };
 
 export { ERRORS };

package/src/forms/index.tsx

@@ -10,6 +10,7 @@ import {
   getLastModuleEditorID,
   getLastComponentEditorID,
   getParentKey,
+  checkMaxModules,
 } from "./editor";
 import {
   getUpdatedComponents,
@@ -23,7 +24,15 @@ import {
   replaceElements,
 } from "./elements";
 import { getInnerFields, getStructuredDataInnerFields } from "./fields";
-import { getValidity, findFieldsErrors, findMandatoryStructuredDataErrors } from "./validators";
+import {
+  getValidity,
+  findPackagesActivationErrors,
+  findFieldsErrors,
+  isTemplateActivated,
+  findMandatoryStructuredDataErrors,
+  checkH1content,
+  parseValidationErrors,
+} from "./validators";
 
 export {
   parseData,
@@ -49,6 +58,11 @@ export {
   getLastComponentEditorID,
   getParentKey,
   getValidity,
+  findPackagesActivationErrors,
   findFieldsErrors,
+  isTemplateActivated,
   findMandatoryStructuredDataErrors,
+  checkMaxModules,
+  checkH1content,
+  parseValidationErrors,
 };

package/src/forms/validators.tsx

@@ -1,5 +1,15 @@
-import { dateToString, getSchema, getTemplate, isComponentEmpty, isEmptyContainer } from "@ax/helpers";
-import { IErrorItem } from "@ax/types";
+import {
+  dateToString,
+  getDeactivatedModules,
+  getDefaultSchema,
+  getSchema,
+  getTemplate,
+  isComponentEmpty,
+  isEmptyContainer,
+  isModuleDisabled,
+} from "@ax/helpers";
+import { findByEditorID } from "@ax/forms";
+import { IErrorItem, ITemplate } from "@ax/types";
 import { ERRORS } from "./errors";
 
 const VALIDATORS = {
@@ -96,6 +106,13 @@ const VALIDATORS = {
         return { isValid: true, errorCode: "" };
     }
   },
+  isMockup: (val: any, field: { type: string; defaultValue: any }): IError => {
+    const isValid = !checkMockupByType(field.type, val, field.defaultValue);
+    return { isValid, errorCode: "ERR016" };
+  },
+  apiValidator: (val: any, code: string): IError => {
+    return { isValid: false, errorCode: code };
+  },
   isSamePass: (pass1: string, pass2: string): IError => {
     const isValid = pass1 === pass2;
     return { isValid, errorCode: "ERR041" };
@@ -161,6 +178,23 @@ const isEmptyField = (value: any, fieldType: string, multiple: boolean) => {
   }
 };
 
+const checkMockupByType = (type: string, value: any, defaultValue: any) => {
+  if (!value || !defaultValue) return false;
+  switch (type) {
+    case "HeadingField":
+      return value.content && defaultValue.content && value.content.trim() === defaultValue.content.trim();
+    case "ImageField":
+      return value.publicId === defaultValue.publicId;
+    default:
+      return value.trim() === defaultValue.trim();
+  }
+};
+
+const checkMockupContent = (component: string, key: string, type: string, value: any) => {
+  const moduleDefault = getDefaultSchema(component);
+  return { isMockup: checkMockupByType(type, value, moduleDefault[key]), defaultValue: moduleDefault[key] };
+};
+
 const getValidationErrors = (
   fields: Record<string, unknown>[],
   current: any,
@@ -176,8 +210,8 @@ const getValidationErrors = (
       const isEmpty = isEmptyField(current[field.key], field.type, hasMultipleOptions);
       if (isEmpty) {
         errors.push({
-          type: "Error",
-          message: "Empty Field",
+          type: "error",
+          message: getErrorMessage("ERR015", null),
           validator: { mandatory: true },
           editorID: current.editorID ? current.editorID : null,
           component: current.component ? current.component : null,
@@ -189,14 +223,42 @@ const getValidationErrors = (
       }
     }
 
-    if (Object.prototype.hasOwnProperty.call(field, "validators")) {
-      const { isValid, errorText } = getValidity(field.validators, current[field.key]);
+    if (current.component && field.isMockup) {
+      const { isMockup, defaultValue } = checkMockupContent(
+        current.component,
+        field.key,
+        field.type,
+        current[field.key]
+      );
+
+      if (isMockup) {
+        errors.push({
+          type: "error",
+          message: getErrorMessage("ERR016", null),
+          validator: { isMockup: { type: field.type, defaultValue } },
+          editorID: current.editorID ? current.editorID : null,
+          component: current.component ? current.component : null,
+          name: name ? name : field.title,
+          key: field.key,
+          tab,
+          template,
+        });
+      }
+    }
+
+    let fieldValidators: Record<string, unknown> = field.maxValue ? { maxValue: field.maxValue } : {};
+    fieldValidators = field.minValue ? { ...fieldValidators, minValue: field.minValue } : fieldValidators;
+
+    if (Object.prototype.hasOwnProperty.call(field, "validators") || Object.keys(fieldValidators).length) {
+      const allValidators = { ...field.validators, ...fieldValidators };
+
+      const { isValid, errorText } = getValidity(allValidators, current[field.key]);
 
       if (!isValid) {
         errors.push({
-          type: "Error",
+          type: "error",
           message: errorText,
-          validator: field.validators,
+          validator: allValidators,
           editorID: current.editorID ? current.editorID : null,
           component: current.component ? current.component : null,
           name: name ? name : field.title,
@@ -221,6 +283,57 @@ const getValidationErrors = (
   return errors;
 };
 
+const isTemplateActivated = (templates: ITemplate[], currentTemplateType: string): boolean =>
+  templates.find((temp: ITemplate) => temp.id === currentTemplateType) ? true : false;
+
+const findPackagesActivationErrors = (
+  pageEditor: any,
+  modules: string[],
+  templates: ITemplate[]
+): IErrorItem | null => {
+  const {
+    schema,
+    selectedContent: { component },
+  } = pageEditor;
+
+  let deactivatedModules: string[] = [];
+  let isCurrentTemplateActivated = true;
+  let hasDeactivatedModules = false;
+
+  const {
+    editorContent: { template },
+  } = pageEditor?.editorContent;
+
+  if (template) {
+    const mainContentModules = template?.mainContent?.modules;
+
+    if (mainContentModules) {
+      deactivatedModules = getDeactivatedModules(modules, mainContentModules);
+      hasDeactivatedModules = deactivatedModules.length > 0;
+    } else {
+      hasDeactivatedModules = isModuleDisabled(component, schema.schemaType, modules);
+    }
+
+    isCurrentTemplateActivated = isTemplateActivated(templates, template.templateType);
+  }
+
+  if (!isCurrentTemplateActivated || hasDeactivatedModules) {
+    return {
+      type: "error",
+      message: getErrorMessage("ERR042", null),
+      validator: {},
+      editorID: null,
+      component: "",
+      name: "",
+      key: "",
+      tab: "",
+      template: false,
+    };
+  }
+
+  return null;
+};
+
 const findFieldsErrors = (content: any): IErrorItem[] => {
   const queue: any[] = [content];
   let errors: IErrorItem[] = [];
@@ -274,9 +387,55 @@ const findMandatoryStructuredDataErrors = (content: any, schema: any): IErrorIte
   return errors;
 };
 
+const checkH1content = (content: any): IErrorItem | null => {
+  const h1s = content.getElementsByTagName("h1");
+
+  if (!h1s.length) {
+    return {
+      type: "warning",
+      message: getErrorMessage("ERR018", null),
+      validator: {},
+      editorID: null,
+      component: null,
+      name: "",
+      key: "",
+      tab: "",
+      template: false,
+    };
+  }
+
+  return null;
+};
+
+const parseValidationErrors = (errors: any[], content: any) => {
+  return errors.map((err: any) => {
+    const { element: module } = findByEditorID(content, err.editorID);
+    const schema = getSchema(module.component);
+    return {
+      type: "error",
+      message: getErrorMessage(err.error, null),
+      validator: { apiValidator: err.error },
+      editorID: err.editorID,
+      component: module.component,
+      name: schema.displayName,
+      key: err.key,
+      tab: "content",
+      template: false,
+    };
+  });
+};
+
 interface IError {
   isValid: boolean;
   errorCode: string;
 }
 
-export { getValidity, findFieldsErrors, findMandatoryStructuredDataErrors };
+export {
+  getValidity,
+  isTemplateActivated,
+  findPackagesActivationErrors,
+  findFieldsErrors,
+  findMandatoryStructuredDataErrors,
+  checkH1content,
+  parseValidationErrors,
+};

package/src/guards/error/index.tsx

@@ -50,7 +50,7 @@ const ErrorGuard = (props: IProps) => {
     return domNode && createPortal(Notifications, domNode);
   };
 
-  return code ? isBlocking ? <ErrorView code={code} text={text} /> : createErrorNotification() : null;
+  return code || text ? isBlocking ? <ErrorView code={code} text={text} /> : createErrorNotification() : null;
 };
 
 const mapStateToProps = (state: IRootState) => {

package/src/helpers/dataPacks.tsx

@@ -8,4 +8,11 @@ const getActivatedDataPacksIds = (activatedDataPacks: any) => {
 const isModuleDisabled = (selectedComponent: string, type: string, activatedModules: string[]): boolean =>
   type === "module" && !activatedModules.includes(selectedComponent);
 
-export { getActivatedDataPacksIds, isModuleDisabled };
+const getDeactivatedModules = (modules: any, currentModules: any) => {
+  const deactivatedModules = currentModules
+    .map((module: any) => (isModuleDisabled(module.component, "module", modules) ? module.component : null))
+    .filter((module: string | null) => !!module);
+  return deactivatedModules;
+};
+
+export { getActivatedDataPacksIds, isModuleDisabled, getDeactivatedModules };

package/src/helpers/index.tsx

@@ -91,7 +91,7 @@ import { imageResizeCropAndCompress, compressImage } from "./imageResize";
 
 import { isEmptyArray, moveArrayElement } from "./arrays";
 
-import { getActivatedDataPacksIds, isModuleDisabled } from "./dataPacks";
+import { getActivatedDataPacksIds, isModuleDisabled, getDeactivatedModules } from "./dataPacks";
 
 import { isDevelopment } from "./environment";
 
@@ -153,6 +153,7 @@ export {
   handleRequest,
   getActivatedDataPacksIds,
   isModuleDisabled,
+  getDeactivatedModules,
   getInitials,
   getSchemaType,
   getModuleCategories,

package/src/modules/Content/PageItem/index.tsx

@@ -1,8 +1,9 @@
 import React, { memo, useState } from "react";
 
+import { schemas } from "components";
 import { useModal } from "@ax/hooks";
 import { getHumanLastModifiedDate, getTemplateDisplayName, slugify } from "@ax/helpers";
-import { IPage, ISite, ISavePageParams, ICheck, IColumn, IPageLanguage, IDataPack } from "@ax/types";
+import { IPage, ISite, ISavePageParams, ICheck, IColumn, IDataPack, IPageLanguage } from "@ax/types";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 
 import {
@@ -18,7 +19,7 @@ import {
   CategoryCell,
 } from "@ax/components";
 
-import { DeleteModal } from "../atoms";
+import { DeleteModal, CopyModal } from "../atoms";
 
 import * as S from "./style";
 
@@ -34,6 +35,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     categoryColors,
     addCategoryColors,
     dataPacks,
+    sites,
   } = props;
   const { isSelected, siteLanguages, page, lang, isDuplicable } = item;
   const {
@@ -47,9 +49,10 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     languageActions,
     duplicatePage,
     removePageFromSite,
-    deleteBulk,
     getDataPack,
+    deleteBulk,
     setTemplateInstanceError,
+    toggleCopiedToast,
   } = functions;
   const { locale } = lang;
   const {
@@ -62,16 +65,22 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     templateId,
     structuredDataContent,
   } = page;
+
   const displayName = getTemplateDisplayName(templateId);
 
   const initValue = { title: "", slug: "" };
+  const [site, setSite] = useState(null);
   const [modalState, setModalState] = useState(initValue);
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isRemoveOpen, toggleModal: toggleRemoveModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+  const { isOpen: isCopyOpen, toggleModal: toggleCopyModal } = useModal();
+
+  const currentTemplateDataPacks = schemas.templates[templateId].dataPacks;
 
+  const isCopyable = !currentTemplateDataPacks;
   const isGlobal = origin === "GLOBAL";
   const isTranslated = pageLanguages.length > 1;
   const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
@@ -311,6 +320,13 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     action: toggleModal,
   };
 
+  const copyOption = {
+    label: "Copy page in another site",
+    icon: "copy",
+    action: toggleCopyModal,
+  };
+
+  if (isCopyable) menuOptions.unshift(copyOption);
   if (!isGlobal) menuOptions.unshift(duplicateOption);
 
   const getPublishItem = (status: string, canBeUnpublished: boolean) => {
@@ -403,6 +419,25 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   };
 
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+  const copyToOtherSite = () => {
+    if (site) {
+      const siteID = parseInt(site);
+
+      duplicatePage(page.id, null, siteID).then((successEvent: boolean) => {
+        if (successEvent) {
+          toggleCopiedToast();
+        }
+        toggleCopyModal();
+      });
+    }
+  };
+
+  const secondaryCopyModalAction = {
+    title: "Cancel",
+    onClick: toggleCopyModal,
+  };
+
+  const mainCopyModalAction = { title: "Copy page", onClick: copyToOtherSite, disabled: !site };
 
   const CategoryColumns =
     isGlobal &&
@@ -471,6 +506,18 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
           <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Page actions" />
         </S.ActionsCell>
       </S.PageRow>
+      <CopyModal
+        isOpen={isCopyOpen}
+        toggleModal={() => {
+          setSite(null);
+          toggleCopyModal();
+        }}
+        mainModalAction={mainCopyModalAction}
+        secondaryModalAction={secondaryCopyModalAction}
+        sites={sites}
+        site={site}
+        setSite={setSite}
+      />
       <Modal
         isOpen={isOpen}
         hide={toggleModal}
@@ -534,6 +581,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
           </S.ModalContent>
         )}
       </Modal>
+
       <DeleteModal
         isOpen={isDeleteOpen}
         toggleModal={toggleDeleteModal}
@@ -576,11 +624,12 @@ interface IPageItemProps {
     setHistoryPush(path: string, isEditor: boolean): void;
     updatePageStatus(ids: number[], status: string, updatedFromList: boolean): Promise<boolean>;
     setCurrentPageID(currentPageID: number | null): ISetCurrentPageIDAction;
-    duplicatePage(pageID: number, data: any): Promise<void>;
+    duplicatePage(pageID: number, data: any, siteID?: number): Promise<boolean>;
     removePageFromSite(pageID: number): Promise<boolean>;
     deleteBulk(ids: number[]): void;
     setTemplateInstanceError(error: any): void;
     getDataPack: (id: string) => Promise<void>;
+    toggleCopiedToast(): void;
   };
   activatedTemplates: any[];
   toggleToast(): void;
@@ -590,6 +639,7 @@ interface IPageItemProps {
   categoryColors: any;
   addCategoryColors(cats: string[]): void;
   dataPacks: IDataPack[];
+  sites: ISite[];
 }
 
 export default memo(PageItem);