kirgawa-react-sdk

kirgawa-react-sdk

Official SDK for the Kirgawa APP

A simple JavaScript SDK for interacting with the Kirgawa API. The kirgawa-react-sdk package provides a hook useStageTimer that allows you to track the duration of a stage event in a React application.

Installation

To install the package, you can use npm or yarn:

npm install kirgawa-react-sdk

yarn add kirgawa-react-sdk

Usage

First, import the SDK and initialize it with your API key and context. The init function must be called with an API key and a context before using the hook. The apiKey parameter is a string representing the API key for the Kirgawa SDK, and the context parameter can be set to either "prod" or "local" depending on the environment.

import kirgawa from 'kirgawa-sdk'

kirgawa.init({
  apiKey: 'YOUR_API_KEY',
  context: 'prod' // 'local', or 'prod'
})

You can generate an API key in the Kirgawa dashboard.

Then, import the hook and use it in your component:

• Login to the Kirgawa dashboard
• Navigate to the "Settings" page
• Click on the "Developer Tools" tab
• Click on the "Create new Token" button
• https://app.kirgawa.com/settings/developer-tools

getStageTimers()

This method gets a list of all the stage timers available.

kirgawa.getStageTimers().then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

getStageTime(id: string)

This method gets a single stage timer by its id.

kirgawa.getStageTime('STAGE_TIMER_ID').then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

createStageTimer(data: CreateStageTimer)

This method creates a new stage timer with the provided data.

const data = {
  title: 'Event Title',
  startAt: '2022-01-01T00:00:00.000Z',
  endAt: '2022-01-01T01:00:00.000Z', // pass any date value if you don't want to set an end date
  meta: '{"description": "Event Description"}' // optional
}

kirgawa.createStageTimer(data).then(response => {
  console.log(response.data)
}).catch(error => {
  console.log(error)
})

useStageTimer(options: StageTimerOptions)

Then, you can use the useStageTimer hook in your component:

import { useStageTimer } from 'kirgawa-react-sdk';
const data = useStageTimer({  continuous: true, eventId: '7dfbeeec-ce2e-47ef-adca-e3dc758a4a07' }) as any;

The useStageTimer hook takes an options object with the properties continuous and eventId. The continuous property is a boolean that indicates if the timer should continue counting even when the end event has been triggered (defaults to false). The eventId property is a string that represents the event id. The hook returns an object with the following properties:

• hour: the number of hours that have passed since the start event
• minute: the number of minutes that have passed since the start event
• second: the number of seconds that have passed since the start event
• timestamp: the timestamp of the start event
• timeSpent: the number of seconds that have passed since the start event
• error: an error object if there was an error during the start or end events
• onEnd(): a function that can be called to trigger the end event
• onStart(): a function that can be called to trigger the start event

It's important to note that the eventId property is required for the hook to work. If the eventId is not provided, the hook will return an object with the error property set to an error object.

Example

Sure, here's an example of how you can destructure the data object to access the properties directly:

import { init, useStageTimer } from 'kirgawa-react-sdk';

init({
  apiKey: "Y2xjeHlzZWx3MDAwNDFqMXI2cHB3YzdqYw.xzHc7_K3OkzZkIkJdPdLX7ufFYnAHncsIcFa1VQqbi5A_KmGSgmBy_Unw_mZ",
  context: 'local'
})

const ExampleApp = () => {
  const { hour, minute, second, timestamp, onEnd, onStart, timeSpent, error } = useStageTimer({  continuous: true, eventId: '7dfbeeec-ce2e-47ef-adca-e3dc758a4a07' });

  return <div>
    <button onClick={onEnd}>End</button>
    <button onClick={onStart}>Start</button>

    <div>Hour: {hour}</div>
    <div>Minute: {minute}</div>
    <div>Second: {second}</div>
    <div>Time spent: {timeSpent}</div>

  </div>;
};

Types

CreateStageTimer

    export type CreateStageTimer = {
      title: string
      startAt: string
      endAt?: string
      meta?: string
    }

StageTimerOptions

    
    export type StageTimerOptions = {
      continuous?: boolean
      eventId: string
    }

KirgawaSDKInit

    export type KirgawaSDKInit = {
      apiKey: string
      context: 'local' | 'prod'
    }