diff --git a/library/package.json b/library/package.json index 09b5637..b792c09 100644 --- a/library/package.json +++ b/library/package.json @@ -1,6 +1,6 @@ { "name": "@irontec/ivoz-ui", - "version": "1.3.2", + "version": "1.3.3", "description": "UI library used in ivozprovider", "license": "GPL-3.0", "main": "index.js", diff --git a/library/src/components/List/List.tsx b/library/src/components/List/List.tsx index b714284..fb1a20a 100644 --- a/library/src/components/List/List.tsx +++ b/library/src/components/List/List.tsx @@ -18,6 +18,7 @@ import { criteriaToArray, queryStringToCriteria } from './List.helpers'; import useQueryStringParams from './useQueryStringParams'; import useFirstColumn from './Content/hook/useFirstColumn'; import { isPropertyFk } from '../../services'; +import useEncodedQueryStringParams from './useEncodedQueryStringParams'; type ListProps = { path: string; @@ -82,6 +83,8 @@ const List = function (props: ListProps) { // Filters //////////////////////////// const currentQueryParams = useQueryStringParams(); + const currentEncodedQueryParams = useEncodedQueryStringParams(); + const filterBy: Array = []; if (currentRoute?.filterBy) { @@ -127,6 +130,7 @@ const List = function (props: ListProps) { setPrevReqQuerystring(reqQuerystring); const criteria = queryStringToCriteria(); + setQueryStringCriteria(criteria); setCriteriaIsReady(true); }, [ @@ -185,19 +189,20 @@ const List = function (props: ListProps) { } let reqPath = path; - if (currentQueryParams.length) { + + if (currentEncodedQueryParams.length) { reqPath = path + '?' + encodeURI( - [...currentQueryParams, ...filterValues, filterByStr].join('&') + [...currentEncodedQueryParams, ...filterValues, filterByStr].join('&') ); } else if (filterByStr || filterValues.length > 0) { reqPath = path + '?' + encodeURI([...filterValues, filterByStr].join('&')); } - let page = currentQueryParams.find( + let page = currentEncodedQueryParams.find( (str: string) => str.indexOf('_page=') === 0 ); if (!page) { @@ -207,7 +212,7 @@ const List = function (props: ListProps) { reqPath += `${glue}${page}`; } - let itemsPerPage = currentQueryParams.find( + let itemsPerPage = currentEncodedQueryParams.find( (str: string) => str.indexOf('_itemsPerPage=') === 0 ); if (!itemsPerPage) { @@ -217,7 +222,7 @@ const List = function (props: ListProps) { reqPath += `${glue}${itemsPerPage}`; } - let orderBy = currentQueryParams.find( + let orderBy = currentEncodedQueryParams.find( (str: string) => str.indexOf('_order[') === 0 ); if (!orderBy && entityService.getOrderBy() !== '') { @@ -272,7 +277,7 @@ const List = function (props: ListProps) { entityService, criteriaIsReady, path, - currentQueryParams, + currentEncodedQueryParams, apiGet, reqQuerystring, filterByStr, diff --git a/library/src/components/List/useEncodedQueryStringParams.tsx b/library/src/components/List/useEncodedQueryStringParams.tsx new file mode 100644 index 0000000..72d90f7 --- /dev/null +++ b/library/src/components/List/useEncodedQueryStringParams.tsx @@ -0,0 +1,32 @@ +/* eslint-disable no-script-url */ + +import { useState, useEffect } from 'react'; +import { CriteriaFilterValues } from './Filter/ContentFilterDialog'; +import { criteriaToArray, stringToCriteria } from './List.helpers'; + +const useEncodedQueryStringParams = function (): Array { + const [currentQueryParams, setCurrentQueryParams] = useState>( + [] + ); + const uri = location.search; + + useEffect(() => { + const uriCriteria: CriteriaFilterValues = stringToCriteria(uri); + + const result = []; + for (const criteria of uriCriteria) { + const encodedValue = encodeURIComponent(criteria.value); + + result.push({ + ...criteria, + value: encodedValue, + }); + } + + setCurrentQueryParams(criteriaToArray(result)); + }, [uri]); + + return currentQueryParams; +}; + +export default useEncodedQueryStringParams;