From c7d1069eaea6fe1122eaba64516b98575e8d1102 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 25 Apr 2023 18:30:47 +0200
Subject: [PATCH] fix(ui) - url search params remove [] for keys

---
 .../components/SessionList/SessionList.tsx    |  6 ++-
 frontend/app/utils/search.ts                  | 40 ++++++++++++-------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
index 88ab62d24..96d966ac4 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
@@ -97,8 +97,10 @@ function SessionList(props: Props) {
     // handle scroll position
     const { scrollY } = props;
     window.scrollTo(0, scrollY);
-    if (total === 0 && props.history.location.search === "") {
-      props.fetchSessions(null, true);
+    if (total === 0) {
+      setTimeout(() => {
+        props.fetchSessions(null, true);
+      }, 100);
     }
     props.fetchMetadata();
 
diff --git a/frontend/app/utils/search.ts b/frontend/app/utils/search.ts
index 3178966c9..d4ec3e5b9 100644
--- a/frontend/app/utils/search.ts
+++ b/frontend/app/utils/search.ts
@@ -3,17 +3,24 @@ import Period, { CUSTOM_RANGE } from 'Types/app/period';
 import Filter from 'Types/filter/filter';
 import { filtersMap } from 'Types/filter/newFilter';
 
-export const createUrlQuery = (filter: any) => {
-  const query = [];
+type QueryItem = {
+  key: any;
+  value: string;
+};
 
-  for (const f of filter.filters) {
+export const createUrlQuery = (filter: { filters: any[]; rangeValue: string; startDate?: string; endDate?: string }) => {
+  const query: QueryItem[] = [];
+
+  filter.filters.forEach((f: any) => {
     if (!f.value.length) {
-      continue;
+      return;
     }
 
     let str = `${f.operator}|${f.value.join('|')}`;
     if (f.hasSource) {
-      str = `${str}^${f.sourceOperator ? f.sourceOperator : ''}|${f.source ? f.source.join('|') : ''}`;
+      const sourceOperator = f.sourceOperator || '';
+      const source = f.source ? f.source.join('|') : '';
+      str = `${str}^${sourceOperator}|${source}`;
     }
 
     let key: any = setQueryParamKeyFromFilterkey(f.key);
@@ -21,20 +28,21 @@ export const createUrlQuery = (filter: any) => {
       key = [f.key];
     }
 
-    query.push({ key: key + '[]', value: str });
-  }
+    query.push({ key, value: str });
+  });
 
   if (query.length > 0) {
-    query.push({ key: 'range[]', value: filter.rangeValue });
+    query.push({ key: 'range', value: filter.rangeValue });
     if (filter.rangeValue === CUSTOM_RANGE) {
-      query.push({ key: 'rStart[]', value: filter.startDate });
-      query.push({ key: 'rEnd[]', value: filter.endDate });
+      query.push({ key: 'rStart', value: filter.startDate! });
+      query.push({ key: 'rEnd', value: filter.endDate! });
     }
   }
 
   return query.map(({ key, value }) => `${key}=${value}`).join('&');
 };
 
+
 export const getFiltersFromQuery = (search: string, filter: any) => {
   if (!search || filter.filters.size > 0) {
     return;
@@ -76,20 +84,21 @@ const getFiltersFromEntries = (entires: any) => {
       }
 
       if (!filter) {
-        return
+        return;
       }
 
       filter.value = valueArr;
       filter.operator = operator;
-      if (filter.icon === "filters/metadata") {
+      if (filter.icon === 'filters/metadata') {
         filter.source = filter.type;
         filter.type = 'MULTIPLE';
       } else {
         filter.source = sourceArr && sourceArr.length > 0 ? sourceArr : null;
         filter.sourceOperator = !!sourceOperator ? decodeURI(sourceOperator) : null;
       }
-      
-      if (!filter.filters || filter.filters.size === 0) { // TODO support subfilters in url
+
+      if (!filter.filters || filter.filters.size === 0) {
+        // TODO support subfilters in url
         filters.push(filter);
       }
     });
@@ -118,7 +127,8 @@ function getQueryObject(search: any) {
     .split('&')
     .map((item: any) => {
       let [key, value] = item.split('=');
-      return { key: key.slice(0, -2), value: decodeURI(value) };
+      key = key.replace('[]', '');
+      return { key: key, value: decodeURI(value) };
     });
   return jsonArray;
 }