@griddo/ax 1.69.9 → 1.72.1

package/src/modules/Content/index.tsx

@@ -97,6 +97,8 @@ const Content = (props: IProps): JSX.Element => {
     sitesByLang,
     user,
     skipReviewOnPublish,
+    setContentFilters,
+    contentFilters,
   } = props;
 
   const itemsPerPage = 50;
@@ -107,7 +109,12 @@ const Content = (props: IProps): JSX.Element => {
   const { isOpen: isImporterOpen, toggleModal: toggleImporterModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, resetFilterQuery, filterValues } = useFilterQuery();
+  const {
+    setFiltersSelection,
+    resetFilterQuery,
+    filterValues,
+    query: currentFilterQuery,
+  } = useFilterQuery(contentFilters);
   const { state: locationState } = useLocation<{ isFromEditor: boolean }>();
 
   const currentFilter = getCurrentFilter(structuredData, filter);
@@ -150,7 +157,6 @@ const Content = (props: IProps): JSX.Element => {
   const isLastItem = page === lastPage && currentSitePages.length === 1;
 
   const [isScrolling, setIsScrolling] = useState(false);
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const [deletedItem, setDeletedItem] = useState<number | number[] | null>(null);
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [pagesToImport, setPagesToImport] = useState([]);
@@ -258,6 +264,7 @@ const Content = (props: IProps): JSX.Element => {
     resetPageEditor();
     resetCurrentSiteErrorPages();
     fetchSitesByLang();
+    resetForm();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -284,6 +291,11 @@ const Content = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading, currentSitePages]);
 
+  useEffect(() => {
+    setContentFilters(filterValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterValues]);
+
   const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
 
   const handleAddToBulk = (item: ICheck) => addToBulkSelection(item, bulkFilter);
@@ -295,7 +307,7 @@ const Content = (props: IProps): JSX.Element => {
   const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
 
   const addNewData = () => {
-    resetForm();
+    resetForm(true);
     const path = `/sites/data/${currentStructuredData.id}/editor`;
     setHistoryPush(path, false);
   };
@@ -402,16 +414,12 @@ const Content = (props: IProps): JSX.Element => {
     const sortedState = getSortedListStatus(orderPointer, isAscending);
     setSortedListStatus(sortedState);
 
-    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection("order", orderPointer, isAscending);
   };
 
   const filterItems = async (filterPointer: string, filtersSelected: string) => {
     setPage(firstPage);
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection(filterPointer, filtersSelected);
   };
 
   const Header = (
@@ -651,10 +659,7 @@ const Content = (props: IProps): JSX.Element => {
     ? { onClick: handleImport, title: "NEXT" }
     : { onClick: createContent, title: "Create new" };
 
-  const resetFilter = () => {
-    resetFilterQuery();
-    setCurrentFilterQuery("");
-  };
+  const resetFilter = () => resetFilterQuery();
 
   const mainDeleteModalAction = {
     title: "Delete pages",
@@ -786,6 +791,7 @@ const mapStateToProps = (state: IRootState) => ({
   sitesByLang: state.sites.sitesByLang,
   user: state.users.currentUser,
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
+  contentFilters: state.sites.contentFilters,
 });
 
 interface IDispatchProps {
@@ -803,7 +809,7 @@ interface IDispatchProps {
   createNewTranslation(isNewTranslation: boolean): void;
   getFilteredContent(filter: string | null): void;
   getStructuredDataContents(params: any, siteID: number): Promise<void>;
-  resetForm(): void;
+  resetForm(setDefault?: boolean): void;
   deleteBulk(ids: any): Promise<boolean>;
   duplicatePage(pageID: number, data?: any, siteID?: number): Promise<boolean>;
   getPage(pageID?: number, global?: boolean): Promise<void>;
@@ -819,6 +825,7 @@ interface IDispatchProps {
   getDataPack: (id: string) => Promise<void>;
   resetCurrentSiteErrorPages: () => Promise<void>;
   getSitesByLang(language: number): Promise<void>;
+  setContentFilters(contentFilters: Record<string, string> | null): void;
 }
 
 const mapDispatchToProps = {
@@ -851,6 +858,7 @@ const mapDispatchToProps = {
   getDataPack: dataPacksActions.getSiteDataPack,
   resetCurrentSiteErrorPages: sitesActions.resetCurrentSiteErrorPages,
   getSitesByLang: sitesActions.getSitesByLang,
+  setContentFilters: sitesActions.setContentFilters,
 };
 
 interface IPagesProps {
@@ -878,6 +886,7 @@ interface IPagesProps {
   sitesByLang: ISite[];
   user: IUser;
   skipReviewOnPublish?: boolean;
+  contentFilters: Record<string, string> | null;
 }
 
 type IProps = IPagesProps & IDispatchProps;

package/src/modules/Navigation/Defaults/DefaultsEditor/Editor/DefaultsBrowser/index.tsx

@@ -13,12 +13,14 @@ const DefaultsBrowser = (props: IProps) => {
     setSelectedContent,
     currentSiteInfo: { theme, id: siteID },
     siteLangs,
+    browserRef,
   } = props;
 
   const updatedContent = { ...content };
 
   return (
     <Browser
+      browserRef={browserRef}
       isPage={false}
       socials={socials}
       content={updatedContent}
@@ -43,6 +45,7 @@ interface IEditorStateProps {
 
 interface IPageBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
+  browserRef?: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/Navigation/Defaults/DefaultsEditor/Editor/index.tsx

@@ -23,6 +23,7 @@ const Editor = (props: IProps) => {
     selectedTab,
     isLoading,
     site,
+    browserRef,
   } = props;
 
   const actions = {
@@ -36,7 +37,7 @@ const Editor = (props: IProps) => {
 
   return (
     <ResizePanel
-      leftPanel={<DefaultsBrowser />}
+      leftPanel={<DefaultsBrowser browserRef={browserRef} />}
       rightPanel={
         <ConfigPanel
           schema={schema}
@@ -77,6 +78,7 @@ interface IPageBrowserDispatchProps {
   replaceModule(module: any, parent: any, objKey: string): void;
   replaceElementsInCollection(newValue: string, reference: string): void;
   moveModule(moduleID: number, selectedContent: any, newIndex: number, key: string): void;
+  browserRef?: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/Navigation/Defaults/DefaultsEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { connect } from "react-redux";
 
 import { IRootState } from "@ax/types";
@@ -11,6 +11,7 @@ import { ErrorToast, Loading, MainWrapper, Modal } from "@ax/components";
 import Editor from "./Editor";
 
 import * as S from "./style";
+import { getImage } from "./utils";
 
 const DefaultsEditor = (props: IProps) => {
   const {
@@ -40,6 +41,7 @@ const DefaultsEditor = (props: IProps) => {
   const isNew = !editorContent?.id;
 
   const isSetAsDefault = editorContent && editorContent.setAsDefault;
+  const browserRef = useRef<any>(null);
 
   useEffect(() => {
     getValues();
@@ -64,18 +66,14 @@ const DefaultsEditor = (props: IProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentSiteInfo, editorContent?.id]);
 
-  const save = () => {
-    isNew || isNewTranslation
-      ? createNavigation().then((isSaved: boolean) => {
-          if (isSaved) {
-            resetDirty();
-          }
-        })
-      : updateNavigation(editorContent.id, editorContent, true).then((isSaved: boolean) => {
-          if (isSaved) {
-            resetDirty();
-          }
-        });
+  const save = async () => {
+    const image = await getImage(browserRef);
+
+    const isSaved =
+      isNew || isNewTranslation
+        ? await createNavigation(image)
+        : await updateNavigation(editorContent.id, editorContent, true, image);
+    if (isSaved) resetDirty();
   };
 
   const saveAsDefault = () => {
@@ -121,7 +119,7 @@ const DefaultsEditor = (props: IProps) => {
     <p>{`There is already a ${editorContent.type} defined as default. If you change it to this one, it will be shown on all the pages on this site. Are you sure your want to make this change?`}</p>
   );
 
-  const maintModalAction = { title: "Yes, set as default", onClick: saveAsDefault };
+  const mainModalAction = { title: "Yes, set as default", onClick: saveAsDefault };
   const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
   const goBack = (path: string) => setHistoryPush(path, true);
 
@@ -147,13 +145,13 @@ const DefaultsEditor = (props: IProps) => {
           hide={toggleModal}
           title={`Default ${editorContent.component}`}
           secondaryAction={secondaryModalAction}
-          mainAction={maintModalAction}
+          mainAction={mainModalAction}
           size="S"
         >
           {isOpen ? <S.ModalContent>{setDefaultModalText}</S.ModalContent> : null}
         </Modal>
         <S.Content>
-          <Editor />
+          <Editor browserRef={browserRef} />
         </S.Content>
       </MainWrapper>
     </>
@@ -206,8 +204,8 @@ interface IDispatchProps {
   setHistoryPush(path: string, isEditor?: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;
   getValues(): void;
-  createNavigation(): Promise<boolean>;
-  updateNavigation(navID: number, data: any, fromEditor?: boolean): Promise<boolean>;
+  createNavigation(image: File | null): Promise<boolean>;
+  updateNavigation(navID: number, data: any, fromEditor?: boolean, image?: File | null): Promise<boolean>;
   createTranslation(isNewTranslation: boolean): void;
   setHeader(id: number | null): void;
   setFooter(id: number | null): void;

package/src/modules/Navigation/Defaults/DefaultsEditor/utils.tsx

@@ -0,0 +1,37 @@
+import { toBlob } from "html-to-image";
+
+const getImage = async (browserRef: any): Promise<File | null> => {
+  if (browserRef?.current) {
+    const browserContent = browserRef.current.querySelector(".browser-content");
+
+    const { height, overflow } = getComputedStyle(browserContent);
+    browserContent.style.height = "auto";
+    browserContent.style.overflow = "visible";
+    const originalHeight = browserContent.clientHeight;
+
+    const elChildren = browserContent.querySelectorAll("*");
+    let maxAbsoluteElementHeight = 0;
+    [].forEach.call(elChildren, function (element: any) {
+      const isAbsolutePosition = getComputedStyle(element).position === "absolute";
+      const isMaxAbsolutePositionHeight = element.clientHeight > maxAbsoluteElementHeight;
+      if (isAbsolutePosition && isMaxAbsolutePositionHeight) {
+        maxAbsoluteElementHeight = element.clientHeight;
+      }
+    });
+    if (maxAbsoluteElementHeight) {
+      const actualHeight = originalHeight + maxAbsoluteElementHeight;
+      browserContent.style.height = `${actualHeight}px`;
+    }
+
+    const imageBlob = await toBlob(browserContent, { quality: 0.95, pixelRatio: 0.5 });
+    const imageFile = imageBlob && new File([imageBlob], "navigation-thumbnail.png", { type: "image/png" });
+
+    browserContent.style.height = height;
+    browserContent.style.overflow = overflow;
+
+    return imageFile;
+  }
+  return null;
+};
+
+export { getImage };

package/src/modules/StructuredData/Form/ConnectedField/index.tsx

@@ -11,7 +11,7 @@ import * as S from "./style";
 const ConnectedField = (props: IProps) => {
   const { field, site, form, fieldKey, updateFormValue, disabled, errors, deleteError, theme } = props;
 
-  const value = form.content && form.content[fieldKey];
+  const value = form?.content && form.content[fieldKey];
   const error = errors.find((err: any) => err.key === field.key);
 
   const handleChange = (newValue: any) => updateFormValue({ [fieldKey]: newValue });
@@ -22,7 +22,7 @@ const ConnectedField = (props: IProps) => {
   let innerFields: JSX.Element[] = [];
 
   if (isConditional || isArrayGroup) {
-    innerFields = getStructuredDataInnerFields(field.fields, form.content, updateFormValue, theme, errors);
+    innerFields = getStructuredDataInnerFields(field.fields, form?.content, updateFormValue, theme, errors);
   }
 
   const fieldProps = {
@@ -37,6 +37,7 @@ const ConnectedField = (props: IProps) => {
     error,
     deleteError,
     theme,
+    delayed: false,
   };
 
   return (

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

@@ -40,12 +40,11 @@ const Form = (props: IProps) => {
     validated,
     validateForm,
     currentStructuredDataId,
-    resetForm,
     skipReviewOnPublish,
   } = props;
 
-  const [isNewStructuredData, setIsNewStructuredData] = useState(!form.id);
-  const { isDirty, resetDirty } = useIsDirty(form);
+  const [isNewStructuredData, setIsNewStructuredData] = useState(!currentStructuredDataId);
+  const { isDirty, resetDirty, setIsDirty } = useIsDirty(form);
 
   const { fields } = schema;
 
@@ -60,17 +59,25 @@ const Form = (props: IProps) => {
   const theme = getDefaultTheme();
 
   useEffect(() => {
-    resetForm();
-    currentStructuredDataId && getDataContent(currentStructuredDataId);
+    const handleGetContent = async (dataID: number) => {
+      await getDataContent(dataID);
+    };
+
+    if (currentStructuredDataId) {
+      handleGetContent(currentStructuredDataId);
+    } else {
+      setIsDirty(true);
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentStructuredDataId]);
+  }, []);
 
   const Fields =
     fields &&
     fields.map((field: any, i: number) => {
       const { type, key } = field;
       if (key === "title") {
-        title = form.content && form.content[key] ? form.content[key] : "";
+        title = form?.content && form.content[key] ? form.content[key] : "";
       }
       return (
         <ConnectedField
@@ -116,14 +123,14 @@ const Form = (props: IProps) => {
 
   const getSaveLabel = () => {
     if (isNewStructuredData) return "Save";
-    return form.draft ? "Save" : "Save & publish";
+    return form?.draft ? "Save" : "Save & publish";
   };
 
   const handleSaveAndPublish = () => (isNewStructuredData || form.draft ? handleSave(false) : handleSave(true));
 
   const rightButtonProps = {
     label: isSaving ? "Saving" : getSaveLabel(),
-    disabled: isSaving || isDisabled,
+    disabled: isSaving || isDisabled || !isDirty,
     action: handleSaveAndPublish,
   };
 
@@ -142,7 +149,7 @@ const Form = (props: IProps) => {
   const getCurrentLanguages = () => {
     const availables: any[] = [];
 
-    form.dataLanguages &&
+    form?.dataLanguages &&
       form.dataLanguages.forEach(
         (dataLang: any) =>
           languages &&
@@ -228,7 +235,7 @@ const Form = (props: IProps) => {
 
   const downArrowMenu = {
     displayed: true,
-    button: getPublishButton(form.draft),
+    button: getPublishButton(form?.draft),
     options: [
       {
         label: "Review",
@@ -243,7 +250,7 @@ const Form = (props: IProps) => {
     ],
   };
 
-  const status = form.draft === true || form.draft === undefined ? "offline" : "active";
+  const status = !form || form.draft === true || form.draft === undefined ? "offline" : "active";
 
   const languageProps = {
     lang: isDataTranslatable ? lang : null,
@@ -273,7 +280,7 @@ const Form = (props: IProps) => {
         pageStatus={status}
         downArrowMenu={downArrowMenu}
         isFromEditor={true}
-        currentPageID={form.id}
+        currentPageID={form?.id}
         errors={errors}
       >
         {isDisabled && (
@@ -305,7 +312,7 @@ const Form = (props: IProps) => {
 
 interface IProps {
   schema: any;
-  form: any;
+  form: any | null;
   site: ISite | null;
   currentStructuredData: any;
   isSaving: boolean;
@@ -322,13 +329,12 @@ interface IProps {
   createStructuredDataContent: (payload: any) => Promise<boolean>;
   updateStructuredDataContent: (payload: any) => Promise<boolean>;
   setLanguage(lang: { locale: string; id: number | null }): void;
-  getDataContent(id: number): void;
+  getDataContent(id: number): Promise<void>;
   setHistoryPush(path: string, isEditor?: boolean): void;
   getSiteDataPack(packID: string): void;
   setDataStatus(id: number, status: string): Promise<boolean>;
   deleteStructuredDataContent(id: number): Promise<boolean>;
   validateForm(publish?: boolean): Promise<boolean>;
-  resetForm(): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({
@@ -359,7 +365,6 @@ const mapDispatchToProps = {
   setDataStatus: structuredDataActions.setStatusStructuredDataContent,
   deleteStructuredDataContent: structuredDataActions.deleteStructuredDataContent,
   validateForm: structuredDataActions.validateForm,
-  resetForm: structuredDataActions.resetForm,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Form);

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

@@ -17,7 +17,10 @@ const useSortedListStatus = (): IUseSortedListStatus => {
   };
 };
 
-const useFilterQuery = (currentStructuredData: IStructuredData | null): IUseFilterQuery => {
+const useFilterQuery = (
+  currentStructuredData: IStructuredData | null,
+  values: Record<string, IStructuredDataQueryValues> | null
+): IUseFilterQuery => {
   const structuredDataType = currentStructuredData ? currentStructuredData.id : "all";
   const initialQueryValues = {
     types: "all",
@@ -29,16 +32,7 @@ const useFilterQuery = (currentStructuredData: IStructuredData | null): IUseFilt
     related: "all",
   };
 
-  const [query, setQuery] = useState<Record<string, IStructuredDataQueryValues>>({ all: initialQueryValues });
-
-  useEffect(() => {
-    if (!query[structuredDataType]) {
-      setQuery((state) => ({ [structuredDataType]: initialQueryValues, ...state }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [structuredDataType]);
-
-  const setFilterQuery = (filterValues: IStructuredDataQueryValues) => {
+  const getFilterQuery = (filterValues: IStructuredDataQueryValues) => {
     const { types, translated, liveStatus, order, filterSites, categories, related } = filterValues;
     let filterQuery = "";
 
@@ -61,9 +55,22 @@ const useFilterQuery = (currentStructuredData: IStructuredData | null): IUseFilt
     return filterQuery;
   };
 
+  const initState = values ? values : { all: initialQueryValues };
+  const [state, setState] = useState<Record<string, IStructuredDataQueryValues>>(initState);
+
+  const initQuery = values && values[structuredDataType] ? getFilterQuery(values[structuredDataType]) : "";
+  const [query, setQuery] = useState(initQuery);
+
+  useEffect(() => {
+    if (!state[structuredDataType]) {
+      setState((state) => ({ [structuredDataType]: initialQueryValues, ...state }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [structuredDataType]);
+
   const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
     const { types, translated, liveStatus, order, filterSites, categories, related } =
-      query[structuredDataType] || initialQueryValues;
+      state[structuredDataType] || initialQueryValues;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       types: pointer === "types" ? filter : types,
@@ -75,18 +82,21 @@ const useFilterQuery = (currentStructuredData: IStructuredData | null): IUseFilt
       related: pointer === "related" ? filter : related,
     };
 
-    setQuery((state) => ({ ...state, [structuredDataType]: filterValues }));
-
-    return filterValues;
+    setState((state) => ({ ...state, [structuredDataType]: filterValues }));
+    const filterQuery = getFilterQuery(filterValues);
+    setQuery(filterQuery);
   };
 
-  const resetFilterQuery = () => setQuery({ [structuredDataType]: initialQueryValues });
+  const resetFilterQuery = () => {
+    setState({ [structuredDataType]: initialQueryValues });
+    setQuery("");
+  };
 
   return {
     setFiltersSelection,
-    setFilterQuery,
     resetFilterQuery,
-    filterValues: query,
+    filterValues: state,
+    query,
   };
 };
 
@@ -96,10 +106,10 @@ interface IUseSortedListStatus {
 }
 
 interface IUseFilterQuery {
-  setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): IStructuredDataQueryValues;
-  setFilterQuery(filterValues: IStructuredDataQueryValues): string;
+  setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): void;
   resetFilterQuery(): void;
   filterValues: Record<string, IStructuredDataQueryValues>;
+  query: string;
 }
 
 export { useSortedListStatus, useFilterQuery };

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

@@ -16,6 +16,7 @@ import {
   IPage,
   ICheck,
   IColumn,
+  IStructuredDataQueryValues,
 } from "@ax/types";
 import {
   ISetCurrentPageIDAction,
@@ -86,6 +87,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     resetCurrentSiteErrorPages,
     currentSiteErrorPages,
     skipReviewOnPublish,
+    setContentFilters,
+    contentFilters,
   } = props;
 
   const itemsPerPage = 50;
@@ -108,8 +111,12 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, filterValues, resetFilterQuery } = useFilterQuery(currentStructuredData);
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
+  const {
+    setFiltersSelection,
+    filterValues,
+    resetFilterQuery,
+    query: currentFilterQuery,
+  } = useFilterQuery(currentStructuredData, contentFilters);
   const history = useHistory();
   const [isFirstRender, setIsFirstRender] = useState(true);
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
@@ -218,6 +225,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     setIsFirstRender(false);
     resetPageEditor();
     resetCurrentSiteErrorPages();
+    resetForm();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -264,10 +272,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentDataContent]);
 
-  const resetFilterValues = () => {
-    resetFilterQuery();
-    setCurrentFilterQuery("");
-  };
+  const resetFilterValues = () => resetFilterQuery();
 
   useEffect(() => {
     if (!isFirstRender && !isLoading) {
@@ -296,6 +301,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    setContentFilters(filterValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterValues]);
+
   const handleClick = (isFromPage?: boolean, globalPage?: IPage, forceLive?: boolean) => {
     if (isFromPage && globalPage) {
       const pageID = globalPage.haveDraftPage && !forceLive ? globalPage.haveDraftPage : globalPage.id;
@@ -312,7 +322,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 
   const createNewData = () => {
     setCurrentDataID(null);
-    resetForm();
+    resetForm(true);
     handleClick();
   };
 
@@ -404,17 +414,13 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     const sortedState = getSortedListStatus(orderPointer, isAscending);
     setSortedListStatus(sortedState);
 
-    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection("order", orderPointer, isAscending);
   };
 
   const filterItems = async (filterPointer: string, filtersSelected: string) => {
     setPage(firstPage);
     if (!isStructuredDataFromPage && filterPointer === "categories") filterPointer = "related";
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection(filterPointer, filtersSelected);
   };
 
   const currentDataColumnsState = currentStructuredData ? columnsState[structuredDataType] || [] : columnsState["all"];
@@ -637,6 +643,7 @@ const mapStateToProps = (state: IRootState) => ({
   currentSitePages: state.sites.currentSitePages,
   currentSiteErrorPages: state.sites.currentSiteErrorPages,
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
+  contentFilters: state.structuredData.contentFilters,
 });
 
 const mapDispatchToProps = {
@@ -661,11 +668,12 @@ const mapDispatchToProps = {
   getAnalytics: analyticsActions.getAnalytics,
   setCurrentDataID: structuredDataActions.setCurrentDataID,
   resetCurrentSiteErrorPages: sitesActions.resetCurrentSiteErrorPages,
+  setContentFilters: structuredDataActions.setContentFilters,
 };
 
 interface IDispatchProps {
   setHistoryPush(route: string, isEditor?: boolean): void;
-  resetForm(): void;
+  resetForm(setDefault?: boolean): void;
   setLanguage(lang: { locale: string; id: number }): void;
   getStructuredDataContents(params: IGetStructuredDataParams): void;
   setSelectedStructuredData(id: string, scope: string): void;
@@ -685,6 +693,7 @@ interface IDispatchProps {
   getAnalytics(): void;
   setCurrentDataID(id: number | null): void;
   resetCurrentSiteErrorPages: () => Promise<void>;
+  setContentFilters(contentFilters: Record<string, IStructuredDataQueryValues> | null): void;
 }
 
 interface ICategoriesProps {
@@ -702,6 +711,7 @@ interface ICategoriesProps {
   currentSitePages: IPage[];
   currentSiteErrorPages: number[];
   skipReviewOnPublish?: boolean;
+  contentFilters: Record<string, IStructuredDataQueryValues> | null;
 }
 
 type IProps = ICategoriesProps & IDispatchProps;