escape search arguments

irontec · Apr 17, 2024 · 4f37208 · 4f37208
1 parent 91dfd71
commit 4f37208
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git 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
@@ -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<string> = [];
 
  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
@@ -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<string> {
+ const [currentQueryParams, setCurrentQueryParams] = useState<Array<string>>(
+ []
+ );
+ 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;