diff --git a/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx b/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx index f2624b460..1b14057a8 100644 --- a/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx +++ b/frontend/app/components/shared/SessionSearchQueryParamHandler/SessionSearchQueryParamHandler.tsx @@ -4,9 +4,12 @@ import { connect } from 'react-redux'; import { addFilterByKeyAndValue, addFilter } from 'Duck/search'; import { getFilterKeyTypeByKey, setQueryParamKeyFromFilterkey } from 'Types/filter/filterType'; import { filtersMap } from 'App/types/filter/newFilter'; +import Filter from 'Types/filter/filter'; +import { applyFilter } from 'Duck/search'; interface Props { appliedFilter: any; + applyFilter: any; addFilterByKeyAndValue: typeof addFilterByKeyAndValue; addFilter: typeof addFilter; } @@ -15,8 +18,9 @@ const SessionSearchQueryParamHandler = React.memo((props: Props) => { const history = useHistory(); const createUrlQuery = (filters: any) => { - const query: any = {}; + const query: any = []; filters.forEach((filter: any) => { + const item: any = {}; if (filter.value.length > 0) { const _key = setQueryParamKeyFromFilterkey(filter.key); if (_key) { @@ -24,55 +28,77 @@ const SessionSearchQueryParamHandler = React.memo((props: Props) => { if (filter.hasSource) { str = `${str}^${filter.sourceOperator}|${filter.source.join('|')}`; } - query[_key] = str; + item.key = _key + '[]'; + item.value = str; } else { let str = `${filter.operator}|${filter.value.join('|')}`; - query[filter.key] = str; + item.key = [filter.key] + '[]'; + item.value = str; } + + query.push(item); } + }); return query; }; - const addFilter = ([key, value]: [any, any]): void => { - if (value !== '') { - const filterKey = getFilterKeyTypeByKey(key); - const tmp = value.split('^'); - const valueArr = tmp[0].split('|'); - const operator = valueArr.shift(); - - const sourceArr = tmp[1] ? tmp[1].split('|') : []; - const sourceOperator = sourceArr.shift(); - // TODO validate operator - if (filterKey) { - props.addFilterByKeyAndValue(filterKey, valueArr, operator, sourceOperator, sourceArr); - } else { - const _filters: any = { ...filtersMap }; - const _filter = _filters[key]; - if (!!_filter) { - _filter.value = valueArr; - _filter.operator = operator; - _filter.source = sourceArr; - props.addFilter(_filter); - } - } - } - }; - const applyFilterFromQuery = () => { if (appliedFilter.filters.size > 0) { return; } const entires = getQueryObject(history.location.search); + const _filters: any = { ...filtersMap }; if (entires.length > 0) { - entires.forEach(addFilter); + const filters: any = []; + entires.forEach((item: any) => { + if (!item.key || !item.value) { return } + const filter: any = {} + const filterKey = getFilterKeyTypeByKey(item.key); + const tmp = item.value.split('^'); + const valueArr = tmp[0].split('|'); + const operator = valueArr.shift(); + const sourceArr = tmp[1] ? tmp[1].split('|') : []; + const sourceOperator = decodeURI(sourceArr.shift()); + + + if (filterKey) { + filter.type = filterKey; + filter.key = filterKey; + filter.value = valueArr; + filter.operator = operator; + filter.source = sourceArr; + filter.sourceOperator = sourceOperator; + filters.push(filter); + } else { + const _filter = _filters[item.key]; + + if (!!_filter) { + _filter.type = _filter.key; + _filter.key = _filter.key; + _filter.value = valueArr; + _filter.operator = operator; + _filter.source = sourceArr; + filter.sourceOperator = sourceOperator; + } + } + }); + const f = Filter({ filters }) + props.applyFilter(f); } }; const generateUrlQuery = () => { const query: any = createUrlQuery(appliedFilter.filters); - // const queryString = Object.entries(query).map(([key, value]) => `${key}=${value}`).join('&'); - const queryString = new URLSearchParams(query).toString(); + + let queryString = query.reduce((acc: any, curr: any, index: any) => { + acc += `${curr.key}=${curr.value}`; + if (index < query.length - 1) { + acc += '&'; + } + return acc; + }, ''); + history.replace({ search: queryString }); }; @@ -85,12 +111,13 @@ export default connect( (state: any) => ({ appliedFilter: state.getIn(['search', 'instance']), }), - { addFilterByKeyAndValue, addFilter } + { addFilterByKeyAndValue, addFilter, applyFilter } )(SessionSearchQueryParamHandler); function getQueryObject(search: any) { - const queryParams = Object.fromEntries( - Object.entries(Object.fromEntries(new URLSearchParams(search))) - ); - return Object.entries(queryParams); + let jsonArray = search.slice(1).split('&').map((item: any) => { + let [key, value] = item.split('='); + return {key: key.slice(0, -2), value}; + }); + return jsonArray; } diff --git a/frontend/app/duck/search.js b/frontend/app/duck/search.js index 9d26e19fe..ce4306cbb 100644 --- a/frontend/app/duck/search.js +++ b/frontend/app/duck/search.js @@ -367,6 +367,7 @@ export const addFilterByKeyAndValue = defaultFilter.sourceOperator = sourceOperator; defaultFilter.source = source; } + dispatch(addFilter(defaultFilter)); };