@griddo/ax 10.3.23 → 10.3.25

package/src/components/Gallery/hooks.tsx

@@ -1,40 +1,51 @@
-
 import { useState } from "react";
+import { IQueryValue } from "@ax/types";
 
 const useSortedListStatus = () => {
-  const sortedInitialState: { isAscending: boolean; sortedByName: boolean; sortedByDate: boolean; sortedBySize: boolean; } = {
+  const sortedInitialState: {
+    isAscending: boolean;
+    sortedByName: boolean;
+    sortedByDate: boolean;
+    sortedBySize: boolean;
+  } = {
     isAscending: false,
     sortedByName: false,
     sortedByDate: false,
-    sortedBySize: false
+    sortedBySize: false,
   };
 
   const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
 
   return {
     sortedListStatus,
-    setSortedListStatus
+    setSortedListStatus,
   };
 };
 
-
 const useFilterQuery = () => {
-  const initialQueryValues = {
-    orientation: "",
-    order: "",
-    format: ""
+  const initialQueryValues: Record<string, IQueryValue[]> = {
+    orientation: [],
+    order: [],
+    format: [],
   };
 
   const [query, setQuery] = useState(initialQueryValues);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
 
-  const setFilterQuery = (filterValues: any) => {
+  const setFilterQuery = (filterValues: Record<string, IQueryValue[]>) => {
     const { orientation, order, format } = filterValues;
     let filterQuery = "";
 
-    const currentQuery = (pointer: string, values: string) => {
-      return filterQuery
-        ? filterQuery.concat(`&${pointer}=${values}`)
-        : `&${pointer}=${values}`;
+    const currentQuery = (pointer: string, values: IQueryValue[]): string => {
+      const stringValues = Array.isArray(values)
+        ? values.map((value) => (value.value !== "all" ? value.value : "")).join(",")
+        : "";
+
+      return !stringValues.length
+        ? filterQuery
+        : filterQuery.length
+        ? filterQuery.concat(`&${pointer}=${stringValues}`)
+        : `&${pointer}=${stringValues}`;
     };
 
     if (orientation) {
@@ -49,30 +60,33 @@ const useFilterQuery = () => {
       filterQuery = currentQuery("format", format);
     }
 
-    return filterQuery;
+    setCurrentFilterQuery(filterQuery);
   };
 
-  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
     const { orientation, order, format } = query;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       orientation: pointer === "orientation" ? filter : orientation,
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
       format: pointer === "format" ? filter : format,
     };
 
     setQuery(filterValues);
+    setFilterQuery(filterValues);
+  };
 
-    return filterValues;
+  const resetFilterQuery = () => {
+    setQuery(initialQueryValues);
+    setCurrentFilterQuery("");
   };
 
   return {
     setFiltersSelection,
-    setFilterQuery
+    resetFilterQuery,
+    filterValues: query,
+    filterQuery: currentFilterQuery,
   };
 };
 
-export {
-  useSortedListStatus,
-  useFilterQuery
-};
+export { useSortedListStatus, useFilterQuery };

package/src/components/Gallery/index.tsx

@@ -3,8 +3,18 @@ import { connect } from "react-redux";
 
 import { galleryActions } from "@ax/containers/Gallery";
 import { IData, IIsLoading } from "@ax/containers/Gallery/reducer";
-import { IGetSiteImages, IImage, IRootState, ISite } from "@ax/types";
-import { Icon, Loader, Tabs, SearchField, EmptyState, ErrorToast, Notification } from "@ax/components";
+import { IGetSiteImages, IImage, IQueryValue, IRootState, ISite } from "@ax/types";
+import {
+  Icon,
+  Loader,
+  Tabs,
+  SearchField,
+  EmptyState,
+  ErrorToast,
+  Notification,
+  SearchTagsBar,
+  FilterTagsBar,
+} from "@ax/components";
 import { usePermission } from "@ax/hooks";
 
 import Orientation from "./GalleryFilters/Orientation";
@@ -38,8 +48,7 @@ const Gallery = (props: IProps): JSX.Element => {
 
   const galleryRef = useRef<HTMLDivElement>(null);
 
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
-  const { setFiltersSelection, setFilterQuery } = useFilterQuery();
+  const { setFiltersSelection, resetFilterQuery, filterQuery, filterValues } = useFilterQuery();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
   const [searchQuery, setSearchQuery] = useState<string>("");
   const isSearching = searchQuery.length > 0;
@@ -49,7 +58,7 @@ const Gallery = (props: IProps): JSX.Element => {
     site: galleryScope,
     page: data?.page,
     items: itemsPerPage,
-    query: currentFilterQuery,
+    query: filterQuery,
     search: searchQuery,
   });
 
@@ -93,36 +102,31 @@ const Gallery = (props: IProps): JSX.Element => {
     const params = getParams();
     getSiteImages({ ...params, page: firstPage });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentFilterQuery, searchQuery]);
+  }, [filterQuery, searchQuery]);
 
   const handleClick = (item: IImage) => () => {
-    if(item.id !== selectedImage?.id) {
+    if (item.id !== selectedImage?.id) {
       setSelectedImage(item);
     } else {
       setSelectedImage(null);
     }
-  }
+  };
 
   const setImage = (imageData: any) => {
-    const updatedImage = { ... selectedImage,...imageData };
+    const updatedImage = { ...selectedImage, ...imageData };
     getImageSelected(updatedImage);
     toggleModal();
   };
 
