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/FilterUtils.res

@@ -20,3 +20,72 @@ let updateURLWithDefaultFilter = (~path, ~filterParam, ~filterString) => {
     RescriptReactRouter.replace(finalUrl)
   }
 }
+
+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 parseUrl = url => {
+  url
+  ->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.Dict.fromArray
+}
+
+let useUpdateFilterObject = (~index: string) => {
+  let filters = useFiltersValue(~index)
+  let setFilters = useAddFilters(~index)
+
+  let updateFilter = (~dict: Js.Dict.t<string>) => {
+    let currentSearchParamsDict = filters->parseUrl
+
+    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

@@ -92,7 +92,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 +615,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]

src/context/AnalyticsUrlUpdaterContext.res → src/context/FilterContext.res

@@ -1,49 +1,37 @@
-let defaultValue: Js.Dict.t<string> = Js.Dict.empty()
-let setDefaultValue: Js.Dict.t<string> => unit = _dict => ()
-let nameSpace: string = ""
-let setDefaultNameSpace: string => unit = _ => ()
-
-type urlUpdater = {
+type filterUpdater = {
+  index: string,
   filterValue: Js.Dict.t<string>,
   updateExistingKeys: Js.Dict.t<string> => unit,
   removeKeys: array<string> => unit,
   filterValueJson: Js.Dict.t<Js.Json.t>,
   reset: unit => unit,
 }
 
-let urlUpdater = {
+let filterUpdater = {
+  index: "",
   filterValue: Js.Dict.empty(),
   updateExistingKeys: _dict => (),
   removeKeys: _arr => (),
   filterValueJson: Js.Dict.empty(),
   reset: () => (),
 }
 
-let urlUpdaterContext = React.createContext(urlUpdater)
+let filterContext = React.createContext(filterUpdater)
 
 module Provider = {
-  let make = React.Context.provider(urlUpdaterContext)
+  let make = React.Context.provider(filterContext)
 }
 
 @react.component
-let make = (~children) => {
-  let url = RescriptReactRouter.useUrl()
-  let searcParamsToDict =
-    url.search
-    ->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.Dict.fromArray
+let make = (~index, ~children) => {
+  open FilterUtils
+  let filterString = useFiltersValue(~index)
+  let searcParamsToDict = filterString->parseUrl
 
-  let (urlDict, setUrlDict) = React.useState(_ => searcParamsToDict)
-  let updateUrl = React.useMemo2(() => {
-    let updateUrl = (dict: Js.Dict.t<string>) => {
-      setUrlDict(prev => {
+  let (filterDict, setfilterDict) = React.useState(_ => searcParamsToDict)
+  let updateFilter = React.useMemo2(() => {
+    let updateFilter = (dict: Js.Dict.t<string>) => {
+      setfilterDict(prev => {
         let prevDictArr =
           prev
           ->Js.Dict.entries
@@ -76,11 +64,11 @@ let make = (~children) => {
     }
 
     let reset = () => {
-      setUrlDict(_ => Js.Dict.empty())
+      setfilterDict(_ => Js.Dict.empty())
     }
 
     let removeKeys = (arr: array<string>) => {
-      setUrlDict(prev => {
+      setfilterDict(prev => {
         let updatedDict =
           prev->Js.Dict.entries->Js.Array2.copy->Js.Dict.fromArray->DictionaryUtils.deleteKeys(arr)
         if DictionaryUtils.equalDicts(updatedDict, prev) {
@@ -91,10 +79,11 @@ let make = (~children) => {
       })
     }
     {
-      filterValue: urlDict,
-      updateExistingKeys: updateUrl,
+      index,
+      filterValue: filterDict,
+      updateExistingKeys: updateFilter,
       removeKeys,
-      filterValueJson: urlDict
+      filterValueJson: filterDict
       ->Js.Dict.entries
       ->Js.Array2.map(item => {
         let (key, value) = item
@@ -103,7 +92,7 @@ let make = (~children) => {
       ->Js.Dict.fromArray,
       reset,
     }
-  }, (urlDict, setUrlDict))
+  }, (filterDict, setfilterDict))
 
-  <Provider value={updateUrl}> children </Provider>
+  <Provider value={updateFilter}> children </Provider>
 }