change(ui) - search url improvements

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;
 }

frontend/app/duck/search.js

@@ -367,6 +367,7 @@ export const addFilterByKeyAndValue =
             defaultFilter.sourceOperator = sourceOperator;
             defaultFilter.source = source;
         }
+
         dispatch(addFilter(defaultFilter));
     };