Hooks
We provide a few hooks to access the same data we show on our components.
Hooks are used to retrieve data. It's the same data displayed on the widgets. They will return the same data the api returns, with the plus that the data is cached for you, making the app run fasterYou can use them in case you need to render your own component or to subscribe to know the status of a loading, or status of the data in the widgets you are rendering. On The widgets section, you can read which hooks are consumed by every component.
All hooks can be imported from:
import { ... } from '@amberflo/uikit`
And they can be used as:
const { data, isFetching, isError, error, isSuccess, isIdle } = useHookName(<some parameters>)
Notice
- Hooks are supported by React 16.8+. You won't be able to consume this hooks if you are using an older version.
- Hooks are only supported by functional components. If you are using class components, you'll need to move it to functional or write a High Order Component.
Common attributes
Every hook will return an object containing always the same keys:
data
: This is the result of the hook, and the content will vary depending on the hook called. See the list below for more details.
isFetching
: This is a boolean attribute, indicating if the hook is retrieving or not data. With this, you can subscribe and show a custom loader.
isError
: This is a boolean attribute, indicating if the hook throw an error retrieving the data. So you can act accordingly.
error
: If there was an error, this attribute will have the error message.
isSuccess
: This is a boolean attribute, indicating the fetch has ended, and the data was retrieved.
isIdle
: This is a boolean attribute, indicating the fetch has ended. No matter is succeed or failed, means the hook is idle right now.
Available hooks are
useCost
Parameters
Name | Type | Description | ||
---|---|---|---|---|
startDate (required) | number | Date in epoch number, representing the start date to get data from. | ||
endDate (required) | number | Date in epoch number, representing the end date to get data until. | ||
period (required) | "daily" | "weekly" | "monthly"` | The cost service can provide you with statistics about the usage of your system. For each group of statistics the cost service can also provide you with a time stream of statistics per the period. |
inMillis | boolean | If true, start and end date will be read as milliseconds, otherwise, they will be read as seconds |
This hook will internally call the cost api call. And returns it's data.
Structure of the hook:
const useCost = (
startDate: number,
endDate: number,
period: string
) => {
data: CostResponse
/* This hook will have all common attributes also */
}
You can see all common attributes here.
useCreditsLedger
No parameters are required
This hook will internally call the customer credits ledger api call and return its data.
Structure of the hook
const {
data: creditsLedger,
/* This hook will have all common attributes also */
}
You can see all common attributes here.
useCurrentPricingPlan
No parameters are required
This hook will internally call the current pricing plan details api call and return its data.
Structure of the hook:
const useCurrentPricingPlan = () => {
data: PricingPlanResponse,
handleSelectPlan: (pricingPlanId: string) => void
/* This hook will have all common attributes also */
}
usePricingPlanDetails
No parameters are required
This hook will internally call the current pricing plan details api call and the set new pricing plan api call and return its data.
Structure of the hook:
const usePricingPlanDetails = () => {
data: PricingPlanResponse,
handleSelectPlan: (pricingPlanId: string) => void
/* This hook will have all common attributes also */
}
handleSelectPlan
will receive a new pricing plan, and set it to the customer.
You can see all common attributes here.
useInvoiceDetails
Parameters
Name | Type | Description |
---|---|---|
invoiceDate | number | Invoice start date in format mm/dd/yyyy. If not provided, last invoice will be displayed |
planId | string | String of the current plan id, in case customer has more than one invoice in the same date, with different plans |
enabled | boolean | The hook won't be called if false . true by default. |
This hook will internally call the get customer portal invoice api call and return its data.
Structure of the hook:
const useInvoiceDetails = (
invoiceDate?: string,
planId?: string,
enabled?: boolean = true
) => {
data: InvoiceType
/* This hook will have all common attributes also */
}
You can see all common attributes here.
useLatestInvoice
No parameters are required
This hook will internally call the get customer portal invoice api call and return its data.
Structure of the hook:
const useLatestInvoice = () => {
data: InvoiceType
/* This hook will have all common attributes also */
}
You can see all common attributes here.
useInvoices
No parameters are required
This hook will internally call the get all customer invoices api call and return its data.
Structure of the hook:
const useInvoices = () => {
data: InvoiceType[]
/* This hook will have all common attributes also */
}
You can see all common attributes here.
useMeters
No parameters are required
This hook will internally call the get all meters api call and return its data.
Structure of the hook:
cosnt useMeters = () => {
data: Meter[]
/* This hook will have all common attributes also */
}
You can see all common attributes here.
usePrepaidSummary
No parameters are required
This hook will internally call the customer prepaid wallet api call and return its data.
Structure of the hook
const usePrepaidSummary = () => {
data: PrepaidItem[]
/* This hook will have all common attributes also */
}
You can see all common attributes here.
useProductItems
No parameters are required
This hook will internally call the /product-items
api call. Returning a list of product items, including its: id
, description
, lastUpdateTimeInMillis
, lockingStatus
, productId
, meterApiName
, productItemName
Structure of the hook:
const useProductItems = () => {
data: ProductItemDefinition[]
/* This hook will have all common attributes also */
}
You can see all common attributes here.
useStripeClientSecret
No parameters are required
This hook will internally call the customer setup intent api call. and return its data.
Structure of the hook:
const useStripeClientSecret = () => {
data: string
/* This hook will have all common attributes also */
}
You can see all common attributes here.
useUsage
Parameters
Name | Type | Description |
---|---|---|
meters (required) | Array<{ meterApiName: string; filter?: Record<string, string[]> }> | List of meter api names (as defined in create a meter and filter its data by a dimension and a list of values. |
startDate (required) | number | Date in epoch number, representing the start date to get data from. |
endDate (required) | number | Date in epoch number, representing the end date to get data until. |
period (required) | "hourly" | "daily" | "weekly" | "monthly" | The usage service can provide you with statistics about the usage of your system. For each group of statistics the usage service can also provide you with a time stream of statistics per the period. So you can see for example, how the SUM of the usage changes over time. Notice that for aggregation types: MIN, MAX, AVG this field has a more delicate meaning. For example for AVG if this field value is an daily , then you get the daily average usage value for each group and a breakdown of each daily usage. On the other hand if this period is weekly then you get the avg of the total weekly usage, with a breakdown of the total usage per week. |
groupBy | string[] | Group the usage data by these dimensions. If unspecified or empty, data will be aggregated for the meter as a whole. |
filter | Record<string, string[]> | "where" clause for the usage query. Each entry is a dimension and a list of values to filter for. Valid filters are: Any dimension defined in for the meter, see the dimensions field. |
limit | number | null | Limit the number of dimension values returned in the response. This parameter has an effect only when the query has groupBy dimensions passed. It is useful when you want to view the "Top X" or "Bottom X" dimension values. Pass a positive integer to get the top values (sorted in non-ascending order) and a negative integer to get the bottom values (ascending order). |
Structure of the hook:
const useUsage = (
meters: Array<{ meterApiName: string; filter?: Record<string, string[]> }>,
startDate: number,
endDate: number,
period: string,
groupBy?: string
) => {
data: UsageResponse[]
/* This hook will have all common attributes also */
}
You can see all common attributes here.
Updated 2 months ago