@griddo/ax 11.1.7 → 11.1.9

package/src/components/TableFilters/NameFilter/index.tsx

@@ -6,11 +6,11 @@ import { IQueryValue } from "@ax/types";
 import * as S from "./style";
 
 const NameFilter = (props: INameFilterProps): JSX.Element => {
-  const { sortItems, sortedState, urlSorting, pointer = "title" } = props;
+  const { sortItems, sortedState, urlSorting, title, pointer = "title" } = props;
   const { isAscending, sortedByTitle, sortedByURL } = sortedState;
 
-  const sortByName = (isAscending: boolean) => sortItems([{ value: pointer, label: pointer}], isAscending);
-  const sortAscendingURL = () => sortItems([{ value: "slug", label: "slug"}], true);
+  const sortByName = (isAscending: boolean) => sortItems([{ value: pointer, label: pointer }], isAscending);
+  const sortAscendingURL = () => sortItems([{ value: "slug", label: "slug" }], true);
   const sortAscendingName = () => sortByName(true);
   const sortDescendingName = () => sortByName(false);
 
@@ -18,11 +18,11 @@ const NameFilter = (props: INameFilterProps): JSX.Element => {
     isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
   const isActive = sortedByTitle || sortedByURL;
 
-  const title = urlSorting ? "Name & URL" : "Name";
+  const headerTitle = title ? title : urlSorting ? "Name & URL" : "Name";
 
   const Header = () => (
     <S.NameHeader isActive={isActive} data-testid="name-filter-header">
-      {title}
+      {headerTitle}
       <S.IconsWrapper>
         {isActive ? (
           <SortedStateArrow />
@@ -44,7 +44,7 @@ const NameFilter = (props: INameFilterProps): JSX.Element => {
       <ListItem isSelected={sortedByTitle && !isAscending} onClick={sortDescendingName}>
         Descendent
       </ListItem>
-      {urlSorting && (
+      {!!urlSorting && (
         <>
           <ListTitle>URL Sorting</ListTitle>
           <ListItem isSelected={sortedByURL} onClick={sortAscendingURL}>
@@ -61,6 +61,7 @@ export interface INameFilterProps {
   sortItems(orderPointer: IQueryValue[], isAscendent: boolean): void;
   urlSorting?: boolean;
   pointer?: string;
+  title?: string;
 }
 
 export default NameFilter;

package/src/components/TableList/style.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-const TableList = styled.div<{overflow?: string}>`
+const TableList = styled.div<{ overflow?: string }>`
   width: 100%;
   height: 100%;
   overflow: ${(p) => p.overflow};
@@ -8,33 +8,38 @@ const TableList = styled.div<{overflow?: string}>`
 
 const Table = styled.div`
   width: 100%;
-  min-height: calc(100% - ${(p) => p.theme.spacing.l} - ${(p) => p.theme.spacing.m});
-  padding-bottom: ${(p) => p.theme.spacing.m};
+  display: flex;
+  flex-flow: column;
+  height: 100%;
 `;
 
-const TableHeader = styled.div<{hasFixedHeader?: boolean}>`
+const TableHeader = styled.div<{ hasFixedHeader?: boolean }>`
   display: flex;
   flex-direction: row;
   width: 100%;
   position: relative; /* fallback */
-  position: ${(p) => p.hasFixedHeader ? `sticky` : `relative`};
+  position: ${(p) => (p.hasFixedHeader ? `sticky` : `relative`)};
   z-index: 6;
   top: 0;
   background: ${(p) => p.theme.color.uiBackground01};
 `;
 
-const Header = styled.div<{isActive?: boolean}>`
+const Header = styled.div<{ isActive?: boolean }>`
   ${(p) => p.theme.textStyle.uiS};
+  position: relative;
   box-sizing: border-box;
   padding: ${(p) => ` 0 ${p.theme.spacing.s}`};
   display: flex;
   flex-flow: column wrap;
   flex-direction: row;
-  color: ${(p) => p.isActive ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+  color: ${(p) => (p.isActive ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
 `;
 
 const TableBody = styled.div`
-  padding: 0 ${(p) => p.theme.spacing.m};
+  padding: ${(p) => `0 ${p.theme.spacing.m}`};
+  display: flex;
+  flex-flow: column;
+  flex-grow: 1;
 
   &.no-padding {
     padding: 0;
@@ -95,5 +100,5 @@ export {
   TransHeader,
   SeoHeader,
   ActionsHeader,
-  PaginationWrapper
+  PaginationWrapper,
 };

package/src/containers/Forms/actions.tsx

@@ -379,7 +379,7 @@ function deleteForm(id: number | number[]): (dispatch: Dispatch, getState: any)
         },
       };
 
-      const callback = async () => (Array.isArray(id) ? forms.deleteFormBulk(id) : forms.deleteForm(id));
+      const callback = async () => (Array.isArray(id) ? await forms.deleteFormBulk(id) : await forms.deleteForm(id));
 
       return await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
@@ -389,10 +389,16 @@ function deleteForm(id: number | number[]): (dispatch: Dispatch, getState: any)
   };
 }
 
-function updateFormState(formID: number, state: FormState): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function updateFormState(
+  formID: number | number[],
+  state: FormState
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
-      const callback = async () => await forms.updateFormState(formID, state);
+      const callback = async () =>
+        Array.isArray(formID)
+          ? await forms.updateFormStateBulk(formID, state)
+          : await forms.updateFormState(formID, state);
 
       const responseActions = {
         handleSuccess: () => {

package/src/containers/Sites/actions.tsx

@@ -17,6 +17,7 @@ import {
   SET_CONFIG,
   SET_CURRENT_SEARCH,
   SET_THEME_ELEMENTS,
+  SET_IS_SITES_LOADING,
 } from "./constants";
 
 import {
@@ -36,6 +37,7 @@ import {
   ISetConfig,
   ISetCurrentSearch,
   ISetThemeElements,
+  ISetIsSitesLoading,
 } from "./interfaces";
 
 import {
@@ -61,7 +63,7 @@ import { integrationsActions } from "@ax/containers/Integrations";
 import { getDefaultTheme, getThemeElements, handleRequest, isReqOk, sortBy } from "@ax/helpers";
 import { usersActions } from "@ax/containers/Users";
 
-const { setIsLoading, setIsSaving, setLanguage } = appActions;
+const { setIsSaving, setLanguage } = appActions;
 const { resetDefaultsValues, getDefaults } = navigationActions;
 const { resetMenuValues } = menuActions;
 const { getAnalytics } = analyticsActions;
@@ -132,6 +134,10 @@ function setThemeElements(themeElements: IThemeElements | null): ISetThemeElemen
   return { type: SET_THEME_ELEMENTS, payload: { themeElements } };
 }
 
+function setIsSitesLoading(isSitesLoading: boolean): ISetIsSitesLoading {
+  return { type: SET_IS_SITES_LOADING, payload: { isSitesLoading } };
+}
+
 // 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(params: IGetSitesParams = { recentSitesNumber: 7 }): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
@@ -146,7 +152,9 @@ function getSites(params: IGetSitesParams = { recentSitesNumber: 7 }): (dispatch
       };
       const callback = async () => sites.getAllSites(params);
 
-      await handleRequest(callback, responseActions, [])(dispatch);
+      const setIsLoading = setIsSitesLoading;
+
+      await handleRequest(callback, responseActions, [setIsLoading])(dispatch);
     } catch (e) {
       console.log(e);
     }
@@ -255,7 +263,7 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: any, getState: any) =>
         structuredData: { categories: currentCategories },
       } = getState();
 
-      dispatch(setIsLoading(true));
+      dispatch(appActions.setIsLoading(true));
 
       resetSiteValues(currentSiteInfo.id)(dispatch);
       dispatch(structuredDataActions.resetStructuredData());
@@ -374,7 +382,7 @@ function getSitePages(
 ): (dispatch: any) => Promise<void> {
   return async (dispatch) => {
     try {
-      dispatch(setIsLoading(true));
+      dispatch(appActions.setIsLoading(true));
       const response: any = structuredData
         ? await sites.getStructuredSitePages(params, structuredData, filterQuery)
         : await sites.getSitePages(params, filterQuery);
@@ -386,7 +394,7 @@ function getSitePages(
       } else {
         console.log("Error en getSitePages"); // FIXME: capturar errores mejor
       }
-      dispatch(setIsLoading(false));
+      dispatch(appActions.setIsLoading(false));
     } catch (e) {
       console.log(e); // FIXME: capturar errores mejor
     }
@@ -416,9 +424,9 @@ function getAllSitePages(params: IGetSitePagesParams): (dispatch: any) => Promis
 function getSiteLanguages(siteID: number): (dispatch: any) => Promise<void> {
   return async (dispatch) => {
     try {
-      dispatch(setIsLoading(true));
+      dispatch(appActions.setIsLoading(true));
       const response: any = await languages.getSiteLanguages(siteID);
-      dispatch(setIsLoading(false));
+      dispatch(appActions.setIsLoading(false));
       if (isReqOk(response.status)) {
         const siteLanguages = response.data.items;
 
@@ -785,4 +793,5 @@ export {
   setListConfig,
   getSite,
   updateCurrentSearch,
+  setIsSitesLoading,
 };

package/src/containers/Sites/constants.tsx

@@ -17,6 +17,7 @@ export const SET_CONTENT_FILTERS = `${NAME}/SET_CONTENT_FILTERS`;
 export const SET_CONFIG = `${NAME}/SET_CONFIG`;
 export const SET_CURRENT_SEARCH = `${NAME}/SET_CURRENT_SEARCH`;
 export const SET_THEME_ELEMENTS = `${NAME}/SET_THEME_ELEMENTS`;
+export const SET_IS_SITES_LOADING = `${NAME}/SET_IS_SITES_LOADING`;
 
 export const ITEMS_PER_PAGE = 50;
 

package/src/containers/Sites/interfaces.tsx

@@ -16,6 +16,7 @@ import {
   SET_CONFIG,
   SET_CURRENT_SEARCH,
   SET_THEME_ELEMENTS,
+  SET_IS_SITES_LOADING,
 } from "./constants";
 import { IQueryValue, ISite, ISiteListConfig, IThemeElements } from "@ax/types";
 
@@ -104,4 +105,9 @@ export interface ISetThemeElements {
   payload: { themeElements: IThemeElements | null };
 }
 
+export interface ISetIsSitesLoading {
+  type: typeof SET_IS_SITES_LOADING;
+  payload: { isSitesLoading: boolean };
+}
+
 export type SitesActionsCreators = ISetSitesAction & ISetCurrentSiteInfoAction;

package/src/containers/Sites/reducer.tsx

@@ -16,6 +16,7 @@ import {
   SET_CONFIG,
   SET_CURRENT_SEARCH,
   SET_THEME_ELEMENTS,
+  SET_IS_SITES_LOADING,
 } from "./constants";
 
 import { ISite, IPage, ILanguage, ISiteListConfig, IQueryValue, IThemeElements } from "@ax/types";
@@ -40,13 +41,14 @@ export interface ISitesState {
   config: ISiteListConfig;
   currentSearch: string;
   themeElements: IThemeElements | null;
+  isSitesLoading: boolean;
 }
 
-const config = {
+const config: ISiteListConfig = {
   displayRecentSites: false,
   mode: "grid",
   filter: "&order=lastAccess-desc",
-  filterValues: { order: "desc", liveStatus: "all" },
+  filterValues: { order: "desc", liveStatus: [{ value: "all", label: "All" }] },
   sortedListStatus: {
     isAscending: false,
     sortedByDateCreated: false,
@@ -73,6 +75,7 @@ export const initialState = {
   config,
   currentSearch: "",
   themeElements: null,
+  isSitesLoading: false,
 };
 
 export function reducer(state = initialState, action: any): ISitesState {
@@ -94,6 +97,7 @@ export function reducer(state = initialState, action: any): ISitesState {
     case SET_CONFIG:
     case SET_CURRENT_SEARCH:
     case SET_THEME_ELEMENTS:
+    case SET_IS_SITES_LOADING:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/containers/StructuredData/actions.tsx

@@ -177,7 +177,8 @@ const filterStructuredData = (data: IStructuredData[], isTaxonomy: boolean, site
 
 function getStructuredData(
   token: string | null,
-  siteID?: number | null
+  siteID?: number | null,
+  hasLoading = true
 ): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
     try {
@@ -205,7 +206,9 @@ function getStructuredData(
 
       const callback = async () => structuredData.getData(token, siteID);
 
-      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+      const loading = hasLoading === false ? [] : [appActions.setIsLoading];
+
+      await handleRequest(callback, responseActions, loading)(dispatch);
     } catch (e) {
       console.log(e);
     }

package/src/containers/Users/actions.tsx

@@ -64,7 +64,11 @@ function getUsers(params: any, siteID?: number | null): (dispatch: Dispatch) =>
   };
 }
 
-function getUser(id: string | number, token?: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getUser(
+  id: string | number,
+  token?: string,
+  hasLoading = true
+): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       const callback = async () => users.getUser(id, token);
@@ -84,7 +88,9 @@ function getUser(id: string | number, token?: string): (dispatch: Dispatch, getS
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
 
-      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+      const loading = hasLoading === false ? [] : [appActions.setIsLoading];
+
+      await handleRequest(callback, responseActions, loading)(dispatch);
     } catch (e) {
       console.log(e); // TODO: capturar error bien
     }
@@ -336,7 +342,7 @@ function getUserCurrentPermissions(): (dispatch: Dispatch, getState: any) => voi
       });
     }
     dispatch(setCurrentPermissions(permissions));
-    if(!currentSiteInfo) {
+    if (!currentSiteInfo) {
       dispatch(setGlobalPermissions(permissions));
     }
   };

package/src/helpers/index.tsx

@@ -38,6 +38,7 @@ import {
   trimObject,
   hasProps,
   encodeData,
+  findObjectValue,
 } from "./objects";
 
 import {
@@ -222,4 +223,5 @@ export {
   arrayInsert,
   getMaxColumns,
   updateColumns,
+  findObjectValue,
 };

package/src/helpers/objects.tsx

@@ -115,6 +115,20 @@ const encodeData = (data: Record<string, string | number | boolean>): string =>
     .map((pair) => pair.map(encodeURIComponent).join("="))
     .join("&");
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const findObjectValue = (obj: Record<string, any>, key: string): any | undefined => {
+  if (!obj || typeof obj !== "object") return undefined;
+  if (key in obj) return obj[key];
+
+  for (const prop of Object.values(obj)) {
+    if (typeof prop === "object" && prop !== null) {
+      const foundValue = findObjectValue(prop, key);
+      if (foundValue) return foundValue;
+    }
+  }
+  return undefined;
+};
+
 export {
   isEmptyObj,
   deepClone,
@@ -129,4 +143,5 @@ export {
   trimObject,
   hasProps,
   encodeData,
+  findObjectValue,
 };

package/src/helpers/schemas.tsx

@@ -60,7 +60,8 @@ const getFormTemplate = (name: string) => formSchemas?.templates[name];
 
 const getDefaultFormTemplate = (name: string) => formSchemas?.templates[name].default;
 
-const getSchemaFormCategories = (): { label: string; value: string }[] => formSchemas?.categories || [];
+const getSchemaFormCategories = (): { label: string; value: string; featured?: boolean }[] =>
+  formSchemas?.categories || [];
 
 const getTemplateThumbnails = (name: string, theme?: string) => {
   if (!schemas.templates[name]?.thumbnails) return null;

package/src/hooks/content.tsx

@@ -2,7 +2,9 @@ import { useEffect, useState, useLayoutEffect } from "react";
 import { IEmptyStateProps } from "@ax/types";
 import { useWindowSize } from "./window";
 
-const useCategoryColors = (categories?: string[]): any => {
+const useCategoryColors = (
+  categories?: string[]
+): { categoryColors: Record<string, string>; addCategoryColors: (cats: string[]) => void } => {
   const fixedColors = [
     "#FFE695",
     "#C1F0FF",

package/src/modules/Forms/FormList/BulkHeader/TableHeader/index.tsx

@@ -1,7 +1,15 @@
 import React from "react";
 
-import { CheckField, TableCounter, SiteFilter, NameFilter, RoleFilter, Tooltip } from "@ax/components";
-import { IQueryValue, IRole } from "@ax/types";
+import {
+  CategoryFilter,
+  CheckField,
+  CheckGroupFilter,
+  NameFilter,
+  StatusFilter,
+  TableCounter,
+  Tooltip,
+} from "@ax/components";
+import { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -12,12 +20,52 @@ const TableHeader = (props: IProps): JSX.Element => {
     isScrolling,
     sortItems,
     filterItems,
-    //sortedListStatus,
-    //filterValues,
+    sortedListStatus,
+    filterValues,
     checkState,
     setHoverCheck,
+    featuredCategory,
+    siteID,
   } = props;
 
+  const statusFilters: IFilterValue[] = [
+    {
+      name: "all",
+      value: "all",
+      title: "All states",
+    },
+    {
+      name: "inactive",
+      value: "inactive",
+      title: "Inactive",
+      icon: "offline",
+    },
+    {
+      name: "active",
+      value: "active",
+      title: "Active",
+      icon: "active",
+    },
+  ];
+
+  const langfilters: IFilterValue[] = [
+    {
+      name: "all",
+      value: "all",
+      title: "All forms",
+    },
+    {
+      name: "only",
+      value: "only",
+      title: "Translated content",
+    },
+    {
+      name: "no",
+      value: "no",
+      title: "Not translated content",
+    },
+  ];
+
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
@@ -34,11 +82,49 @@ const TableHeader = (props: IProps): JSX.Element => {
           />
         </Tooltip>
       </S.CheckHeader>
-      <S.NameWrapper>Form name</S.NameWrapper>
-      <S.TypeHeader>Type</S.TypeHeader>
-      <S.UpdateHeader>Last update</S.UpdateHeader>
-      <S.StateHeader>State</S.StateHeader>
-      <S.LangHeader>Lang</S.LangHeader>
+      <S.NameWrapper>
+        <NameFilter sortItems={sortItems} sortedState={sortedListStatus} title="Form name" />
+      </S.NameWrapper>
+      {featuredCategory && (
+        <S.TypeHeader>
+          <CategoryFilter
+            filterItems={filterItems}
+            value={filterValues.type}
+            formCategory={featuredCategory}
+            siteID={siteID}
+            pointer="type"
+          />
+        </S.TypeHeader>
+      )}
+      <S.UpdateHeader>
+        <StatusFilter sortItems={sortItems} sortedState={sortedListStatus} />
+      </S.UpdateHeader>
+      <S.StateHeader>
+        <CheckGroupFilter
+          filterItems={filterItems}
+          value={filterValues.state}
+          pointer="state"
+          label="State"
+          description="Live Filter"
+          initialState={["all"]}
+          selectAllOption="all"
+          filters={statusFilters}
+          menuPosition="left"
+        />
+      </S.StateHeader>
+      <S.LangHeader>
+        <CheckGroupFilter
+          filterItems={filterItems}
+          value={filterValues.translated}
+          pointer="translated"
+          label="Lang"
+          description="Filter by Translations"
+          initialState={["all"]}
+          selectAllOption="all"
+          filters={langfilters}
+          menuPosition="right"
+        />
+      </S.LangHeader>
       <S.ActionsHeader>
         <TableCounter totalItems={totalItems} />
       </S.ActionsHeader>
@@ -49,12 +135,14 @@ const TableHeader = (props: IProps): JSX.Element => {
 interface IProps {
   totalItems: number;
   isScrolling: boolean;
+  featuredCategory?: { value: string; label: string };
   selectAllItems: () => void;
   filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
-  //sortedListStatus: { isAscending: boolean; sortedByName: boolean; sortedByDateCreated: boolean };
-  //filterValues: Record<string, IQueryValue[]>;
+  sortedListStatus: { isAscending: boolean; sortedByTitle: boolean; sortedByDate: boolean };
+  filterValues: Record<string, IQueryValue[]>;
   checkState: Record<string, boolean>;
+  siteID: number | null;
   setHoverCheck: (state: boolean) => void;
 }
 

package/src/modules/Forms/FormList/BulkHeader/TableHeader/style.tsx

@@ -17,6 +17,7 @@ const CheckHeader = styled(Header)`
 const NameWrapper = styled(Header)`
   flex-grow: 1;
   position: relative;
+  padding-left: 0;
 `;
 
 const ActionsHeader = styled(Header)`
@@ -25,17 +26,19 @@ const ActionsHeader = styled(Header)`
 `;
 
 const TypeHeader = styled(Header)`
-  flex: 0 0 150px;
+  flex: 0 0 215px;
   justify-content: center;
+  padding: 0;
 `;
 
 const UpdateHeader = styled(Header)`
   flex: 0 0 170px;
   justify-content: center;
+  padding: 0;
 `;
 
 const StateHeader = styled(Header)`
-  flex: 0 0 80px;
+  flex: 0 0 85px;
   justify-content: center;
 `;
 

package/src/modules/Forms/FormList/BulkHeader/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import { IQueryValue, IRole } from "@ax/types";
-import { usePermission } from "@ax/hooks";
+import { IQueryValue } from "@ax/types";
 import TableHeader from "./TableHeader";
 
 const BulkHeader = (props: IProps): JSX.Element => {
@@ -14,13 +13,14 @@ const BulkHeader = (props: IProps): JSX.Element => {
     isScrolling,
     sortItems,
     filterItems,
-    //sortedListStatus,
-    //filterValues,
+    sortedListStatus,
+    filterValues,
     setHoverCheck,
+    featuredCategory,
+    bulkActions,
+    siteID,
   } = props;
 
-  const bulkActions: any[] = [];
-
   return showBulk ? (
     <BulkSelectionOptions
       checkState={checkState}
@@ -30,15 +30,17 @@ const BulkHeader = (props: IProps): JSX.Element => {
     />
   ) : (
     <TableHeader
-      //filterValues={filterValues}
+      filterValues={filterValues}
       totalItems={totalItems}
       selectAllItems={selectAllItems}
       filterItems={filterItems}
       isScrolling={isScrolling}
       sortItems={sortItems}
-      //sortedListStatus={sortedListStatus}
+      sortedListStatus={sortedListStatus}
       setHoverCheck={setHoverCheck}
       checkState={checkState}
+      featuredCategory={featuredCategory}
+      siteID={siteID}
     />
   );
 };
@@ -50,9 +52,12 @@ interface IProps {
   selectAllItems: () => void;
   totalItems: number;
   isScrolling: boolean;
+  featuredCategory?: { value: string; label: string };
+  bulkActions: { icon: string; text: string; action: () => void }[];
   sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
-  //sortedListStatus: { isAscending: boolean; sortedByName: boolean; sortedByDateCreated: boolean };
-  //filterValues: Record<string, IQueryValue[]>;
+  sortedListStatus: { isAscending: boolean; sortedByTitle: boolean; sortedByDate: boolean };
+  filterValues: Record<string, IQueryValue[]>;
+  siteID: number | null;
   filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   setHoverCheck: (state: boolean) => void;
 }