From ad2ecc167cedd21d2973e2e47e7be4b592f50931 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 17 Apr 2023 11:59:29 +0200
Subject: [PATCH] fix(ui) - search url to wait for metadata to load (#1172)

---
 .../shared/SessionSearch/SessionSearch.tsx    |  6 ++----
 .../app/hooks/useSessionSearchQueryHandler.ts | 19 ++++++++++++-------
 frontend/app/utils/search.ts                  |  8 ++++----
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
index 1d25974cf..6d14b699f 100644
--- a/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
+++ b/frontend/app/components/shared/SessionSearch/SessionSearch.tsx
@@ -21,11 +21,11 @@ interface Props {
   updateFilter: typeof updateFilter;
 }
 function SessionSearch(props: Props) {
-  const { appliedFilter, saveRequestPayloads = false, metaLoading } = props;
+  const { appliedFilter, saveRequestPayloads = false, metaLoading = false } = props;
   const hasEvents = appliedFilter.filters.filter((i: any) => i.isEvent).size > 0;
   const hasFilters = appliedFilter.filters.filter((i: any) => !i.isEvent).size > 0;
 
-  useSessionSearchQueryHandler({ appliedFilter, applyFilter: props.updateFilter });
+  useSessionSearchQueryHandler({ appliedFilter, applyFilter: props.fetchSessions, loading: metaLoading });
 
   useEffect(() => {
     debounceFetch = debounce(() => props.fetchSessions(), 500);
@@ -89,11 +89,9 @@ function SessionSearch(props: Props) {
           <div className="border-t px-5 py-1 flex items-center -mx-2">
             <div>
               <FilterSelection filter={undefined} onFilterClick={onAddFilter}>
-                {/* <IconButton primaryText label="ADD STEP" icon="plus" /> */}
                 <Button
                   variant="text-primary"
                   className="mr-2"
-                  // onClick={() => setshowModal(true)}
                   icon="plus"
                 >
                   ADD STEP
diff --git a/frontend/app/hooks/useSessionSearchQueryHandler.ts b/frontend/app/hooks/useSessionSearchQueryHandler.ts
index 40b1e80cb..110b4b72b 100644
--- a/frontend/app/hooks/useSessionSearchQueryHandler.ts
+++ b/frontend/app/hooks/useSessionSearchQueryHandler.ts
@@ -5,29 +5,34 @@ import { createUrlQuery, getFiltersFromQuery } from 'App/utils/search';
 interface Props {
   appliedFilter: any;
   applyFilter: any;
+  loading: boolean;
 }
 
 const useSessionSearchQueryHandler = (props: Props) => {
-  const { appliedFilter, applyFilter } = props;
+  const { appliedFilter, applyFilter, loading } = props;
   const history = useHistory();
 
   useEffect(() => {
     const applyFilterFromQuery = () => {
-      const filter = getFiltersFromQuery(history.location.search, appliedFilter);
-      applyFilter(filter, true, false);
+      if (!loading) {
+        const filter = getFiltersFromQuery(history.location.search, appliedFilter);
+        applyFilter(filter, true, false);
+      }
     };
 
     applyFilterFromQuery();
-  }, []);
+  }, [loading]);
 
   useEffect(() => {
     const generateUrlQuery = () => {
-      const search: any = createUrlQuery(appliedFilter);
-      history.replace({ search });
+      if (!loading) {
+        const search: any = createUrlQuery(appliedFilter);
+        history.replace({ search });
+      }
     };
 
     generateUrlQuery();
-  }, [appliedFilter]);
+  }, [appliedFilter, loading]);
 
   return null;
 };
diff --git a/frontend/app/utils/search.ts b/frontend/app/utils/search.ts
index 292dc63b4..3178966c9 100644
--- a/frontend/app/utils/search.ts
+++ b/frontend/app/utils/search.ts
@@ -1,7 +1,7 @@
 import { getFilterKeyTypeByKey, setQueryParamKeyFromFilterkey } from 'Types/filter/filterType';
-import Period, { LAST_24_HOURS, LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } from 'Types/app/period';
+import Period, { CUSTOM_RANGE } from 'Types/app/period';
 import Filter from 'Types/filter/filter';
-import { filtersMap } from 'App/types/filter/newFilter';
+import { filtersMap } from 'Types/filter/newFilter';
 
 export const createUrlQuery = (filter: any) => {
   const query = [];
@@ -83,13 +83,13 @@ const getFiltersFromEntries = (entires: any) => {
       filter.operator = operator;
       if (filter.icon === "filters/metadata") {
         filter.source = filter.type;
-        filter.type = 'METADATA';
+        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) {
+      if (!filter.filters || filter.filters.size === 0) { // TODO support subfilters in url
         filters.push(filter);
       }
     });