-  const sortItems = async (orderPointer: string, isAscending: boolean) => {
-    const sortedState = getSortedListStatus(orderPointer, isAscending);
+  const sortItems = (orderPointer: IQueryValue[], isAscending: boolean) => {
+    const sortedState = getSortedListStatus(orderPointer[0].value.toString(), 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) => {
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
-  };
+  const filterItems = (filterPointer: string, filtersSelected: IQueryValue[]) =>
+    setFiltersSelection(filterPointer, filtersSelected);
 
   const handleSelectedTab = (tab: string) => {
     if (tab !== selectedTab) {
@@ -155,7 +159,12 @@ const Gallery = (props: IProps): JSX.Element => {
           </S.Filters>
         </S.Header>
         <S.Search>
-          <SearchField onChange={setSearchQuery} placeholder="Type an image’s name, title, or #tag" />
+          <SearchField
+            onChange={setSearchQuery}
+            value={searchQuery}
+            placeholder="Type an image’s name, title, or #tag"
+            autoFocus={false}
+          />
         </S.Search>
         <S.GalleryWrapper ref={galleryRef}>
           {isGlobalTab && (
@@ -167,6 +176,15 @@ const Gallery = (props: IProps): JSX.Element => {
             </S.NotificationWrapper>
           )}
           <ErrorToast size="l" />
+          <S.SearchTags>
+            <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+            <FilterTagsBar
+              filters={filterValues}
+              setFilters={setFiltersSelection}
+              labels={{ orientation: "Orientation", format: "Type" }}
+              resetFilters={resetFilterQuery}
+            />
+          </S.SearchTags>
           {isLoading.init ? (
             <S.LoadingWrapper>
               <Loader name="circle" />

package/src/components/Gallery/style.tsx

@@ -56,8 +56,10 @@ export const GalleryWrapper = styled.div`
   background-color: ${p => p.theme.color.uiBackground01};
   overflow: auto;
   padding-right: ${gutter};
-  height: calc(${p => p.theme.spacing.xl} * 7 + ${gutter});
   position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 `;
 
 export const IconChecked = styled.div`
@@ -182,7 +184,7 @@ export const EmptyWrapper = styled.div`
   margin: 0 -${gutter};
   margin-top: -${gutter};
   border-right: 1px solid ${p => p.theme.color.uiLine};
-  min-height: calc(100% + ${gutter});
+  flex-grow: 1;
 `;
 
 export const NotificationWrapper = styled.div`
@@ -193,3 +195,14 @@ export const NotificationWrapper = styled.div`
   right: 0;
   z-index: 2;
 `;
+
+export const SearchTags = styled.div`
+  padding-left: ${p => p.theme.spacing.m};
+  padding-right: ${p => p.theme.spacing.m};
+  & > div:nth-child(1){
+    margin-top: ${p => p.theme.spacing.m};
+  }
+  & > div:nth-child(2){
+    margin-top: ${p => p.theme.spacing.xs};
+  }
+`;

package/src/components/MainWrapper/AppBar/index.tsx

@@ -46,6 +46,7 @@ const AppBar = (props: IProps): JSX.Element => {
     filterSearchAction,
     searchFilters,
     hasAnimation,
+    searchValue,
   } = props;
 
   const publishedTooltip: any = {
@@ -194,6 +195,7 @@ const AppBar = (props: IProps): JSX.Element => {
                 onChange={searchAction}
                 onFilterChange={filterSearchAction}
                 searchFilters={searchFilters}
+                value={searchValue}
                 closeOnInactive
               />
             </S.SearchWrapper>
@@ -294,6 +296,7 @@ export interface IAppBarProps {
   isFromEditor?: boolean;
   pageStatusActions?: any[];
   hasAnimation?: boolean;
+  searchValue?: string;
 }
 
 type IProps = IAppBarProps & RouteComponentProps;

package/src/components/MainWrapper/index.tsx

@@ -54,6 +54,7 @@ export interface IWrapperProps {
   };
   pageStatusActions?: any[];
   hasAnimation?: boolean;
+  searchValue?: string;
 }
 
 export default MainWrapper;

package/src/components/SearchTagsBar/index.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Button from "../Button";
+
+import * as S from "./style";
+
+const SearchTagsBar = (props: ISearchTagsBarProps): JSX.Element => {
+  const { query, setQuery } = props;
+
+  const tags = query.split(" ").filter((tag: string) => tag.trim().length > 0);
+
+  const deleteTag = (position: number) => {
+    const newTags = tags.filter((tag: string, index: number) => position !== index).join(" ");
+    setQuery(newTags);
+  };
+
+  const handleDeleteAll = () => setQuery("");
+
+  return tags.length > 0 ? (
+    <S.Wrapper>
+      <S.Text>Search result for</S.Text>
+      <S.TagList>
+        {tags.map((tag: string, index: number) => {
+          const handleDeleteTag = () => deleteTag(index);
+          return <S.StyledTag key={index} text={tag} color="#FFFFFF" onDeleteAction={handleDeleteTag} />;
+        })}
+      </S.TagList>
+      <S.ButtonWrapper>
+        <Button type="button" buttonStyle="minimal" icon="close" onClick={handleDeleteAll}>
+          Clear All
+        </Button>
+      </S.ButtonWrapper>
+    </S.Wrapper>
+  ) : (
+    <></>
+  );
+};
+
+export interface ISearchTagsBarProps {
+  query: string;
+  setQuery: (query: string) => void;
+}
+
+export default SearchTagsBar;

package/src/components/SearchTagsBar/style.tsx

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import Tag from "../Tag";
+
+const Wrapper = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  width: 100%;
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.m}`};
+  align-items: center;
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-right: ${(p) => p.theme.spacing.xs};
+  flex-shrink: 0;
+`;
+
+const StyledTag = styled(Tag)`
+  margin-right: ${(p) => p.theme.spacing.xs};
+`;
+
+const TagList = styled.div``;
+
+const ButtonWrapper = styled.div`
+  margin-left: auto;
+  flex-shrink: 0;
+`;
+
+export { Wrapper, TagList, Text, StyledTag, ButtonWrapper }

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

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
-import { areEquals, isNumber, isReqOk } from "@ax/helpers";
+import { areEquals, isReqOk } from "@ax/helpers";
 import { checkgroups } from "@ax/api";
-import { IFilterValue } from "@ax/types";
+import { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -18,11 +18,9 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
     },
   ];
 
-  const storedValue = value.split(",");
-  const parsedValue = storedValue.map((value) => (isNumber(value) ? parseInt(value) : value));
-  const [initialState] = useState(parsedValue);
   const selectAllOption = "all";
-  const [selectedValue, setSelectedValue] = useState([...initialState]);
+  const parsedValue = Array.isArray(value) && value.length ? value.map((val) => val.value) : [selectAllOption];
+  const [selectedValue, setSelectedValue] = useState(parsedValue);
   const [options, setOptions] = useState(filters);
 
   const getSelectCategories = async () => {
@@ -54,12 +52,21 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    const parsedValue = Array.isArray(value) ? value.map((val) => val.value) : [];
+    setSelectedValue(parsedValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   const setQuery = (selection: any) => {
     if (!selection.length) {
-      selection = initialState;
+      selection = [selectAllOption];
     }
     setSelectedValue(selection);
-    const queryFilters = selection.join(",");
+    const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
+      const label = options.find((opt: IFilterValue) => opt.value === value);
+      return { value, label: label?.title || "" };
+    });
     filterItems("categories", queryFilters);
   };
 
@@ -85,8 +92,8 @@ const CategoryFilter = (props: ICategoryFilterProps): JSX.Element => {
 };
 
 export interface ICategoryFilterProps {
-  filterItems(pointer: string, filter: string): void;
-  value: string;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value: IQueryValue[];
   structuredData: any;
   siteID: number | null;
 }

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals } from "@ax/helpers";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -17,13 +18,12 @@ const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
     multipleSelection = true,
   } = props;
 
-  const [selectedValue, setSelectedValue] = useState(initialState);
+  const arrayValues = Array.isArray(value) && value.length ? value.map((val) => val.value) : initialState;
+  const [selectedValue, setSelectedValue] = useState(arrayValues);
 
   useEffect(() => {
-    if (value) {
-      const valueArray = typeof value === "string" ? value.split(",") : value;
-      setSelectedValue(valueArray);
-    }
+    const arrayValues = Array.isArray(value) && value.length ? value.map((val) => val.value) : initialState;
+    setSelectedValue(arrayValues);
   }, [value]);
 
   const setFilterQuery = (selection: any) => {
@@ -31,7 +31,10 @@ const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
       selection = initialState;
     }
     setSelectedValue(selection);
-    const queryFilters = selection.join(",");
+    const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
+      const label = filters.find((opt: IFilter) => opt.value === value);
+      return { value, label: label?.title || "" };
+    });
     filterItems(pointer, queryFilters);
   };
 
@@ -47,7 +50,7 @@ const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
   );
 
   return (
-    <FloatingMenu Button={Header} closeOnSelect={true} isCheckGroup={true} position="center">
+    <FloatingMenu Button={Header} closeOnSelect={!multipleSelection} isCheckGroup={true} position="center">
       <ListTitle>{description}</ListTitle>
       <S.ChecksWrapper>
         <CheckGroup
@@ -71,10 +74,10 @@ interface IFilter {
 interface ITypeFilterProps {
   label: string;
   description: string;
-  filterItems(pointer: string, filter: string): void;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
   filters: IFilter[];
   pointer: string;
-  value: any;
+  value: IQueryValue[];
   selectAllOption: string;
   initialState: string[];
   multipleSelection?: boolean;

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

@@ -1,13 +1,14 @@
 import React from "react";
 
 import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
 const DateFilter = (props: IDateFilterProps): JSX.Element => {
   const { sortItems, sortedState } = props;
   const { isAscending, sortedByDate } = sortedState;
-  const sortByModifiedDate = (isAscending: boolean) => sortItems("date", isAscending);
+  const sortByModifiedDate = (isAscending: boolean) => sortItems([{ value: "date", label: "date" }], isAscending);
 
   const sortOldestModifiedDate = () => sortByModifiedDate(true);
   const sortMostRecentModifiedDate = () => sortByModifiedDate(false);
@@ -45,7 +46,7 @@ const DateFilter = (props: IDateFilterProps): JSX.Element => {
 
 export interface IDateFilterProps {
   sortedState: any;
-  sortItems(orderPointer: string, isAscendent: boolean): any;
+  sortItems(orderPointer: IQueryValue[], isAscendent: boolean): any;
 }
 
 export default DateFilter;

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

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -8,9 +9,8 @@ const LastAccessFilter = (props: ILastAccessFilterProps): JSX.Element => {
   const { sortItems, sortedState } = props;
   const { isAscending, sortedByLastAccess } = sortedState;
 
-  const sortAscendingLastAccess = () => sortItems("lastAccess", true);
-  const sortDescendingLastAccess = () => sortItems("lastAccess", false);
-
+  const sortAscendingLastAccess = () => sortItems([{ value: "lastAccess", label: "lastAccess" }], true);
+  const sortDescendingLastAccess = () => sortItems([{ value: "lastAccess", label: "lastAccess" }], false);
 
   const SortedStateArrow = () =>
     isAscending ? <Icon name="FullArrowUp" size="16" /> : <Icon name="FullArrowDown" size="16" />;
@@ -45,7 +45,7 @@ const LastAccessFilter = (props: ILastAccessFilterProps): JSX.Element => {
 
 export interface ILastAccessFilterProps {
   sortedState: any;
-  sortItems(orderPointer: string, isAscendent: boolean): void;
+  sortItems(orderPointer: IQueryValue[], isAscendent: boolean): void;
   urlSorting?: boolean;
 }
 

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

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from "react";
 
 import { CheckGroup, Icon, FloatingMenu, ListTitle } from "@ax/components";
 import { checkgroups } from "@ax/api";
-import { areEquals, isNumber, isReqOk } from "@ax/helpers";
-import { IFilterValue, IPageLiveStatus } from "@ax/types";
+import { areEquals, isReqOk } from "@ax/helpers";
+import { IFilterValue, IPageLiveStatus, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -18,16 +18,17 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
     },
   ];
 
-  const storedValue = value.split(",");
-  const parsedValue = storedValue.map((value) => (isNumber(value) ? parseInt(value) : value));
-  const [initialState] = useState(parsedValue);
+  const initialState = ["all"];
   const selectAllOption = "all";
-  const [selectedValue, setSelectedValue] = useState([...initialState]);
+  const pointer = "liveStatus";
+  const parsedValue = Array.isArray(value) && value.length ? value.map((value) => value.value) : initialState;
+  const [selectedValue, setSelectedValue] = useState(parsedValue);
   const [options, setOptions] = useState(filters);
   const basicStatus = ["offline", "active"];
 
   useEffect(() => {
-    setSelectedValue([...storedValue]);
+    const parsedValue = Array.isArray(value) && value.length ? value.map((value) => value.value) : initialState;
+    setSelectedValue(parsedValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
@@ -46,17 +47,18 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
   useEffect(() => {
     getLiveStatusValues()
       .then((items) => {
-        items.length > 0 && items.forEach((item: IPageLiveStatus) => {
-          const newFilter = {
-            name: item.status,
-            value: item.status,
-            title: item.title,
-            icon: item.status,
-          };
-          if ((hasBasicStatus && basicStatus.includes(newFilter.value)) || !hasBasicStatus) {
-            filters.push(newFilter);
-          }
-        });
+        items.length > 0 &&
+          items.forEach((item: IPageLiveStatus) => {
+            const newFilter = {
+              name: item.status,
+              value: item.status,
+              title: item.title,
+              icon: item.status,
+            };
+            if ((hasBasicStatus && basicStatus.includes(newFilter.value)) || !hasBasicStatus) {
+              filters.push(newFilter);
+            }
+          });
         setOptions(filters);
       })
       .catch((apiError) => console.log(apiError));
@@ -69,8 +71,10 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
       selection = [selectAllOption];
     }
     setSelectedValue(selection);
-    const queryFilters = selection.join(",");
-    const pointer = "liveStatus";
+    const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
+      const label = options.find((opt: IFilterValue) => opt.value === value);
+      return { value, label: label?.title || "" };
+    });
     filterItems(pointer, queryFilters);
   };
 
@@ -106,8 +110,8 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
 };
 
 export interface ILiveFilterProps {
-  filterItems(pointer: string, filter: string): void;
-  value: string;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value: IQueryValue[];
   hasBasicStatus?: boolean;
   isSite?: boolean;
 }

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

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -8,8 +9,8 @@ const NameFilter = (props: INameFilterProps): JSX.Element => {
   const { sortItems, sortedState, urlSorting, pointer = "title" } = props;
   const { isAscending, sortedByTitle, sortedByURL } = sortedState;
 
-  const sortByName = (isAscending: boolean) => sortItems(pointer, isAscending);
-  const sortAscendingURL = () => sortItems("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);
 
@@ -57,7 +58,7 @@ const NameFilter = (props: INameFilterProps): JSX.Element => {
 
 export interface INameFilterProps {
   sortedState: any;
-  sortItems(orderPointer: string, isAscendent: boolean): void;
+  sortItems(orderPointer: IQueryValue[], isAscendent: boolean): void;
   urlSorting?: boolean;
   pointer?: string;
 }