Callback

The Callback prop is a function that is called whenever the user changes any form values in the CalcGatewayForm component. The Callback function receives an object containing the calculation request data, which can be used to send the request to the backend.

It contains the following properties:

• requestBody: The correct calculation format which is parsed from the user input.
• requestUrl: The URL where the data should be sent to calculate the request.
• requestUIState: The request state, which can be used to initialize the CalcGatewayForm with previous values.

To ensure the calc request functions properly, it is essential to include product ids, which are not provided in the callback. When you receive the callback, you need to enrich the requestBody with the product ids before forwarding the request to the backend. Use the requestBody and requestUrl properties to accomplish this.

Usage

To use the Callback prop, you need to pass a function to the Callback prop of the CalcGatewayForm component. This function will be called whenever the user changes any form values.

import {CalcGatewayForm} from 'kampmann-calcgateway-frontend'

function App() {

  //This state is passed as a callback to the CalcGatewayForm component and will store the Request Form result
  const [result, setResult] = useState({})

  return (
    <CalcGatewayForm
      ...
      Callback={setResult}
    />
  )
}

Saving state

The UI state is available in the requestUIState property in the callback object. This object can be saved to the local storage using the UIControlsToLocalStorage util function.

The function accepts two parameters:

• key: A key under which the data will be stored
• UIControls: The UIControls object to be saved.

The util function can be used to save both group and product states into one storage object. Only the available categories for the selected product will be used.

Example:

• The UI state of the Ultra Allround group (ID: 51050) is saved into the local storage using the util function.
• Next, a product of the Ultra Allround group is to be calculated, initializing the CalcGatewayForm, the previously used group state can be loaded into the initState property.
• If the selected product does not support a category (e.g. cooling), only the correct categories will be loaded.
• Likewise, only the changed categories will be stored/overridden in the local storage using the util function. Taking the example above, the data for the cooling category in the local storage will be left untouched. The same key as for the product group should be used.
• Navigating back to the product group, the data from the local storage can be used for the initState in the CalcGatewayForm. The initState will now contain the new data, changed by the product, and the previous (cooling) data used by the product group before.

There is also a mergeUIControlState util function available, that takes two parameters:

• oldState: UIControls from a data storage (e.g. localStorage)
• newState: UIControls returned from the CalcGatewayForm callback

This function provides similar functionality like the UIControlsToLocalStorage, but does not store the merged object. The function can be used if the localStorage is not to be used as storage for the state.