@griddo/ax 10.3.23 → 10.3.25

package/src/modules/Content/BulkHeader/TableHeader/index.tsx

@@ -11,7 +11,7 @@ import {
   LiveFilter,
   TranslationsFilter,
 } from "@ax/components";
-import { IColumn } from "@ax/types";
+import { IColumn, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -84,13 +84,25 @@ const TableHeader = (props: IProps): JSX.Element => {
       </S.CheckHeader>
       {isStructuredData ? (
         <>
-          <S.NameHeader>Name</S.NameHeader>
-          <S.LiveHeader>Live</S.LiveHeader>
-          <S.StatusHeader>Status</S.StatusHeader>
-          <S.TransHeader>Translations</S.TransHeader>
-          <S.ActionsHeader>
-            <TableCounter totalItems={totalItems} />
-          </S.ActionsHeader>
+          <S.NameWrapper>
+            <NameFilter sortItems={sortItems} sortedState={sortedListStatus} />
+          </S.NameWrapper>
+          {activeColumns.includes("live") && (
+            <S.HeaderWrapper>
+              <LiveFilter filterItems={filterItems} value={filterValues.liveStatus} hasBasicStatus={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>
+          )}
         </>
       ) : (
         <>
@@ -120,12 +132,12 @@ const TableHeader = (props: IProps): JSX.Element => {
           )}
           {activeColumns.includes("seo") && <S.SeoHeader>SEO</S.SeoHeader>}
           <S.GlobalMark />
-          <S.ActionsHeader>
-            <TableCounter totalItems={totalItems} />
-            <CustomizeFilters columns={columns} setColumns={setColumns} value={activeColumns} />
-          </S.ActionsHeader>
         </>
       )}
+      <S.ActionsHeader>
+        <TableCounter totalItems={totalItems} />
+        <CustomizeFilters columns={columns} setColumns={setColumns} value={activeColumns} />
+      </S.ActionsHeader>
     </S.TableHeader>
   );
 };
