Getting Started

In this section, we will show you how to initialize the Busy Hour App and Main Service.

Prerequisites

1. Busy Hour Account (Sign Up if you don't have one yet)
2. Create a Busy Hour Project from the Dashboard/Projects
3. Create a Busy Hour App from from the Dashboard/Apps
4. Download Busy Hour App config file from from the Dashboard/Apps

Installation

NPM

npm i @busy-hour/react

YARN

yarn add @busy-hour/react

PNPM

pnpm add @busy-hour/react

Initializing Busy Hour App

danger

To get the user access token and service token, you can use the fetch/axios to request user auth data from Busy Hour. Please keep in mind, that the process of requesting user auth data should be done only from your Backend and not from your Frontend.

In this example, the idea is that you request the auth data to your Backend and then requesting it from Backend to our REST API or using the @busy-hour/node package, afterwards the response will be passed to the initializeService function.

To initialize Busy Hour App, you can use the useInitBusyHour function. The useInitBusyHour function is exported from the @busy-hour/react package and take the following arguments:

Property	Type	Description
isShouldInit	boolean	Determine if the app should be initialized or not
clientId	string	Your Busy Hour Client ID
projectId	string	Your Busy Hour Project ID
projectAppId	string	Your Busy Hour Project App ID
userId	string	Your Busy Hour User ID
accessToken	string	Your User Access Token, read more at https://docs.busyhour.id/docs/category/nodejs
serviceToken	string	Your User Service Token, read more at https://docs.busyhour.id/docs/category/nodejs
config	JSON	Your Busy Hour Project App Config file, get it from Busy Hour Dashboard/Apps
onError	Function	Function to handle the initialization error, you can refetch the user access and service token then reinitialize the app

Quick Example

src/main.tsx

import React from 'react';
import { useInitBusyHour } from '@busy-hour/react';
// Config file from Busy Hour Dashboard
import busyConfig from './busyConfig.json';

export default function Main() {
  const [isAppInitialized, isAppInitializedError] = useInitBusyApp({
    // determine if the app should be initialized or not
    isShouldInit: true,
    clientId: 'your-client-id',
    userId: 'your-user-id',
    projectAppId: 'your-project-app-id',
    projectId: 'your-project-id',
    // get user auth data from busy hour through your BE
    // read more at https://docs.busyhour.id/docs/category/nodejs
    // or at https://docs.busyhour.id/docs/category/rest
    accessToken: 'your-user-access-token',
    serviceToken: 'your-user-service-token',
    // initialize the app based on the config file, downloaded from the dashboard
    config: busyConfig,
    onError(reinitialize) {
      // Handle the initialization error
      // For example, refetch the user access and service token
      // ...
      // Reinitialize the app
      reinitialize();
    },
  });

  if (!isAppInitialized) {
    return <div>Loading...</div>;
  }

  if (isAppInitializedError) {
    return <div>Error: {isAppInitializedError}</div>;
  }

  return <MainApp />;
}