Skip to main content

Utilities Submodule

There are some utility functions that we use to make the application work. An example is, VONQ HAPI backend expects an array of orderedProductsSpecs when ordering a campaign however on the frontend, instead of doing array.find to find a spec in orderedProductsSpecs, we convert it to an object so we can utilize orderedProductsSpecs['some-contract-id']. To actually send the frontend version of the CampaignCreateForm to backend and successfully order it, we convert it back to the structure backend expects via getOrderCampaignRequestBody utility function.


Utilities submodule is used throughout the HAPI Elements Javascript API, such as the state module setters, service functions, API requests.


An example is shown below for a utility function:

Loading...

More examples can be found in the Utilities tab of the Playground for each module.

Some general use case utilities that are not documented in Playground​

Merging deeply nested objects​

When trying to overwrite or update deeply nested objects, you can use the utility function mergeDeepOverwriteArrays:

object.config = {
    number: 0,
    nested: {
        foo: 'bar'
    }
}

object.config = window.hapiUtils.mergeDeepOverwriteArrays(object.config, {
    nested: {
        foo: 'next'
    }
})

console.log('[HAPI] New Config', object.config)

// {
//     number: 0,
//     nested: {
//         foo: 'next'
//     }
// }

type mergeDeepOverwriteArrays: <T>(
    original: T,
    overwrites: RecursivePartial<T>,
) => T

Flatten Tree structure​

To flatten a tree structure into a one level array. Use getFlattenedTree:

const tree = {
    data: {
        label: "First Level",
        key: "first"
    },
    children: [
        {
            data: {
                label: "Second Level",
                key: "second"
            },
            children: []
        }
    ]
}
const flattenedTree = window.hapiUtils.getFlattenedTree(
    tree, 
    "children",
    "data.label",
    "data.key"
)

console.log("[HAPI] getFlattenedTree", flattenedTree)

// [
//     {
//         label: "First Level",
//         value: "first"
//     },
//     {
//         label: "Second Level",
//         value: "second"
//     }
// ]

type getFlattenedTree: (
    values: any[],
    childAccessor: string,
    labelAccessor: string,
    valueAccessor: string,
    parentLabel?: any,
    canSelectParentCategoriesThatHasOptions?: boolean,
) => { label: string; value: any }[]

Using TypeScript types package for Utilities Submodule​

We recommend that you use the global approach, as you won't need to do the utilities-only types approach:

Global approach​

Read more about how to set types globally here

Utilities-only approach​

  1. Open Playground Utilities Submodule of a module here
  2. On the very first few lines (most of the time second line), there is an import to the utils.types.ts, jump to that file by CTRL (or CMD on Mac) + Click
  3. Search by CTRL (or CMD on Mac) + F and type the name of the function getInitialContractForm and you will find it in the respective type of the utilities submodule, in this case, WindowHapiUtilsContract and the type is () => ContractCreateForm
import {
    ContractCreateForm
} from "@vonq/hapi-elements-types"

const getInitialContractForm = window.hapi.contract.utils.getInitialContractForm as (() => ContractCreateForm)

// run the function
getInitialContractForm(
    //...the args expected in the type
)