chore: move from Js Library to Core Array/Dict components (#145)

juspay · Jan 3, 2024 · 6a68efd · 6a68efd
1 parent bcffb62
commit 6a68efd
Show file tree

Hide file tree

Showing 280 changed files with 3,007 additions and 3,185 deletions.
diff --git a/src/components/AddDataAttributes.res b/src/components/AddDataAttributes.res
@@ -2,7 +2,7 @@ let spreadProps = React.cloneElement
 
 @react.component
 let make = (~attributes: array<(string, string)>, ~children) => {
-  let attributesDict = attributes->Js.Dict.fromArray
+  let attributesDict = attributes->Dict.fromArray
   let ignoreAttributes = React.useContext(AddAttributesContext.ignoreAttributesContext)
 
   if !ignoreAttributes {

diff --git a/src/components/AdvancedSearchComponent.res b/src/components/AdvancedSearchComponent.res
@@ -1,7 +1,7 @@
 let getSummary: Js.Json.t => EntityType.summary = json => {
   switch json->Js.Json.decodeObject {
   | Some(dict) => {
-      let rowsCount = LogicUtils.getArrayFromDict(dict, "rows", [])->Js.Array2.length
+      let rowsCount = LogicUtils.getArrayFromDict(dict, "rows", [])->Array.length
       let totalCount = LogicUtils.getInt(dict, "entries", 0)
       {totalCount, count: rowsCount}
     }
@@ -30,15 +30,14 @@ let make = (
     fetchApi(url, ~bodyStr=Js.Json.stringify(values), ~method_=Fetch.Post, ())
     ->then(Fetch.Response.json)
     ->then(json => {
-      let jsonData =
-        json->Js.Json.decodeObject->Belt.Option.flatMap(dict => dict->Js.Dict.get("rows"))
+      let jsonData = json->Js.Json.decodeObject->Belt.Option.flatMap(dict => dict->Dict.get("rows"))
       let newData = switch jsonData {
-      | Some(actualJson) => actualJson->getObjects->Js.Array2.map(obj => obj->Js.Nullable.return)
+      | Some(actualJson) => actualJson->getObjects->Array.map(obj => obj->Js.Nullable.return)
       | None => []
       }
 
       let summaryData =
-        json->Js.Json.decodeObject->Belt.Option.flatMap(dict => dict->Js.Dict.get("summary"))
+        json->Js.Json.decodeObject->Belt.Option.flatMap(dict => dict->Dict.get("summary"))
 
       let summary = switch summaryData {
       | Some(x) => x->getSummary
@@ -53,7 +52,7 @@ let make = (
       | None => ()
       }
       setShowModal(_ => false)
-      form.reset(Js.Json.object_(Js.Dict.empty())->Js.Nullable.return)
+      form.reset(Js.Json.object_(Dict.make())->Js.Nullable.return)
       json->Js.Nullable.return->resolve
     })
     ->catch(_err => {
@@ -66,12 +65,12 @@ let make = (
   let validateForm = (values: Js.Json.t) => {
     let finalValuesDict = switch values->Js.Json.decodeObject {
     | Some(dict) => dict
-    | None => Js.Dict.empty()
+    | None => Dict.make()
     }
-    let keys = Js.Dict.keys(finalValuesDict)
-    let errors = Js.Dict.empty()
-    if keys->Js.Array2.length === 0 {
-      Js.Dict.set(errors, "Please Choose One of the fields", ""->Js.Json.string)
+    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)
     }
     errors->Js.Json.object_
   }

diff --git a/src/components/AdvancedSearchModal.res b/src/components/AdvancedSearchModal.res
@@ -17,14 +17,14 @@ module AdvanceSearch = {
   ) => {
     let {optionalSearchFieldsList, requiredSearchFieldsList, detailsKey} = entity
     let fetchApi = AuthHooks.useApiFetcher()
-    let initialValueJson = Js.Json.object_(Js.Dict.empty())
+    let initialValueJson = Js.Json.object_(Dict.make())
     let showToast = ToastState.useShowToast()
 
     let onSubmit = (values, _) => {
       let otherQueries = switch values->Js.Json.decodeObject {
       | Some(dict) =>
         dict
-        ->Js.Dict.entries
+        ->Dict.toArray
         ->Belt.Array.keepMap(entry => {
           let (key, value) = entry
           let stringVal = LogicUtils.getStringFromJson(value, "")
@@ -34,10 +34,10 @@ module AdvanceSearch = {
             None
           }
         })
-        ->Js.Array2.joinWith("&")
+        ->Array.joinWith("&")
       | _ => ""
       }
-      let finalUrl = otherQueries->Js.String2.length > 0 ? `${url}?${otherQueries}` : url
+      let finalUrl = otherQueries->String.length > 0 ? `${url}?${otherQueries}` : url
 
       open Promise
       open LogicUtils
@@ -50,7 +50,7 @@ module AdvanceSearch = {
 
             if statusStr === "SUCCESS" {
               let payloadDict =
-                jsonDict->Js.Dict.get(detailsKey)->Belt.Option.flatMap(Js.Json.decodeObject)
+                jsonDict->Dict.get(detailsKey)->Belt.Option.flatMap(Js.Json.decodeObject)
 
               switch payloadDict {
               | Some(dict) => {
@@ -85,23 +85,23 @@ module AdvanceSearch = {
 
     let validateForm = (values: Js.Json.t) => {
       let valuesDict = switch values->Js.Json.decodeObject {
-      | Some(dict) => dict->Js.Dict.entries->Js.Dict.fromArray
-      | None => Js.Dict.empty()
+      | Some(dict) => dict->Dict.toArray->Dict.fromArray
+      | None => Dict.make()
       }
-      let errors = Js.Dict.empty()
-      requiredSearchFieldsList->Js.Array2.forEach(key => {
-        if Js.Dict.get(valuesDict, key)->Js.Option.isNone {
-          Js.Dict.set(errors, key, "Required"->Js.Json.string)
+      let errors = Dict.make()
+      requiredSearchFieldsList->Array.forEach(key => {
+        if Dict.get(valuesDict, key)->Js.Option.isNone {
+          Dict.set(errors, key, "Required"->Js.Json.string)
         }
       })
-      let isSubmitEnabled = optionalSearchFieldsList->Js.Array2.some(key => {
-        Js.Dict.get(valuesDict, key)->Js.Option.isSome
+      let isSubmitEnabled = optionalSearchFieldsList->Array.some(key => {
+        Dict.get(valuesDict, key)->Js.Option.isSome
       })
 
       if !isSubmitEnabled {
-        Js.Dict.set(
+        Dict.set(
           errors,
-          optionalSearchFieldsList->Js.Array2.joinWith(","),
+          optionalSearchFieldsList->Array.joinWith(","),
           "Atleast One of Optional fields is Required"->Js.Json.string,
         )
       }

diff --git a/src/components/AnalyticsComponent/NestedDropdownWithCalendar.res b/src/components/AnalyticsComponent/NestedDropdownWithCalendar.res
@@ -9,8 +9,8 @@ let make = (
   let (startDateArr, setStartDateArr) = React.useState(_ => [""])
   let (endDateArr, setEndDateArr) = React.useState(_ => [""])
   let onClickAdd = _ => {
-    setEndDateArr(prev => Js.Array.concat([""], prev))
-    setStartDateArr(prev => Js.Array.concat([""], prev))
+    setEndDateArr(prev => Array.concat([""], prev))
+    setStartDateArr(prev => Array.concat([""], prev))
   }
   React.useEffect1(() => {
     setStartDateArr(_ => [""])
@@ -20,7 +20,7 @@ let make = (
 
   let onClick = _ => {
     let newArr =
-      startDateArr->Js.Array2.mapi((x, i) => (
+      startDateArr->Array.mapWithIndex((x, i) => (
         x,
         endDateArr->Belt.Array.get(i)->Belt.Option.getWithDefault(x),
       ))
@@ -55,13 +55,13 @@ let make = (
     <UIUtils.RenderIf condition={showCalendars}>
       <div className="flex px-2">
         {startDateArr
-        ->Js.Array2.mapi((_x, i) => {
+        ->Array.mapWithIndex((_x, i) => {
           <div className="px-1">
             <DateRangePicker.Base
               startDateVal={startDateArr[i]->Belt.Option.getWithDefault("")}
               setStartDateVal={fn => {
                 setStartDateArr(prev => {
-                  let newArr = prev->Js.Array2.mapi(
+                  let newArr = prev->Array.mapWithIndex(
                     (x2, i2) => {
                       if i2 == i {
                         fn(prev[i]->Belt.Option.getWithDefault(""))
@@ -77,7 +77,7 @@ let make = (
               endDateVal={endDateArr[i]->Belt.Option.getWithDefault("")}
               setEndDateVal={fn => {
                 setEndDateArr(prev => {
-                  let newArr = prev->Js.Array2.mapi(
+                  let newArr = prev->Array.mapWithIndex(
                     (x2, i2) => {
                       if i2 == i {
                         fn(prev[i]->Belt.Option.getWithDefault(""))

diff --git a/src/components/AsyncSelectBox.res b/src/components/AsyncSelectBox.res
@@ -24,7 +24,7 @@ let make = (
       | Js.Json.JSONObject(jsonDict) => {
           let payloadArr =
             jsonDict
-            ->Js.Dict.get(dataKey)
+            ->Dict.get(dataKey)
             ->Belt.Option.flatMap(Js.Json.decodeArray)
             ->Belt.Option.map(x => x->Belt.Array.keepMap(Js.Json.decodeString))
             ->Belt.Option.getWithDefault([])
@@ -57,8 +57,8 @@ let make = (
   }, [url])
 
   let loadingOption = ["Loading..."]->SelectBox.makeOptions
-  let shouldDisable = loadErr || options->Js.Array2.length <= 0 ? true : disableSelect
-  let buttonText = options->Js.Array2.length <= 0 ? "No Options Found" : buttonText
+  let shouldDisable = loadErr || options->Array.length <= 0 ? true : disableSelect
+  let buttonText = options->Array.length <= 0 ? "No Options Found" : buttonText
 
   if dataLoading {
     <SelectBox

diff --git a/src/components/Base64ImageInputWithDnD.res b/src/components/Base64ImageInputWithDnD.res
@@ -66,7 +66,7 @@ let make = (
 
     if size > 400000 {
       showToast(~message="File size too large, upload below 400kb", ~toastType=ToastError, ())
-    } else if target["files"]->Js.Array2.length > 0 {
+    } else if target["files"]->Array.length > 0 {
       let filename = value["name"]
       setFilename(_ => filename)
       let fileReader = FileReader.reader
@@ -114,7 +114,7 @@ let make = (
     onDrop={ev => {
       ReactEvent.Mouse.preventDefault(ev)
       let files = ev->dataTransfer->files
-      if files->Js.Array2.length > 0 {
+      if files->Array.length > 0 {
         let file = files["0"]
         let size = file["size"]
         setIsfileTooLarge(_ => size > 400000)

diff --git a/src/components/Calendar.res b/src/components/Calendar.res
@@ -58,7 +58,7 @@ module TableRow = {
       } else {
         <tr className="transition duration-300 ease-in-out">
           {item
-          ->Js.Array2.mapi((obj, cellIndex) => {
+          ->Array.mapWithIndex((obj, cellIndex) => {
             let date =
               customTimezoneToISOString(
                 Js.String2.make(year),
@@ -315,7 +315,7 @@ let make = (
   let months = [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
   let heading = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
   let isMobileView = MatchMedia.useMobileChecker()
-  let getMonthInFloat = mon => Js.Array2.indexOf(months, mon)->Belt.Float.fromInt
+  let getMonthInFloat = mon => Array.indexOf(months, mon)->Belt.Float.fromInt
   let getMonthInStr = mon => {
     switch mon {
     | Jan => "January, "
@@ -356,7 +356,7 @@ let make = (
   let dummyRow = Belt.Array.make(6, Belt.Array.make(7, ""))
 
   let rowMapper = (row, indexRow) => {
-    Js.Array2.mapi(row, (_item, index) => {
+    Array.mapWithIndex(row, (_item, index) => {
       let subFactor = Belt.Float.toInt(firstDay)
       if indexRow == 0 && index < Belt.Float.toInt(firstDay) {
         ""
@@ -369,7 +369,7 @@ let make = (
       }
     })
   }
-  let rowInfo = Js.Array2.mapi(dummyRow, rowMapper)
+  let rowInfo = Array.mapWithIndex(dummyRow, rowMapper)
 
   <div className="text-sm px-2 pb-2">
     {showTitle
@@ -387,7 +387,7 @@ let make = (
         {if showHead {
           <tr>
             {heading
-            ->Js.Array2.mapi((item, i) => {
+            ->Array.mapWithIndex((item, i) => {
               <th key={string_of_int(i)}>
                 <div
                   className="flex flex-1 justify-center py-1 text-jp-gray-700 dark:text-jp-gray-text_darktheme dark:text-opacity-50">
@@ -403,7 +403,7 @@ let make = (
       </thead>
       <tbody>
         {rowInfo
-        ->Js.Array2.mapi((item, rowIndex) => {
+        ->Array.mapWithIndex((item, rowIndex) => {
           <TableRow
             key={string_of_int(rowIndex)}
             item

diff --git a/src/components/CalendarList.res b/src/components/CalendarList.res
@@ -2,16 +2,16 @@ external ffInputToSelectInput: ReactFinalForm.fieldRenderPropsInput => ReactFina
   array<string>,
 > = "%identity"
 let getStrArray = jsonArr => {
-  jsonArr->Js.Array2.reduce((acc, jsonElement) => {
+  jsonArr->Array.reduce([], (acc, jsonElement) => {
     switch jsonElement->Js.Json.decodeString {
     | Some(str) => {
-        let _ = Js.Array2.push(acc, str)
+        let _ = Array.push(acc, str)
       }
 
     | None => ()
     }
     acc
-  }, [])
+  })
 }
 
 open Calendar
@@ -45,7 +45,7 @@ let make = (
     months[valueInt]->Belt.Option.getWithDefault(Jan)
   }
   let getMonthInFloat = mon => {
-    Js.Array2.indexOf(months, mon)->Belt.Float.fromInt
+    Array.indexOf(months, mon)->Belt.Float.fromInt
   }
   let getMonthInStr = mon => {
     switch mon {
@@ -92,7 +92,7 @@ let make = (
   <div
     className={`flex flex-1 flex-row justify-center overflow-auto bg-jp-gray-50 dark:bg-jp-gray-950 rounded border border-jp-gray-500 dark:border-jp-gray-960 select-none ${calendarContaierStyle}`}>
     {dummyRow
-    ->Js.Array2.mapi((_item, i) => {
+    ->Array.mapWithIndex((_item, i) => {
       let currDateTemp = Js.Date.fromFloat(Js.Date.valueOf(currDateIm))
       let tempDate = Js.Date.setMonth(
         currDateTemp,

diff --git a/src/components/Chip.res b/src/components/Chip.res
@@ -1,9 +1,9 @@
 @react.component
 let make = (~values=[], ~showButton=false, ~onButtonClick=_ => (), ~converterFn=str => str) => {
-  <UIUtils.RenderIf condition={values->Js.Array2.length !== 0}>
+  <UIUtils.RenderIf condition={values->Array.length !== 0}>
     <div className="flex flex-wrap flex-row">
       {values
-      ->Js.Array2.map(value => {
+      ->Array.map(value => {
         let onClick = _evt => {
           onButtonClick(value)
         }

diff --git a/src/components/CollapsableTableRow.res b/src/components/CollapsableTableRow.res
@@ -10,12 +10,12 @@ let make = (
   ~heading,
   ~title,
 ) => {
-  let isCurrentRowExpanded = expandedRowIndexArray->Js.Array2.includes(rowIndex)
+  let isCurrentRowExpanded = expandedRowIndexArray->Array.includes(rowIndex)
 
   let headingArray = []
 
-  heading->Js.Array2.forEach((item: TableUtils.header) => {
-    headingArray->Js.Array2.push(item.title)->ignore
+  heading->Array.forEach((item: TableUtils.header) => {
+    headingArray->Array.push(item.title)->ignore
   })
   let textColor = "text-jp-gray-900 dark:text-jp-gray-text_darktheme text-opacity-75 dark:text-opacity-75"
   let fontStyle = "font-fira-code"
@@ -27,7 +27,7 @@ let make = (
       <tr
         className={`group h-full ${borderRadius} bg-white dark:bg-jp-gray-lightgray_background hover:bg-jp-gray-table_hover dark:hover:bg-jp-gray-100 dark:hover:bg-opacity-10 ${textColor} ${fontStyle} transition duration-300 ease-in-out ${fontSize}`}>
         {item
-        ->Js.Array2.mapi((obj: Table.cell, cellIndex) => {
+        ->Array.mapWithIndex((obj: Table.cell, cellIndex) => {
           let showBorderTop = switch obj {
           | Text(x) => x !== "-"
           | _ => true
@@ -38,7 +38,7 @@ let make = (
           | _ => "py-3"
           }
 
-          let highlightCell = highlightEnabledFieldsArray->Js.Array2.includes(cellIndex)
+          let highlightCell = highlightEnabledFieldsArray->Array.includes(cellIndex)
           let borderTop = showBorderTop ? "border-t" : "border-t-0"
           let borderClass = `${borderTop} border-jp-gray-500 dark:border-jp-gray-960`
           let hCell = highlightCell ? "hover:font-bold" : ""
@@ -80,7 +80,7 @@ let make = (
     <MobileView>
       <div className="px-3 py-4 bg-white dark:bg-jp-gray-lightgray_background">
         {item
-        ->Js.Array2.mapi((obj, index) => {
+        ->Array.mapWithIndex((obj, index) => {
           let heading = headingArray->Belt.Array.get(index)->Belt.Option.getWithDefault("")
           <UIUtils.RenderIf condition={index !== 0} key={index->string_of_int}>
             <div className="flex mb-5 justify-between">