@griddo/ax 1.63.4 → 1.64.1

package/src/modules/PageEditor/index.tsx

@@ -2,16 +2,17 @@ import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 
-import { IErrorItem, IRootState, ISavePageParams, IUserEditing } from "@ax/types";
+import { IErrorItem, IPageLanguage, IRootState, ISavePageParams, IUserEditing } from "@ax/types";
 import { MainWrapper, Loading, ErrorToast, Notification, Modal } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
-import { useIsDirty, useModal, useToast } from "@ax/hooks";
+import { useIsDirty, useModal } from "@ax/hooks";
 import { isModuleDisabled } from "@ax/helpers";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
+import { DeleteModal } from "./atoms";
 import Editor from "./Editor";
 import Preview from "./Preview";
 
@@ -45,11 +46,13 @@ const PageEditor = (props: IProps) => {
     isNewTranslation,
   } = props;
 
+  const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [selectedTab, setSelectedTab] = useState("edit");
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
+  const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
 
   const isGlobal = editorContent.editorContent && editorContent.editorContent.origin === "GLOBAL";
   const isEditable = editorContent.editorContent && editorContent.editorContent.editable;
@@ -57,6 +60,7 @@ const PageEditor = (props: IProps) => {
   const isDraft = props.pageStatus === pageStatus.MODIFIED;
   const hasDraft = editorContent.editorContent && editorContent.editorContent.haveDraftPage;
   const isLivePageChanged = editorContent.editorContent && editorContent.editorContent.liveChanged;
+  const isTranslated = pageLanguages.length > 1;
   const structuredData = editorContent.editorContent ? editorContent.editorContent.structuredData : "";
 
   useEffect(() => {
@@ -99,14 +103,15 @@ const PageEditor = (props: IProps) => {
   const setRoute = (path: string) => props.setHistoryPush(path, true);
 
   const removePage = async () => {
-    const { deletePage } = props;
+    const { deletePage, deleteBulk } = props;
     const path = "/sites/pages";
 
-    await deletePage().then((deleted: boolean) => {
-      if (deleted) {
-        setRoute(path);
-      }
-    });
+    const allPageVersions = pageLanguages.map((lang: IPageLanguage) => lang.pageId);
+    const isDeleted = deleteAllVersions ? await deleteBulk(allPageVersions) : await deletePage();
+    toggleDeleteModal();
+    if (isDeleted) {
+      setRoute(path);
+    }
   };
 
   const publishPage = async () => {
@@ -249,7 +254,7 @@ const PageEditor = (props: IProps) => {
         {
           label: "Delete",
           icon: "delete",
-          action: removePage,
+          action: toggleDeleteModal,
         },
       ]
     : [];
@@ -401,6 +406,13 @@ const PageEditor = (props: IProps) => {
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
+  const mainDeleteModalAction = {
+    title: "Delete page",
+    onClick: removePage,
+  };
+
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
+
   const tabsPreview = {
     icons: [
       { name: "edit", text: "Edit mode" },
@@ -508,6 +520,13 @@ const PageEditor = (props: IProps) => {
             </S.ModalContent>
           )}
         </Modal>
+        <DeleteModal
+          isOpen={isDeleteOpen}
+          toggleModal={toggleDeleteModal}
+          mainModalAction={mainDeleteModalAction}
+          secondaryModalAction={secondaryDeleteModalAction}
+          {...{ isTranslated, deleteAllVersions, setDeleteAllVersions }}
+        />
       </MainWrapper>
     </>
   );
@@ -570,6 +589,7 @@ const mapDispatchToProps = {
   setSelectedContent: pageEditorActions.setSelectedContent,
   sendPagePing: pageEditorActions.sendPagePing,
   discardDraft: pageEditorActions.discardDraft,
+  deleteBulk: pageEditorActions.deleteBulk,
 };
 
 interface IPageEditorDispatchProps {
@@ -589,6 +609,7 @@ interface IPageEditorDispatchProps {
   setSelectedContent(editorID: number): void;
   sendPagePing(pageID: number): Promise<boolean>;
   discardDraft(): Promise<void>;
+  deleteBulk(ids: number[]): Promise<boolean>;
 }
 
 type IProps = IPageEditorStateProps & IPageEditorDispatchProps & RouteComponentProps;

package/src/modules/PageEditor/style.tsx

@@ -16,6 +16,10 @@ const NotificationWrapper = styled.div`
 
 const ModalContent = styled.div`
   padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
 `;
 
 export { Content, NotificationWrapper, ModalContent };

package/src/modules/PublicPreview/index.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import * as components from "components";
-import { providers, translations, cloudinaryDefaults, themes, griddoDamDefaults } from "components";
+import { providers, translations, cloudinaryDefaults, griddoDamDefaults } from "components";
 import { Preview } from "@griddo/core";
 import { pages } from "@ax/api";
-import { isReqOk } from "@ax/helpers";
+import { getDefaultTheme, isReqOk } from "@ax/helpers";
 import { Loading } from "@ax/components";
 
 import * as S from "./style";
@@ -45,8 +45,7 @@ const PublicPreview = () => {
   const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
   const { SiteProvider, AnimationProvider } = providers;
 
-  const defaultTheme = themes.find((theme: any) => theme.default);
-  const globalTheme = defaultTheme ? defaultTheme.value : themes[0].value;
+  const globalTheme = getDefaultTheme();
   const theme = state && state.site ? state.siteInfo.theme : globalTheme;
   const socials = state && state.site ? state.siteInfo.socials : [];
   const langs = state && state.site ? state.siteInfo.siteLanguages : [];
@@ -56,7 +55,6 @@ const PublicPreview = () => {
   return (
     <SiteProvider
       cloudinaryCloudName={state && state.cloudinaryName}
-      damDomain={state && state.damDomain}
       theme={theme}
       socials={socials}
       siteLangs={langs}

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/TemplateBrowser/index.tsx

@@ -8,7 +8,6 @@ const TemplateBrowser = (props: IProps) => {
   const {
     socials,
     cloudinaryName,
-    damDomain,
     content: { editorContent, header, footer },
     selectedEditorID,
     currentSiteInfo: { theme, id: siteID },
@@ -26,7 +25,6 @@ const TemplateBrowser = (props: IProps) => {
       url=""
       theme={theme}
       cloudinaryName={cloudinaryName}
-      damDomain={damDomain}
       siteLangs={siteLangs}
       siteID={siteID}
       header={header}
@@ -41,7 +39,6 @@ interface IProps {
   currentSiteInfo: any;
   socials: ISocialState;
   cloudinaryName: string | null;
-  damDomain: string | null;
   siteLangs: ILanguage[];
 }
 
@@ -51,7 +48,6 @@ const mapStateToProps = (state: IRootState): IProps => ({
   currentSiteInfo: state.sites.currentSiteInfo,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
-  damDomain: state.app.globalSettings.damDomain,
   siteLangs: state.sites.currentSiteLanguages,
 });
 

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { connect } from "react-redux";
-import { themes } from "components";
 
 import { ResizePanel } from "@ax/components";
 import { IRootState } from "@ax/types";
+import { getDefaultTheme } from "@ax/helpers";
 
 import TemplateBrowser from "./TemplateBrowser";
 import ConfigPanel from "./ConfigPanel";
@@ -11,8 +11,7 @@ import ConfigPanel from "./ConfigPanel";
 const Editor = (props: IProps) => {
   const { isLoading, template } = props;
 
-  const defaultTheme = themes.find((theme: any) => theme.default);
-  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
+  const theme = getDefaultTheme();
 
   return (
     <ResizePanel

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

@@ -120,7 +120,7 @@ const Form = (props: IProps): JSX.Element => {
                   <Tag
                     key={`${categoryText}-${category.title}`}
                     text={`${categoryText}: ${category.title}`}
-                    deleteAction={handleDeleteTag}
+                    onDeleteAction={handleDeleteTag}
                   />
                 );
               })

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

@@ -13,8 +13,7 @@ import { timezones } from "./constants";
 import * as S from "./style";
 
 const Globals = (props: IProps): JSX.Element => {
-  const { isSaving, currentSiteInfo, saveSettings, setHistoryPush, navItems, currentNavItem } =
-    props;
+  const { isSaving, currentSiteInfo, saveSettings, setHistoryPush, navItems, currentNavItem } = props;
 
   const title = "General settings";
 
@@ -23,7 +22,8 @@ const Globals = (props: IProps): JSX.Element => {
 
   const { isDirty, setIsDirty } = useIsDirty(form);
 
-  const setValue = (newValue: Record<string, string | null>) => setForm((state: ISettingsForm) => ({ ...state, ...newValue }));
+  const setValue = (newValue: Record<string, string | null>) =>
+    setForm((state: ISettingsForm) => ({ ...state, ...newValue }));
 
   const setNameValue = (value: string) => setValue({ name: value });
   const setTimezoneValue = (value: string) => setValue({ timezone: value });

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

@@ -1,11 +1,10 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { themes } from "components";
 import { IDataPack, IErrorItem, IRootState, ISite } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { MainWrapper, ErrorToast, Notification, Loading } from "@ax/components";
-import { getActivatedDataPacksIds } from "@ax/helpers";
+import { getActivatedDataPacksIds, getDefaultTheme } from "@ax/helpers";
 import { appActions } from "@ax/containers/App";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty } from "@ax/hooks";
@@ -52,8 +51,7 @@ const Form = (props: IProps) => {
 
   let title = "";
 
-  const defaultTheme = themes.find((theme: any) => theme.default);
-  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
+  const theme = getDefaultTheme();
 
   const Fields =
     fields &&

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

@@ -35,14 +35,14 @@ const TableHeader = (props: IProps): JSX.Element => {
   } = props;
 
   const activeColumns = Object.keys(columns).filter((col: string) => columns[col].show);
-
+  const filterCategories = isFromPage ? filterValues.categories : filterValues.related;
   const CategoryColumns =
     !isAllPages &&
     categoryColumns.map(
       (col: any) =>
         activeColumns.includes(col.key) && (
           <S.HeaderWrapper key={col.key}>
-            <CategoryFilter filterItems={filterItems} value={filterValues.categories} structuredData={col} />
+            <CategoryFilter filterItems={filterItems} value={filterCategories} structuredData={col} />
           </S.HeaderWrapper>
         )
     );
@@ -97,30 +97,34 @@ const TableHeader = (props: IProps): JSX.Element => {
             </S.HeaderWrapper>
           )}
           {activeColumns.includes("seo") && <S.SeoHeader>SEO</S.SeoHeader>}
-          <S.ActionsHeader>
-            <TableCounter totalItems={totalItems} />
-            <CustomizeFilters columns={columns} setColumns={setColumns} value={activeColumns} />
-          </S.ActionsHeader>
         </>
       ) : (
         <>
           <S.NameWrapper>
             <NameFilter sortItems={sortItems} sortedState={sortedListStatus} />
           </S.NameWrapper>
-          <S.HeaderWrapper>
-            <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} isStructuredData={true} />
-          </S.HeaderWrapper>
-          <S.HeaderWrapper>
-            <StatusFilter sortItems={sortItems} sortedState={sortedListStatus} isStructuredData={true} />
-          </S.HeaderWrapper>
-          <S.HeaderWrapper>
-            <TranslationsFilter filterItems={filterItems} value={filterValues.translated} />
-          </S.HeaderWrapper>
-          <S.ActionsHeader>
-            <TableCounter totalItems={totalItems} />
-          </S.ActionsHeader>
+            {activeColumns.includes("live") && (
+              <S.HeaderWrapper>
+                <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} isStructuredData={true} />
+              </S.HeaderWrapper>
+            )}
+            {CategoryColumns}
+            {activeColumns.includes("status") && (
+              <S.HeaderWrapper>
+                <StatusFilter sortItems={sortItems} sortedState={sortedListStatus} isStructuredData={true} />
+              </S.HeaderWrapper>
+            )}
+            {activeColumns.includes("translation") && (
+              <S.HeaderWrapper>
+                <TranslationsFilter filterItems={filterItems} value={filterValues.translated} />
+              </S.HeaderWrapper>
+          )}
         </>
       )}
+      <S.ActionsHeader>
+        <TableCounter totalItems={totalItems} />
+        <CustomizeFilters columns={columns} setColumns={setColumns} value={activeColumns} />
+      </S.ActionsHeader>
     </S.TableHeader>
   );
 };

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/atoms.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+import React from "react";
 
 import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior, ElementsTooltip } from "@ax/components";
+import { Modal, FieldsBehavior } from "@ax/components";
 import { slugify } from "@ax/helpers";
 
 import * as S from "./style";
@@ -124,27 +124,6 @@ const UnpublishModal = (props: IModal): JSX.Element => {
   );
 };
 
-const CategoryCell = (props: ICategoryCellProps): JSX.Element => {
-  const { categories, categoryColors, addCategoryColors } = props;
-
-  useEffect(() => {
-    addCategoryColors(categories);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [categories]);
-
-  return (
-    <S.CategoryCell>
-      <ElementsTooltip elements={categories} colors={categoryColors} maxChar={30} rounded={true} />
-    </S.CategoryCell>
-  );
-};
-
-interface ICategoryCellProps {
-  categories: any;
-  categoryColors: any;
-  addCategoryColors(cats: string[]): void;
-}
-
 interface IDeleteModal extends IModal {
   title: string;
   isTranslated: boolean;
@@ -157,4 +136,4 @@ interface IDuplicateModal extends IModal {
   setDuplicateModalState: React.Dispatch<React.SetStateAction<{ title: string; slug: string }>>;
 }
 
-export { DeleteModal, DuplicateModal, UnpublishModal, CategoryCell };
+export { DeleteModal, DuplicateModal, UnpublishModal };

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

@@ -5,10 +5,10 @@ import { ICheck, IAvailableSites, ISavePageParams, ILanguage, IPageLanguage, IPa
 import { getHumanLastModifiedDate, getStructuredDataTitle } from "@ax/helpers";
 import { appActions } from "@ax/containers/App";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
-import { CheckField, FloatingMenu, Icon, Flag, LanguageMenu, Tooltip, ElementsTooltip } from "@ax/components";
+import { CheckField, FloatingMenu, Icon, Flag, LanguageMenu, Tooltip, ElementsTooltip, CategoryCell } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { useModal } from "@ax/hooks";
-import { DeleteModal, DuplicateModal, UnpublishModal, CategoryCell } from "./atoms";
+import { DeleteModal, DuplicateModal, UnpublishModal } from "./atoms";
 import { getCurrentLanguages } from "./utils";
 
 import * as S from "./style";

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/style.tsx

@@ -74,12 +74,6 @@ const StyledActionMenu = styled(ActionMenu)`
   margin-left: auto;
 `;
 
-const CategoryCell = styled(Cell)`
-  flex: 0 0 150px;
-  align-items: center;
-  position: relative;
-`;
-
 const StructuredDataRow = styled(Row)<{ disabled: boolean }>`
   cursor: ${(p) => (p.disabled ? "default" : "pointer")};
   &:hover {
@@ -171,5 +165,4 @@ export {
   StyledClose,
   FloatingSeo,
   ModalContent,
-  CategoryCell,
 };

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

@@ -1,8 +1,7 @@
 import React, { useReducer, useEffect } from "react";
-import { themes } from "components";
 
 import { IStructuredDataFilter, IStructuredDataValue } from "@ax/types";
-import { getThumbnailProps } from "@ax/helpers";
+import { getDefaultTheme, getThumbnailProps } from "@ax/helpers";
 import { MenuItem, RadioGroup } from "@ax/components";
 
 import { reducer, IOptionTableStore, setColumnValues, setShowThumbnail, setSelectedType, setOption } from "./store";
@@ -49,8 +48,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     return columns.includes(optionValues[0]);
   };
 
-  const defaultTheme = themes.find((theme: any) => theme.default);
-  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
+  const theme = getDefaultTheme();
 
   const thumbnailProps =
     state.showThumbnail &&

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

@@ -1,12 +1,12 @@
 import React, { memo } from "react";
 import { connect } from "react-redux";
 
-import { IRootState, IStructuredDataContent, ICheck, IDataPack, ILanguage, IDataLanguage } from "@ax/types";
+import { IRootState, IStructuredDataContent, ICheck, IDataPack, ILanguage, IDataLanguage, IColumn } from "@ax/types";
 import { getActivatedDataPacksIds, getHumanLastModifiedDate } from "@ax/helpers";
 import { setIsSavedData } from "@ax/forms";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { appActions } from "@ax/containers/App";
-import { CheckField, FloatingMenu, Icon, Flag, LanguageMenu, Tooltip } from "@ax/components";
+import { CheckField, FloatingMenu, Icon, Flag, LanguageMenu, Tooltip, CategoryCell } from "@ax/components";
 
 import * as S from "./style";
 
@@ -29,11 +29,21 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
     isEditable,
     activatedDataPacks,
     setDataStatus,
+    categoryColumns,
+    columns,
+    categoryColors,
+    addCategoryColors,
   } = props;
 
   const { locale } = lang;
   const { dataLanguages } = structuredData;
 
+  const currentStructuredDataColumns: any = columns[currentStructuredData.id] || columns["all"];
+
+  const activeColumns = Object.keys(currentStructuredDataColumns).filter(
+    (col: string) => currentStructuredDataColumns[col].show
+  );
+
   const publishedTooltip: Record<string, string> = {
     active: "Live",
     "upload-pending": "Publication pending",
@@ -141,9 +151,7 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 
   const translations =
     currentStructuredData && currentStructuredData.translate ? (
-      <FloatingMenu Button={FlagsButton}>
-        {languageMenu()}
-      </FloatingMenu>
+      <FloatingMenu Button={FlagsButton}>{languageMenu()}</FloatingMenu>
     ) : (
       "Not translatable"
     );
@@ -169,6 +177,21 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
   const menuOptionsNoDuplicate = isEditable ? [deleteOption, publishOption] : [publishOption];
   const menuOptions = isDisabled || !isEditable ? menuOptionsNoDuplicate : [duplicateOption, ...menuOptionsNoDuplicate];
 
+  const CategoryColumns = categoryColumns.map((col: any) => {
+    const type = structuredData && structuredData.content && structuredData.content[col.from];
+    const categories = Array.isArray(type) && type.map((cat: any) => cat.label || cat.title);
+    return (
+      activeColumns.includes(col.key) && (
+        <CategoryCell
+          key={col.key}
+          categories={categories}
+          categoryColors={categoryColors}
+          addCategoryColors={addCategoryColors}
+        />
+      )
+    );
+  });
+
   return (
     <S.StructuredDataRow role="rowgroup" selected={isSelected} disabled={!isEditable}>
       <S.CheckCell role="cell">
@@ -177,15 +200,20 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
       <S.NameCell role="cell" onClick={_handleClick}>
         {structuredData.content.title}
       </S.NameCell>
-      <S.LiveCell role="cell" onClick={_handleClick}>
-        <Tooltip content={publishedTooltip[checkStatus()]}>
-          <Icon name={checkStatus()} />
-        </Tooltip>
-      </S.LiveCell>
-      <S.StatusCell role="cell" onClick={_handleClick}>
-        <S.ModDate>{`Mod. ${getHumanLastModifiedDate(structuredData.modified)}`}</S.ModDate>
-      </S.StatusCell>
-      <S.TransCell role="cell">{translations}</S.TransCell>
+      {activeColumns.includes("live") && (
+        <S.LiveCell role="cell" onClick={_handleClick}>
+          <Tooltip content={publishedTooltip[checkStatus()]}>
+            <Icon name={checkStatus()} />
+          </Tooltip>
+        </S.LiveCell>
+      )}
+      {CategoryColumns}
+      {activeColumns.includes("status") && (
+        <S.StatusCell role="cell" onClick={_handleClick}>
+          <S.ModDate>{`Mod. ${getHumanLastModifiedDate(structuredData.modified)}`}</S.ModDate>
+        </S.StatusCell>
+      )}
+      {activeColumns.includes("translation") && <S.TransCell role="cell">{translations}</S.TransCell>}
       <S.ActionsCell role="cell">
         <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
       </S.ActionsCell>
@@ -212,6 +240,10 @@ interface IStructuredDataItemProps {
   isEditable?: boolean | null;
   activatedDataPacks?: IDataPack[];
   setDataStatus(id: number, status: string): void;
+  categoryColumns: any[];
+  columns: Record<string, IColumn>;
+  categoryColors: any;
+  addCategoryColors(cats: string[]): void;
 }
 
 const mapStateToProps = (state: IRootState) => ({

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

@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { IStructuredDataQueryValues, IStructuredDataSortedInitialState } from "@ax/types";
+import { useEffect, useState } from "react";
+import { IStructuredData, IStructuredDataQueryValues, IStructuredDataSortedInitialState } from "@ax/types";
 
 const useSortedListStatus = (): IUseSortedListStatus => {
   const sortedInitialState: IStructuredDataSortedInitialState = {
@@ -17,7 +17,8 @@ const useSortedListStatus = (): IUseSortedListStatus => {
   };
 };
 
-const useFilterQuery = (): IUseFilterQuery => {
+const useFilterQuery = (currentStructuredData: IStructuredData | null): IUseFilterQuery => {
+  const structuredDataType = currentStructuredData ? currentStructuredData.id : "all";
   const initialQueryValues = {
     types: "all",
     translated: "all",
@@ -25,12 +26,20 @@ const useFilterQuery = (): IUseFilterQuery => {
     order: "",
     filterSites: "all",
     categories: "all",
+    related: "all",
   };
 
-  const [query, setQuery] = useState(initialQueryValues);
+  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 { types, translated, liveStatus, order, filterSites, categories } = filterValues;
+    const { types, translated, liveStatus, order, filterSites, categories, related } = filterValues;
     let filterQuery = "";
 
     const currentQuery = (pointer: string, values: string) => {
@@ -47,12 +56,14 @@ const useFilterQuery = (): IUseFilterQuery => {
     if (isNotInitialValue("order")) filterQuery = currentQuery("order", order);
     if (isNotInitialValue("filterSites")) filterQuery = currentQuery("filterSites", filterSites);
     if (isNotInitialValue("categories")) filterQuery = currentQuery("categories", categories);
+    if (isNotInitialValue("related")) filterQuery = currentQuery("related", related);
 
     return filterQuery;
   };
 
   const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
-    const { types, translated, liveStatus, order, filterSites, categories } = query;
+    const { types, translated, liveStatus, order, filterSites, categories, related } =
+      query[structuredDataType] || initialQueryValues;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       types: pointer === "types" ? filter : types,
@@ -61,14 +72,15 @@ const useFilterQuery = (): IUseFilterQuery => {
       order: pointer === "order" ? `${filter}-${orderMethod}` : order,
       filterSites: pointer === "filterSites" ? filter : filterSites,
       categories: pointer === "categories" ? filter : categories,
+      related: pointer === "related" ? filter : related,
     };
 
-    setQuery(filterValues);
+    setQuery((state) => ({ ...state, [structuredDataType]: filterValues }));
 
     return filterValues;
   };
 
-  const resetFilterQuery = () => setQuery(initialQueryValues);
+  const resetFilterQuery = () => setQuery({ [structuredDataType]: initialQueryValues });
 
   return {
     setFiltersSelection,
@@ -87,7 +99,7 @@ interface IUseFilterQuery {
   setFiltersSelection(pointer: string, filter: string, isAscendent?: boolean): IStructuredDataQueryValues;
   setFilterQuery(filterValues: IStructuredDataQueryValues): string;
   resetFilterQuery(): void;
-  filterValues: IStructuredDataQueryValues;
+  filterValues: Record<string, IStructuredDataQueryValues>;
 }
 
 export { useSortedListStatus, useFilterQuery };