feat: Multi filters support

src/components/DynamicChart.res

@@ -376,7 +376,7 @@ let make = (
   }
 
   let currentTheme = ThemeProvider.useTheme()
-  let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
+  let {filterValue} = React.useContext(FilterContext.filterContext)
   let (_switchToMobileView, setSwitchToMobileView) = React.useState(_ => false)
   let (selectedTabState, setSelectedTabState) = React.useState(_ => selectedTab)
 

src/components/DynamicFilter.res

@@ -170,8 +170,8 @@ let make = (
   let defaultFilters = ""->Js.Json.string
   let (showModal, setShowModal) = React.useState(_ => false)
 
-  let {updateExistingKeys, filterValue, removeKeys} = React.useContext(
-    AnalyticsUrlUpdaterContext.urlUpdaterContext,
+  let {index, updateExistingKeys, filterValue, removeKeys} = React.useContext(
+    FilterContext.filterContext,
   )
 
   let currentCustomFilterValue =
@@ -219,6 +219,7 @@ let make = (
 
   <div className="flex-1 ml-1">
     <RemoteFilter
+      index
       defaultFilters
       fixedFilters=initialFixedFilters
       requiredSearchFieldsList=[]

src/components/DynamicSingleStat.res

@@ -126,8 +126,9 @@ let make = (
   ~statThreshold=?,
   ~wrapperClass=?,
 ) => {
+  let {filterValueJson} = React.useContext(FilterContext.filterContext)
   let fetchApi = AuthHooks.useApiFetcher()
-  let getAllFilter = UrlUtils.useGetFilterDictFromUrl("")
+  let getAllFilter = filterValueJson
   let isMobileView = MatchMedia.useMobileChecker()
   let (showStats, setShowStats) = React.useState(_ => false)
 

src/components/DynamicTable.res

@@ -20,6 +20,7 @@ let useRemoteFilter = (~searchParams, ~remoteFilters, ~remoteOptions, ~mandatory
 
 @react.component
 let make = (
+  ~index,
   ~entity: EntityType.entityType<'colType, 't>,
   ~title,
   ~titleSize: NewThemeUtils.headingSize=Large,
@@ -375,6 +376,7 @@ let make = (
           <UIUtils.RenderIf condition=showRemoteFilter>
             <LabelVisibilityContext showLabel=false>
               <RemoteFilter
+                index
                 defaultFilters=entity.defaultFilters
                 requiredSearchFieldsList=entity.requiredSearchFieldsList
                 setOffset

src/components/DynamicTable.resi

@@ -6,6 +6,7 @@ let useRemoteFilter: (
 ) => Js.Json.t
 @react.component
 let make: (
+  ~index: string,
   ~entity: EntityType.entityType<'colType, 't>,
   ~title: Js.String.t,
   ~titleSize: NewThemeUtils.headingSize=?,

src/components/DynamicTabs.res

@@ -258,7 +258,8 @@ let make = (
   | None => _ => ()
   }
   let {addConfig, getConfig} = React.useContext(UserPrefContext.userPrefContext)
-  let getTabNames = UrlUtils.useGetFilterDictFromUrl(tabId)
+  let {filterValueJson} = React.useContext(FilterContext.filterContext)
+  let getTabNames = filterValueJson
   let getTitle = key => {
     (
       tabs

src/components/FilterUtils.res

@@ -1,22 +1,68 @@
-let generateDefaultUrl = dict => {
-  dict
-  ->Js.Dict.entries
-  ->Belt.Array.keepMap(entry => {
-    let (key, val) = entry
-
-    let strValue = RemoteFiltersUtils.getStrFromJson(key, val)
-    if strValue !== "" {
-      Some(`${key}=${strValue}`)
-    } else {
-      None
-    }
+let useFiltersObject = () => {
+  open HyperswitchAtom
+  filtersAtom
+  ->Recoil.useRecoilValueFromAtom
+  ->LogicUtils.safeParse
+  ->Js.Json.decodeObject
+  ->Belt.Option.getWithDefault(Js.Dict.empty())
+}
+
+let useFiltersValue = (~index) => {
+  open LogicUtils
+  open HyperswitchAtom
+  filtersAtom
+  ->Recoil.useRecoilValueFromAtom
+  ->safeParse
+  ->Js.Json.decodeObject
+  ->Belt.Option.getWithDefault(Js.Dict.empty())
+  ->Js.Dict.get(index)
+  ->Belt.Option.getWithDefault(""->Js.Json.string)
+  ->getStringFromJson("")
+}
+
+let useAddFilters = (~index) => {
+  open HyperswitchAtom
+  let filters = useFiltersObject()
+  let setFilters = filtersAtom->Recoil.useSetRecoilState
+
+  value => {
+    filters->Js.Dict.set(index, value->Js.Json.string)
+    setFilters(._ => filters->Js.Json.object_->Js.Json.stringify)
+  }
+}
+
+let parseFilterString = queryString => {
+  queryString
+  ->Js.Global.decodeURI
+  ->Js.String2.split("&")
+  ->Belt.Array.keepMap(str => {
+    let arr = str->Js.String2.split("=")
+    let key = arr->Belt.Array.get(0)->Belt.Option.getWithDefault("-")
+    let val = arr->Belt.Array.sliceToEnd(1)->Js.Array2.joinWith("=")
+    key === "" || val === "" ? None : Some((key, val))
   })
-  ->Js.Array2.joinWith("&")
+  ->Js.Dict.fromArray
 }
 
-let updateURLWithDefaultFilter = (~path, ~filterParam, ~filterString) => {
-  if path->Js.String2.length > 0 && filterParam->Js.String2.length == 0 {
-    let finalUrl = `${path}?${filterString}`
-    RescriptReactRouter.replace(finalUrl)
+let useUpdateFilterObject = (~index: string) => {
+  let filters = useFiltersValue(~index)
+  let setFilters = useAddFilters(~index)
+
+  let updateFilter = (~dict: Js.Dict.t<string>) => {
+    let currentSearchParamsDict = filters->parseFilterString
+
+    let searchParam =
+      dict
+      ->Js.Dict.entries
+      ->Js.Array2.map(item => {
+        let (key, value) = item
+        `${key}=${value}`
+      })
+      ->Js.Array2.joinWith("&")
+
+    if !DictionaryUtils.equalDicts(currentSearchParamsDict, dict) {
+      setFilters(searchParam)
+    }
   }
+  updateFilter
 }

src/components/RemoteFilter.res

@@ -110,16 +110,18 @@ module ModalUI = {
 }
 
 module ClearFilters = {
+  open FilterUtils
   @react.component
   let make = (
+    ~index,
     ~filterButtonStyle,
     ~defaultFilterKeys=[],
     ~clearFilters=?,
     ~count,
     ~isCountRequired=true,
     ~outsidefilter=false,
   ) => {
-    let url = RescriptReactRouter.useUrl()
+    let setFilters = useAddFilters(~index)
     let isMobileView = MatchMedia.useMobileChecker()
     let outerClass = if isMobileView {
       "flex items-center justify-end"
@@ -162,8 +164,7 @@ module ClearFilters = {
           })
           ->Js.Array2.joinWith("&")
 
-        let path = url.path->Belt.List.toArray->Js.Array2.joinWith("/")
-        RescriptReactRouter.replace(`/${path}?${searchStr}`)
+        setFilters(searchStr)
       }
     }
 
@@ -197,9 +198,10 @@ module ClearFilters = {
 }
 
 module AnalyticsClearFilters = {
+  open FilterUtils
   @react.component
-  let make = (~defaultFilterKeys=[], ~clearFilters=?, ~outsidefilter=false) => {
-    let url = RescriptReactRouter.useUrl()
+  let make = (~index, ~defaultFilterKeys=[], ~clearFilters=?, ~outsidefilter=false) => {
+    let setFilters = useAddFilters(~index)
     let formState: ReactFinalForm.formState = ReactFinalForm.useFormState(
       ReactFinalForm.useFormSubscription(["values", "initialValues"])->Js.Nullable.return,
     )
@@ -233,8 +235,7 @@ module AnalyticsClearFilters = {
           })
           ->Js.Array2.joinWith("&")
 
-        let path = url.path->Belt.List.toArray->Js.Array2.joinWith("/")
-        RescriptReactRouter.replace(`/${path}?${searchStr}`)
+        setFilters(searchStr)
       }
     }
 
@@ -521,6 +522,7 @@ module FilterModal = {
 
 @react.component
 let make = (
+  ~index,
   ~defaultFilters,
   ~fixedFilters: array<EntityType.initialFilters<'t>>=[],
   ~requiredSearchFieldsList,
@@ -590,17 +592,15 @@ let make = (
   }, [updatedSelectedList->Js.Json.stringify])
 
   let getNewQuery = DateRefreshHooks.useConstructQueryOnBasisOfOpt()
-  let url = RescriptReactRouter.useUrl()
   let (isButtonDisabled, setIsButtonDisabled) = React.useState(_ => false)
-  let queryStr = url.search
+  let queryStr = FilterUtils.useFiltersValue(~index)
 
   let totalFilters = selectedFiltersList->Js.Array2.length + localOptions->Js.Array2.length
   let (checkedFilters, setCheckedFilters) = React.useState(_ => [])
   let (clearFilterAfterRefresh, setClearFilterAfterRefresh) = React.useState(_ => false)
   let (count, setCount) = React.useState(_ => initalCount)
 
-  let url = RescriptReactRouter.useUrl()
-  let searchParams = disableURIdecode ? url.search : url.search->Js.Global.decodeURI
+  let searchParams = disableURIdecode ? queryStr : queryStr->Js.Global.decodeURI
 
   let isMobileView = MatchMedia.useMobileChecker()
 
@@ -918,6 +918,7 @@ let make = (
       <UIUtils.RenderIf
         condition={!hideFilters && fixedFilters->Js.Array2.length === 0 && showClearFilter}>
         <ClearFilters
+          index
           filterButtonStyle
           defaultFilterKeys
           ?clearFilters
@@ -1011,7 +1012,7 @@ let make = (
                       />
                       <UIUtils.RenderIf condition={count > 0 && filterHovered}>
                         <AnalyticsClearFilters
-                          defaultFilterKeys ?clearFilters outsidefilter={initalCount > 0}
+                          index defaultFilterKeys ?clearFilters outsidefilter={initalCount > 0}
                         />
                       </UIUtils.RenderIf>
                     </div>
@@ -1062,6 +1063,7 @@ let make = (
             }}
             {if !clearFilterAfterRefresh && hideFilters && count > 0 && !revampedFilter {
               <ClearFilters
+                index
                 filterButtonStyle
                 defaultFilterKeys
                 ?clearFilters
@@ -1135,6 +1137,7 @@ let make = (
                   />
                   {if showClearFilterButton && !hideFilters && count > 0 {
                     <ClearFilters
+                      index
                       filterButtonStyle
                       defaultFilterKeys
                       ?clearFilters

src/context/ChartContext.res

@@ -66,7 +66,8 @@ module Provider = {
 
 @react.component
 let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultFilter=?) => {
-  let getAllFilter = UrlUtils.useGetFilterDictFromUrl("")
+  let {filterValueJson} = React.useContext(FilterContext.filterContext)
+  let getAllFilter = filterValueJson
   let (activeTab, activeTabStr) = React.useMemo1(() => {
     let activeTabOptionalArr =
       getAllFilter->getOptionStrArrayFromDict(`${chartEntity.moduleName}.tabName`)
@@ -92,7 +93,7 @@ let make = (~children, ~chartEntity: DynamicChart.entity, ~chartId="", ~defaultF
   let (bottomChartDataLegendData, setBottomChartDataLegendData) = React.useState(_ => Loading)
 
   let getGranularity = LineChartUtils.getGranularityNewStr
-  let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
+  let {filterValue} = React.useContext(FilterContext.filterContext)
   let (currentTopMatrix, currentBottomMetrix) = chartEntity.currentMetrics
   let (startTimeFilterKey, endTimeFilterKey) = chartEntity.dateFilterKeys
   let defaultFilters = [startTimeFilterKey, endTimeFilterKey]
@@ -615,7 +616,7 @@ module SDKAnalyticsChartContext = {
     let bottomChartDataLegendData = Loading
 
     let getGranularity = LineChartUtils.getGranularityNewStr
-    let {filterValue} = React.useContext(AnalyticsUrlUpdaterContext.urlUpdaterContext)
+    let {filterValue} = React.useContext(FilterContext.filterContext)
     let (currentTopMatrix, currentBottomMetrix) = chartEntity.currentMetrics
     let (startTimeFilterKey, endTimeFilterKey) = chartEntity.dateFilterKeys
     let defaultFilters = [startTimeFilterKey, endTimeFilterKey]