chore: Js.Json API removed - JSON Core API Used. (#311)

src/components/AdvancedSearchComponent.res

@@ -1,5 +1,5 @@
-let getSummary: Js.Json.t => EntityType.summary = json => {
-  switch json->Js.Json.decodeObject {
+let getSummary: JSON.t => EntityType.summary = json => {
+  switch json->JSON.Decode.object {
   | Some(dict) => {
       let rowsCount = LogicUtils.getArrayFromDict(dict, "rows", [])->Array.length
       let totalCount = LogicUtils.getInt(dict, "entries", 0)
@@ -20,24 +20,23 @@ let make = (
 ) => {
   let {getObjects, searchUrl: url} = entity
   let fetchApi = AuthHooks.useApiFetcher()
-  let initialValueJson = Js.Json.object_(Dict.make())
+  let initialValueJson = JSON.Encode.object(Dict.make())
   let showToast = ToastState.useShowToast()
   let (showModal, setShowModal) = React.useState(_ => false)
 
   let onSubmit = (values, form: ReactFinalForm.formApi) => {
     open Promise
 
-    fetchApi(url, ~bodyStr=Js.Json.stringify(values), ~method_=Fetch.Post, ())
+    fetchApi(url, ~bodyStr=JSON.stringify(values), ~method_=Fetch.Post, ())
     ->then(Fetch.Response.json)
     ->then(json => {
-      let jsonData = json->Js.Json.decodeObject->Option.flatMap(dict => dict->Dict.get("rows"))
+      let jsonData = json->JSON.Decode.object->Option.flatMap(dict => dict->Dict.get("rows"))
       let newData = switch jsonData {
       | Some(actualJson) => actualJson->getObjects->Array.map(obj => obj->Js.Nullable.return)
       | None => []
       }
 
-      let summaryData =
-        json->Js.Json.decodeObject->Option.flatMap(dict => dict->Dict.get("summary"))
+      let summaryData = json->JSON.Decode.object->Option.flatMap(dict => dict->Dict.get("summary"))
 
       let summary = switch summaryData {
       | Some(x) => x->getSummary
@@ -52,7 +51,7 @@ let make = (
       | None => ()
       }
       setShowModal(_ => false)
-      form.reset(Js.Json.object_(Dict.make())->Js.Nullable.return)
+      form.reset(JSON.Encode.object(Dict.make())->Js.Nullable.return)
       json->Js.Nullable.return->resolve
     })
     ->catch(_err => {
@@ -62,17 +61,17 @@ let make = (
     })
   }
 
-  let validateForm = (values: Js.Json.t) => {
-    let finalValuesDict = switch values->Js.Json.decodeObject {
+  let validateForm = (values: JSON.t) => {
+    let finalValuesDict = switch values->JSON.Decode.object {
     | Some(dict) => dict
     | None => Dict.make()
     }
     let keys = Dict.keysToArray(finalValuesDict)
     let errors = Dict.make()
     if keys->Array.length === 0 {
-      Dict.set(errors, "Please Choose One of the fields", ""->Js.Json.string)
+      Dict.set(errors, "Please Choose One of the fields", ""->JSON.Encode.string)
     }
-    errors->Js.Json.object_
+    errors->JSON.Encode.object
   }
   <div className="mr-2">
     <Button

src/components/AdvancedSearchModal.res

@@ -17,11 +17,11 @@ module AdvanceSearch = {
   ) => {
     let {optionalSearchFieldsList, requiredSearchFieldsList, detailsKey} = entity
     let fetchApi = AuthHooks.useApiFetcher()
-    let initialValueJson = Js.Json.object_(Dict.make())
+    let initialValueJson = JSON.Encode.object(Dict.make())
     let showToast = ToastState.useShowToast()
 
     let onSubmit = (values, _) => {
-      let otherQueries = switch values->Js.Json.decodeObject {
+      let otherQueries = switch values->JSON.Decode.object {
       | Some(dict) =>
         dict
         ->Dict.toArray
@@ -41,15 +41,15 @@ module AdvanceSearch = {
 
       open Promise
       open LogicUtils
-      fetchApi(finalUrl, ~bodyStr=Js.Json.stringify(initialValueJson), ~method_=Fetch.Get, ())
+      fetchApi(finalUrl, ~bodyStr=JSON.stringify(initialValueJson), ~method_=Fetch.Get, ())
       ->then(Fetch.Response.json)
       ->then(json => {
-        switch Js.Json.classify(json) {
-        | Js.Json.JSONObject(jsonDict) => {
+        switch JSON.Classify.classify(json) {
+        | Object(jsonDict) => {
             let statusStr = getString(jsonDict, "status", "FAILURE")
 
             if statusStr === "SUCCESS" {
-              let payloadDict = jsonDict->Dict.get(detailsKey)->Option.flatMap(Js.Json.decodeObject)
+              let payloadDict = jsonDict->Dict.get(detailsKey)->Option.flatMap(JSON.Decode.object)
 
               switch payloadDict {
               | Some(dict) => {
@@ -82,15 +82,15 @@ module AdvanceSearch = {
       })
     }
 
-    let validateForm = (values: Js.Json.t) => {
-      let valuesDict = switch values->Js.Json.decodeObject {
+    let validateForm = (values: JSON.t) => {
+      let valuesDict = switch values->JSON.Decode.object {
       | Some(dict) => dict->Dict.toArray->Dict.fromArray
       | None => Dict.make()
       }
       let errors = Dict.make()
       requiredSearchFieldsList->Array.forEach(key => {
         if Dict.get(valuesDict, key)->Option.isNone {
-          Dict.set(errors, key, "Required"->Js.Json.string)
+          Dict.set(errors, key, "Required"->JSON.Encode.string)
         }
       })
       let isSubmitEnabled = optionalSearchFieldsList->Array.some(key => {
@@ -101,11 +101,11 @@ module AdvanceSearch = {
         Dict.set(
           errors,
           optionalSearchFieldsList->Array.joinWith(","),
-          "Atleast One of Optional fields is Required"->Js.Json.string,
+          "Atleast One of Optional fields is Required"->JSON.Encode.string,
         )
       }
 
-      errors->Js.Json.object_
+      errors->JSON.Encode.object
     }
 
     <FormRenderer

src/components/CustomCharts/FunnelChart.res

@@ -12,7 +12,8 @@ let make = (
   let (size, widthClass, flexDirectionClass) = React.useMemo1(() => {
     isMobileView ? (0.16, "w-full", "flex-col") : (size, "w-1/2", "flex-row")
   }, [isMobileView])
-  let funnelData = data->Array.get(0)->Option.getOr(Js.Json.null)->LogicUtils.getDictFromJsonObject
+  let funnelData =
+    data->Array.get(0)->Option.getOr(JSON.Encode.null)->LogicUtils.getDictFromJsonObject
   let (hoverIndex, setHoverIndex) = React.useState(_ => -1.)
   let (selectedMetric, setSelectedMetric) = React.useState(_ => Volume)
   let length = metrics->Array.length->Float.fromInt

src/components/CustomCharts/HighchartBarChart.res

@@ -1,14 +1,14 @@
 module RawBarChart = {
   @react.component
-  let make = (~options: Js.Json.t) => {
+  let make = (~options: JSON.t) => {
     <Highcharts.BarChart highcharts={Highcharts.highchartsModule} options />
   }
 }
 
 module HighBarChart1D = {
   @react.component
   let make = (
-    ~rawData: array<Js.Json.t>,
+    ~rawData: array<JSON.t>,
     ~groupKey,
     ~isHrizonatalBar: bool=true,
     ~selectedMetrics: LineChartUtils.metricsConfig,
@@ -27,16 +27,16 @@ module HighBarChart1D = {
       )
     }, (rawData, groupKey, selectedMetrics.metric_name_db))
 
-    let barOption: Js.Json.t = React.useMemo2(() => {
-      let barOption: Js.Json.t = {
+    let barOption: JSON.t = React.useMemo2(() => {
+      let barOption: JSON.t = {
         "chart": Highcharts.makebarChart(
           ~chartType={isHrizonatalBar ? "bar" : "column"},
           ~backgroundColor=Js.Nullable.null,
           (),
         ),
         "title": {
           "text": "",
-          "style": Js.Json.object_(Dict.make()),
+          "style": JSON.Encode.object(Dict.make()),
         },
         "xAxis": {
           "categories": categories,

src/components/CustomCharts/HighchartHorizontalBarChart.res

@@ -1,6 +1,6 @@
 module RawHBarChart = {
   @react.component
-  let make = (~options: Js.Json.t) => {
+  let make = (~options: JSON.t) => {
     <HighchartsHorizontalBarChart.HBarChart
       highcharts={HighchartsHorizontalBarChart.highchartsModule} options
     />
@@ -59,7 +59,7 @@ let xLabelFormatter: Js_OO.Callback.arity1<xAxisRecord => string> = {
 
 @react.component
 let make = (
-  ~rawData: array<Js.Json.t>,
+  ~rawData: array<JSON.t>,
   ~groupKey,
   ~titleKey=?,
   ~selectedMetrics: LineChartUtils.metricsConfig,
@@ -76,7 +76,7 @@ let make = (
   }, (rawData, groupKey, selectedMetrics.metric_name_db))
   let titleKey = titleKey->Option.getOr(groupKey)
 
-  let barOption: Js.Json.t = React.useMemo2(() => {
+  let barOption: JSON.t = React.useMemo2(() => {
     let colors = {
       let length = barChartData->Array.length->Int.toFloat
       barChartData->Array.mapWithIndex((_data, i) => {

src/components/CustomCharts/HighchartPieChart.res

@@ -1,7 +1,7 @@
 %%raw(`require("./highcharts.css")`)
 module RawPieChart = {
   @react.component
-  let make = (~options: Js.Json.t) => {
+  let make = (~options: JSON.t) => {
     <HighchartsPieChart.PieChart highcharts={HighchartsPieChart.highchartsModule} options />
   }
 }
@@ -26,7 +26,7 @@ let formatter: Js_OO.Callback.arity1<yAxisRecord => string> = {
 
 @react.component
 let make = (
-  ~rawData: array<Js.Json.t>,
+  ~rawData: array<JSON.t>,
   ~groupKey,
   ~titleKey=?,
   ~selectedMetrics: LineChartUtils.metricsConfig,
@@ -45,7 +45,7 @@ let make = (
   let opacity = theme === Dark ? "0.5" : "1"
   let titleKey = titleKey->Option.getOr(groupKey)
 
-  let barOption: Js.Json.t = React.useMemo2(() => {
+  let barOption: JSON.t = React.useMemo2(() => {
     let colors = {
       let length = pieSeriesData->Array.length->Int.toFloat
       pieSeriesData->Array.mapWithIndex((_data, i) => {

src/components/CustomCharts/HighchartTimeSeriesChart.res

@@ -45,7 +45,7 @@ module LineChart1D = {
   @react.component
   let make = (
     ~class: string="",
-    ~rawChartData: array<Js.Json.t>,
+    ~rawChartData: array<JSON.t>,
     ~selectedMetrics: LineChartUtils.metricsConfig,
     ~commonColorsArr: array<LineChartUtils.chartData<'a>>=[],
     ~chartPlace="",
@@ -59,7 +59,7 @@ module LineChart1D = {
     ~legendType: legendType=Table,
     ~isMultiDimensional: bool=false,
     ~chartKey: string="0",
-    ~legendData: array<Js.Json.t>=[],
+    ~legendData: array<JSON.t>=[],
     ~chartdataMaxRows: int=-1,
     ~selectedRow=None,
     ~showTableBelow: bool=false,
@@ -98,7 +98,7 @@ module LineChart1D = {
 
     let (chartData, xAxisMapInfo, chartDataOrig) = React.useMemo7(() => {
       let chartdata: array<
-        LineChartUtils.timeSeriesDictWithSecondryMetrics<Js.Json.t>,
+        LineChartUtils.timeSeriesDictWithSecondryMetrics<JSON.t>,
       > = LineChartUtils.timeSeriesDataMaker(
         ~data=rawChartData,
         ~groupKey,
@@ -125,23 +125,23 @@ module LineChart1D = {
                     ->Js.Date.getHours
                     ->Float.toString}:00`
                   ->String.sliceToEnd(~start=-5)
-                  ->Js.Json.string
+                  ->JSON.Encode.string
                 } else if "run_month" === groupKey {
                   xAxis
                   ->Js.Date.fromFloat
                   ->DateTimeUtils.toUtc
                   ->Js.Date.getDate
                   ->Float.toString
-                  ->Js.Json.string
+                  ->JSON.Encode.string
                 } else if "run_week" === groupKey {
                   switch DateTimeUtils.daysArr[
                     xAxis->Js.Date.fromFloat->DateTimeUtils.toUtc->Js.Date.getDay->Float.toInt
                   ] {
                   | Some(ele) => DateTimeUtils.dayMapper(ele)
                   | None => ""
-                  }->Js.Json.string
+                  }->JSON.Encode.string
                 } else {
-                  xAxis->Js.Json.number
+                  xAxis->JSON.Encode.float
                 }
 
                 (updatedXAxis, yAxis, xY)
@@ -154,7 +154,7 @@ module LineChart1D = {
       let chartDataOrig = chartdata
 
       let selectedChartData = switch selectedRow {
-      | Some(data: LineChartUtils.chartData<Js.Json.t>) =>
+      | Some(data: LineChartUtils.chartData<JSON.t>) =>
         chartdata->Array.filter(item => data.name == item.name)
       | None =>
         clickedRowNames->Array.length > 0
@@ -169,8 +169,8 @@ module LineChart1D = {
             let (x, y, secondryMetrics) = axes
             xAxisMapInfo->LineChartUtils.appendToDictValue(
               ["run_date", "run_month", "run_week"]->Array.includes(groupKey)
-                ? x->Js.Json.decodeString->Option.getOr("")
-                : x->Js.Json.stringify,
+                ? x->JSON.Decode.string->Option.getOr("")
+                : x->JSON.stringify,
               (
                 item.name,
                 {
@@ -227,13 +227,13 @@ module LineChart1D = {
       let chartData = data->Belt.Array.keepMap(chartDataItem => {
         let (fillColor, color) = (chartDataItem.fillColor, chartDataItem.color) // normal
         //always uses same color for same entity Upi live mode
-        let val: option<seriesLine<Js.Json.t>> = if (
+        let val: option<seriesLine<JSON.t>> = if (
           !(clickedRowNames->Array.includes(chartDataItem.name)) &&
           clickedRowNames->Array.length > 0
         ) {
           None
         } else {
-          let value: Highcharts.seriesLine<Js.Json.t> = {
+          let value: Highcharts.seriesLine<JSON.t> = {
             color,
             name: chartDataItem.name,
             data: chartDataItem.data->Array.map(
@@ -461,7 +461,7 @@ module LineChart1D = {
         }->genericObjectOrRecordToJson
       }
 
-      let a: options<Js.Json.t> = {
+      let a: options<JSON.t> = {
         chart: {
           Some(
             {
@@ -674,7 +674,7 @@ module LineChart1D = {
               },
             }->genericObjectOrRecordToJson
 
-            labelsValue->getDictFromJsonObject->deleteKey("style")->Js.Json.object_
+            labelsValue->getDictFromJsonObject->deleteKey("style")->JSON.Encode.object
           },
         }->genericObjectOrRecordToJson,
         series: chartData,
@@ -801,7 +801,7 @@ module LegendItem = {
 
 module RenderMultiDimensionalChart = {
   type config = {
-    chartDictData: Dict.t<Js.Array.t<Js.Json.t>>,
+    chartDictData: Dict.t<array<JSON.t>>,
     class: string,
     selectedMetrics: LineChartUtils.metricsConfig,
     groupBy: string,
@@ -816,7 +816,7 @@ module RenderMultiDimensionalChart = {
     let chartNames =
       config.chartDictData
       ->Dict.toArray
-      ->Array.reduce([], (acc: array<LineChartUtils.chartData<Js.Json.t>>, (_, value)) => {
+      ->Array.reduce([], (acc: array<LineChartUtils.chartData<JSON.t>>, (_, value)) => {
         let chartdata = LineChartUtils.timeSeriesDataMaker(
           ~data=value,
           ~groupKey=config.groupBy,
@@ -830,7 +830,7 @@ module RenderMultiDimensionalChart = {
             data: i.data->Array.map(
               item => {
                 let (val1, val2, val3) = item
-                (val1->Js.Json.number, val2, val3)
+                (val1->JSON.Encode.float, val2, val3)
               },
             ),
             legendIndex: i.legendIndex,
@@ -883,7 +883,7 @@ module LineChart2D = {
   @react.component
   let make = (
     ~groupBy: option<array<string>>,
-    ~rawChartData: array<Js.Json.t>,
+    ~rawChartData: array<JSON.t>,
     ~selectedMetrics: LineChartUtils.metricsConfig,
     ~xAxis: string,
     ~legendType=Points,
@@ -925,7 +925,7 @@ module LineChart3D = {
   @react.component
   let make = (
     ~groupBy: option<array<string>>,
-    ~rawChartData: array<Js.Json.t>,
+    ~rawChartData: array<JSON.t>,
     ~selectedMetrics: LineChartUtils.metricsConfig,
     ~xAxis: string,
     ~legendType=Points,