@@ -136,8 +148,8 @@ interface IProps {
   totalItems: number;
   selectAllItems: () => void;
   checkState: Record<string, boolean>;
-  sortItems: (orderPointer: string, isAscending: boolean) => void;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   sortedListStatus: { isAscending: boolean; sortedByDate: boolean; sortedByTitle: boolean; sortedByURL: boolean };
   categoryColumns: any[];
   columns: Record<string, IColumn>;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { BulkSelectionOptions } from "@ax/components";
-import { IColumn } from "@ax/types";
+import { IColumn, IQueryValue } from "@ax/types";
 import { usePermission } from "@ax/hooks";
 import TableHeader from "./TableHeader";
 
@@ -91,8 +91,8 @@ interface IProps {
   totalItems: number;
   isScrolling: boolean;
   isStructuredData: boolean;
-  sortItems: (orderPointer: string, isAscending: boolean) => void;
-  filterItems: (filterPointer: string, filtersSelected: string) => void;
+  sortItems: (orderPointer: IQueryValue[], isAscending: boolean) => void;
+  filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
   sortedListStatus: any;
   isEditable?: boolean | null;
   filterValues: any;

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

@@ -467,27 +467,25 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
 
-  const CategoryColumns =
-    isGlobal &&
-    categoryColumns.map((col: any) => {
-      const type: any = structuredDataContent && structuredDataContent[col.key];
-      const categories: string[] = !type
-        ? []
-        : Array.isArray(type)
-        ? type.map((cat: any) => cat.label || cat.title)
-        : [type.label || type.title];
+  const CategoryColumns = categoryColumns.map((col: any) => {
+    const type: any = structuredDataContent && structuredDataContent[col.key];
+    const categories: string[] = !type
+      ? []
+      : Array.isArray(type)
+      ? type.map((cat: any) => cat.label || cat.title)
+      : [type.label || type.title];
 
-      return (
-        activeColumns.includes(col.key) && (
-          <CategoryCell
-            key={col.key}
-            categories={categories}
-            categoryColors={categoryColors}
-            addCategoryColors={addCategoryColors}
-          />
-        )
-      );
-    });
+    return (
+      activeColumns.includes(col.key) && (
+        <CategoryCell
+          key={col.key}
+          categories={categories}
+          categoryColors={categoryColors}
+          addCategoryColors={addCategoryColors}
+        />
+      )
+    );
+  });
 
   return (
     <>
@@ -504,11 +502,11 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
           )}
           <Tooltip
             content={[
-              <>
+              <React.Fragment key="page-title">
                 <strong>{page.title}</strong>
                 <br />
-              </>,
-              <>{fullPath.page}</>,
+              </React.Fragment>,
+              <React.Fragment key="page-slug">{fullPath.page}</React.Fragment>,
             ]}
             left={0}
             top={1}

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

@@ -178,6 +178,8 @@ const FlagsWrapper = styled.div`
   svg {
     margin-right: 2px;
     margin-bottom: -3px;
+    display: inline;
+    vertical-align: baseline;
   }
 `;
 

package/src/modules/Content/hooks.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { IQueryValue } from "@ax/types";
 
 const useSortedListStatus = () => {
   const sortedInitialState: {
@@ -21,21 +22,30 @@ const useSortedListStatus = () => {
   };
 };
 
-const useFilterQuery = (values?: Record<string, string> | null) => {
-  const initialQueryValues = {
-    type: "all",
-    translated: "all",
-    liveStatus: "all",
-    order: "",
-    categories: "all",
+const useFilterQuery = (values?: Record<string, IQueryValue[]> | null) => {
+  const initialQueryValues: Record<string, IQueryValue[]> = {
+    type: [{ value: "all", label: "All" }],
+    translated: [{ value: "all", label: "All" }],
+    liveStatus: [{ value: "all", label: "All" }],
+    order: [],
+    categories: [{ value: "all", label: "All" }],
   };
 
-  const getFilterQuery = (filterValues: any) => {
+  const getFilterQuery = (filterValues: Record<string, IQueryValue[]>): string => {
     const { type, translated, liveStatus, order, categories } = 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.length
+          ? values.map((value) => (value.value !== "all" ? value.value : "")).join(",")
+          : "";
+
+      return !stringValues.length
+        ? filterQuery
+        : filterQuery.length
+        ? filterQuery.concat(`&${pointer}=${stringValues}`)
+        : `&${pointer}=${stringValues}`;
     };
 
     if (type) {
@@ -67,14 +77,14 @@ const useFilterQuery = (values?: Record<string, string> | null) => {
   const initQuery = values ? getFilterQuery(values) : "";
   const [query, setQuery] = useState(initQuery);
 
-  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
     const { type, translated, liveStatus, order, categories } = state;
     const orderMethod = isAscendent ? "asc" : "desc";
-    const filterValues = {
+    const filterValues: Record<string, IQueryValue[]> = {
       type: pointer === "type" ? filter : type,
       translated: pointer === "translated" ? filter : translated,
       liveStatus: pointer === "liveStatus" ? filter : liveStatus,
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
       categories: pointer === "categories" ? filter : categories,
     };
 

package/src/modules/Content/index.tsx

@@ -20,8 +20,19 @@ import {
   IGetSitesParams,
   ISiteRoles,
   IPageLanguage,
+  IQueryValue,
 } from "@ax/types";
-import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState, Notification } from "@ax/components";
+import {
+  MainWrapper,
+  Modal,
+  TableList,
+  ErrorToast,
+  Toast,
+  EmptyState,
+  Notification,
+  SearchTagsBar,
+  FilterTagsBar,
+} from "@ax/components";
 import { isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
 
 import { appActions } from "@ax/containers/App";
@@ -256,7 +267,7 @@ const Content = (props: IProps): JSX.Element => {
     async (filterQuery?: any) => {
       const params = getParams();
       isStructuredData && params.siteID
-        ? await getStructuredDataContents(params, params.siteID)
+        ? await getStructuredDataContents({...params, filterQuery }, params.siteID)
         : getPages(params, filterQuery);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -290,7 +301,7 @@ const Content = (props: IProps): JSX.Element => {
     resetPageEditor();
     resetCurrentSiteErrorPages();
     fetchSitesByLang();
-    getIntegrations(currentSiteInfo.id);
+    getIntegrations(currentSiteInfo.id, {}, true);
     getDefaults();
     resetForm();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -301,7 +312,12 @@ const Content = (props: IProps): JSX.Element => {
       const isContentType = filter !== "unique-pages";
       const emptyState: IEmptyStateProps = {};
       const { liveStatus, translated, type } = filterValues;
-      const isSearching = searchQuery.length > 0 || liveStatus !== "all" || translated !== "all" || type !== "all";
+      const isSearching =
+        searchQuery.length > 0 ||
+        (liveStatus.length && liveStatus[0].value !== "all") ||
+        (translated.length && translated[0].value !== "all") ||
+        (type.length && type[0].value !== "all");
+
       if (isSearching) {
         emptyState.icon = "search";
         emptyState.title = "Oh! No Results Found";
@@ -499,15 +515,15 @@ const Content = (props: IProps): JSX.Element => {
 
   const bulkUnpublish = () => (isStructuredData ? setDataStatus(selectedItems.all, "draft") : bulkPublishAction(false));
 
-  const sortItems = async (orderPointer: string, isAscending: boolean) => {
+  const sortItems = (orderPointer: IQueryValue[], isAscending: boolean) => {
     setPage(firstPage);
-    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    const sortedState = getSortedListStatus(orderPointer[0].value.toString(), isAscending);
     setSortedListStatus(sortedState);
 
     setFiltersSelection("order", orderPointer, isAscending);
   };
 
-  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+  const filterItems = (filterPointer: string, filtersSelected: IQueryValue[]) => {
     setPage(firstPage);
     setFiltersSelection(filterPointer, filtersSelected);
   };
@@ -794,6 +810,13 @@ const Content = (props: IProps): JSX.Element => {
   const notEditableText =
     "Sorry, this content cannot be edited because it comes from an external source or belongs to a preconfigured system.";
 
+  const filterLabels = {
+    type: "Type",
+    liveStatus: "Live",
+    translated: "Translated",
+    categories: "Category",
+  };
+
   return (
     <MainWrapper
       title={title}
@@ -803,6 +826,7 @@ const Content = (props: IProps): JSX.Element => {
       rightButton={rightButtonProps}
       searchAction={setSearchQuery}
       errors={errors}
+      searchValue={searchQuery}
     >
       <S.ContentListWrapper>
         <ContentFilters current={filter} dynamicValues={structuredData} resetFilter={resetFilter} />
@@ -835,8 +859,17 @@ const Content = (props: IProps): JSX.Element => {
             hasFixedHeader={true}
             tableRef={tableRef}
           >
+            <S.SearchTags>
+              <SearchTagsBar query={searchQuery} setQuery={setSearchQuery} />
+              <FilterTagsBar
+                filters={filterValues}
+                setFilters={setFiltersSelection}
+                resetFilters={resetFilterQuery}
+                labels={filterLabels}
+              />
+            </S.SearchTags>
             {!isEmpty ? (
-              content
+              <>{content}</>
             ) : (
               <S.EmptyWrapper>
                 <EmptyState {...emptyStateProps} />
@@ -938,9 +971,9 @@ interface IDispatchProps {
   restorePage(id: number | number[]): Promise<boolean>;
   getDataPack: (id: string) => Promise<void>;
   resetCurrentSiteErrorPages: () => Promise<void>;
-  getIntegrations(site: number): Promise<void>;
+  getIntegrations(site: number, params?: any, skipLoading?: boolean): Promise<void>;
   getSitesByLang(params: IGetSitesParams): Promise<void>;
-  setContentFilters(contentFilters: Record<string, string> | null): void;
+  setContentFilters(contentFilters: Record<string, IQueryValue[]> | null): void;
   deleteAndRemoveFromSiteBulk(pageIds: number[], globalPageIds: number[]): Promise<boolean>;
   checkUserSession(): Promise<void>;
   getDefaults(): Promise<void>;
@@ -1008,7 +1041,7 @@ interface IPagesProps {
   sitesByLang: ISite[];
   user: IUser | null;
   skipReviewOnPublish?: boolean;
-  contentFilters: Record<string, string> | null;
+  contentFilters: Record<string, IQueryValue[]> | null;
   error: IError;
 }
 

package/src/modules/Content/style.tsx

@@ -46,4 +46,22 @@ const NotificationWrapper = styled.div`
   width: 100%;
 `;
 
-export { ContentListWrapper, TableWrapper, PaginationWrapper, EmptyWrapper, ModalContent, SelectWrapper, NotificationWrapper };
+const SearchTags = styled.div`
+  & > div:nth-child(1) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+  & > div:nth-child(2) {
+    margin-bottom: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+export {
+  ContentListWrapper,
+  TableWrapper,
+  PaginationWrapper,
+  EmptyWrapper,
+  ModalContent,
+  SelectWrapper,
+  NotificationWrapper,
+  SearchTags,
+};

package/src/modules/FileDrive/Breadcrumb/style.tsx

@@ -4,7 +4,7 @@ const BreadcrumbGroup = styled.div`
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  padding: ${p => `${p.theme.spacing.s} ${p.theme.spacing.m} 0 ${p.theme.spacing.m}`};
+  padding-top: ${p => p.theme.spacing.s};
 `;
 
 const BreadcrumbItem = styled.div<{isLastItem: boolean}>`

package/src/modules/FileDrive/FileDragAndDrop/index.tsx

@@ -54,9 +54,10 @@ const FileDragAndDrop = (props: IProps) => {
     setInDropZone(true);
   };
 
-  const checkType = (type: string) => {
-    for (const i in validFormats) {
-      if (type.includes(validFormats[i])) return true;
+  const checkType = (fileName: string) => {
+    const fileNameArray = fileName.split(".");
+    if(validFormats.includes(fileNameArray[fileNameArray.length - 1])){
+      return true;
     }
     return false;
   };
@@ -64,7 +65,7 @@ const FileDragAndDrop = (props: IProps) => {
   const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
     const files = Array.from(e.dataTransfer.files);
     if (handleMultipleUpload && files.length > 1) {
-      if (!files.every((file) => checkType(file.type))) {
+      if (!files.every((file) => checkType(file.name))) {
         uploadError(true, "Invalid format");
       } else {
         handleMultipleUpload(files);
@@ -78,7 +79,7 @@ const FileDragAndDrop = (props: IProps) => {
   const handleFilesUpload = async (e: any) => {
     const files: File[] = Array.from(e.currentTarget.files);
     if (handleMultipleUpload && files.length > 1) {
-      if (!files.every((file) => checkType(file.type))) {
+      if (!files.every((file) => checkType(file.name))) {
         uploadError(true, "Invalid format");
       } else {
         handleMultipleUpload(files);
@@ -90,7 +91,7 @@ const FileDragAndDrop = (props: IProps) => {
 
   const uploadFiles = async (files: File[]) => {
     try {
-      if (!files.every((file) => checkType(file.type))) {
+      if (!files.every((file) => checkType(file.name))) {
         uploadError(true, "Invalid format");
         return;
       }

package/src/modules/FileDrive/FileDragAndDrop/style.tsx

@@ -36,6 +36,8 @@ const DragSubtitle = styled.div`
 const DragIcon = styled.div`
   height: ${(p) => p.theme.spacing.l};
   margin-bottom: ${(p) => p.theme.spacing.s};
+  display: flex;
+  justify-content: center;
 `;
 
 const DropIcon = styled.div`

package/src/modules/FileDrive/FileFilters/SortBy/index.tsx

@@ -1,12 +1,16 @@
 import React from "react";
 
 import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
 const SortBy = ({ sortItems, sortedState }: ISortByProps): JSX.Element => {
   const { isAscending, sortedByName, sortedByDate, sortedBySize } = sortedState;
-  const sortBy = (pointer: string, isAscending: boolean) => sortItems(pointer, isAscending);
+
+  const sortBy = (pointer: string, isAscending: boolean) =>
+    sortItems([{ value: pointer, label: pointer }], isAscending);
+
   const sortAscendingName = () => sortBy("name", true);
   const sortDescendingName = () => sortBy("name", false);
   const sortAscendingDate = () => sortBy("date", true);
@@ -33,21 +37,33 @@ const SortBy = ({ sortItems, sortedState }: ISortByProps): JSX.Element => {
   return (
     <FloatingMenu Button={Header} position="center">
       <ListTitle>Name Sorting</ListTitle>
-      <ListItem isSelected={sortedByName && isAscending} onClick={sortAscendingName}>Ascendent</ListItem>
-      <ListItem isSelected={sortedByName && !isAscending} onClick={sortDescendingName}>Descendent</ListItem>
+      <ListItem isSelected={sortedByName && isAscending} onClick={sortAscendingName}>
+        Ascendent
+      </ListItem>
+      <ListItem isSelected={sortedByName && !isAscending} onClick={sortDescendingName}>
+        Descendent
+      </ListItem>
       <ListTitle>Date sorting</ListTitle>
-      <ListItem isSelected={sortedByDate && !isAscending} onClick={sortDescendingDate}>Newest first</ListItem>
-      <ListItem isSelected={sortedByDate && isAscending} onClick={sortAscendingDate}>Oldest first</ListItem>
+      <ListItem isSelected={sortedByDate && !isAscending} onClick={sortDescendingDate}>
+        Newest first
+      </ListItem>
+      <ListItem isSelected={sortedByDate && isAscending} onClick={sortAscendingDate}>
+        Oldest first
+      </ListItem>
       <ListTitle>Size sorting</ListTitle>
-      <ListItem isSelected={sortedBySize && isAscending} onClick={sortAscendingSize}>Ascendent</ListItem>
-      <ListItem isSelected={sortedBySize && !isAscending} onClick={sortDescendingSize}>Descendent</ListItem>
+      <ListItem isSelected={sortedBySize && isAscending} onClick={sortAscendingSize}>
+        Ascendent
+      </ListItem>
+      <ListItem isSelected={sortedBySize && !isAscending} onClick={sortDescendingSize}>
+        Descendent
+      </ListItem>
     </FloatingMenu>
   );
 };
 
 export interface ISortByProps {
   sortedState: ISortedListStatus;
-  sortItems(orderPointer: string, isAscendent: boolean): void;
+  sortItems(orderPointer: IQueryValue[], isAscendent: boolean): void;
 }
 
 interface ISortedListStatus {

package/src/modules/FileDrive/FileFilters/Type/index.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { FloatingMenu, Icon, ListTitle, CheckGroup } from "@ax/components";
 import { areEquals } from "@ax/helpers";
+import { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -10,25 +11,34 @@ const Type = (props: ITypeProps): JSX.Element => {
   const initialState = ["all"];
   const selectAllOption = "all";
   const pointer = "filterType";
-  const cleanValue = value ? value.replace(/docx|xlsx|csv/gi, "") : "all";
-  const arrayValues = cleanValue.split(",");
+  const arrayValues = Array.isArray(value) && value.length ? value.map((val) => val.value) : initialState;
   const [selectedValue, setSelectedValue] = useState(arrayValues);
 
+  const filters = [
+    { name: "all", value: "all", title: "ALL" },
+    { name: "pdf", value: "pdf", title: "PDF" },
+    { name: "doc", value: "doc", title: "DOC" },
+    { name: "xls", value: "xls", title: "XLS" },
+    { name: "csv", value: "csv", title: "CSV" },
+    { name: "zip", value: "zip", title: "ZIP" },
+  ];
+
+  useEffect(() => {
+    const arrayValues = Array.isArray(value) && value.length ? value.map((val) => val.value) : initialState;
+    setSelectedValue(arrayValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   const setQuery = (selection: any) => {
     if (!selection.length) {
       selection = initialState;
     }
     setSelectedValue(selection);
-    const queryFilters = selection.join(",");
-
-    var mapObj: Record<string, string> = {
-      doc: "doc,docx",
-      xls: "xls,xlsx,csv",
-    };
-
-    const fullFilters = queryFilters.replace(/doc|xls/gi, (matched: string) => mapObj[matched]);
-
-    filterItems(pointer, fullFilters);
+    const queryFilters: IQueryValue[] = selection.map((value: string | number) => {
+      const label = filters.find((opt: IFilterValue) => opt.value === value);
+      return { value, label: label?.title || "" };
+    });
+    filterItems(pointer, queryFilters);
   };
 
   const isActive = !areEquals(selectedValue, initialState);
@@ -45,13 +55,7 @@ const Type = (props: ITypeProps): JSX.Element => {
     </S.Type>
   );
 
-  const filters = [
-    { name: "all", value: "all", title: "ALL" },
-    { name: "pdf", value: "pdf", title: "PDF" },
-    { name: "doc", value: "doc", title: "DOC, DOCX" },
-    { name: "xls", value: "xls", title: "XLS, XLSX, CSV" },
-    { name: "zip", value: "zip", title: "ZIP" },
-  ];
+
 
   return (
     <FloatingMenu Button={Header} position="center" closeOnSelect={false}>
@@ -70,8 +74,8 @@ const Type = (props: ITypeProps): JSX.Element => {
 };
 
 export interface ITypeProps {
-  filterItems(pointer: string, filter: string): void;
-  value?: string;
+  filterItems(pointer: string, filter: IQueryValue[]): void;
+  value?: IQueryValue[];
 }
 
 export default Type;

package/src/modules/FileDrive/hooks.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { IQueryValue } from "@ax/types";
 
 const useSortedListStatus = () => {
   const sortedInitialState: {
@@ -22,20 +23,29 @@ const useSortedListStatus = () => {
 };
 
 const useFilterQuery = () => {
-  const initialQueryValues = {
-    order: "",
-    filterType: "all",
-    filterUsage: "",
+  const initialQueryValues: Record<string, IQueryValue[]> = {
+    order: [],
+    filterType: [],
+    filterUsage: [],
   };
 
   const [query, setQuery] = useState(initialQueryValues);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
 
-  const setFilterQuery = (filterValues: any) => {
+  const setFilterQuery = (filterValues: Record<string, IQueryValue[]>) => {
     const { order, filterType, filterUsage } = 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 (order) {
@@ -50,27 +60,32 @@ const useFilterQuery = () => {
       filterQuery = currentQuery("filterUsage", filterUsage);
     }
 
-    return filterQuery;
+    setCurrentFilterQuery(filterQuery);
   };
 
-  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+  const setFiltersSelection = (pointer: string, filter: IQueryValue[], isAscendent?: boolean) => {
     const { order, filterType, filterUsage } = query;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
-      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      order: pointer === "order" ? [{ value: `${filter[0].value}-${orderMethod}`, label: filter[0].label }] : order,
       filterType: pointer === "filterType" ? filter : filterType,
       filterUsage: pointer === "filterUsage" ? filter : filterUsage,
     };
 
+    setFilterQuery(filterValues);
     setQuery(filterValues);
-
-    return filterValues;
   };
 
+  const resetFilterQuery = () => {
+    setQuery(initialQueryValues);
+    setCurrentFilterQuery("");
+  }
+
   return {
     setFiltersSelection,
-    setFilterQuery,
+    resetFilterQuery,
     filterValues: query,
+    filterQuery: currentFilterQuery,
   };
 };