@grupomayo/events-sdk v1.6.0

GRUPO MAYO events SDK

Install

yarn add @grupomayo/events-sdk

Usage

First and foremost, you will need a custom FetchService that implements the IFetchService interface exported by the SDK. In this example, we'll be using the one from @betino/fetch, which already implements this interface, you can install it by runnning the following in your terminal:

yarn add @betino/fetch

Once you have installed or created your fetch service, you need to create an instance of fetchService:

import { FetchService } from '@betino/fetch'
export const fetchService = new FetchService()

You can pass the baseURL as param when instantiating the FetchService class.

import { FetchService } from '@betino/fetch'
export const fetchService = new FetchService('baseURL')

After that, create an instance of EventService and pass as parameter the fetchService that you've created before:

import { EventService } from '@grupomayo/events-sdk'
export const eventsService = new EventService(fetchService)

You can pass as a second parameter, the id of the event as well.

import { EventService } from '@grupomayo/events-sdk'
export const eventsService = new EventService(fetchService, 'eventId')

At this point, you can start working with your component. Create a ReactJS component, import both services that you've created, if you didn't assign a baseURL and/or eventId to your services before, then do it now.

export function App() {
  fetchService.baseURL = 'yourAPIUrl'
  eventsService.eventId = 'eventId'

  return (
    {/* Rest of your component */}
  )
}

Then you could use the useEventForm hook and pass to it the eventsService in order to get all the nescessary logic.

const event = useEventForm(eventsService)

• isLoading: boolean -> If is loading the form data.
• data: EventForm -> The event data.
• getInputProps: () => {} -> All the props for your input. You can use this function to get all the pros for your input
• onSubmit: (callback, errorCallback) => void -> The submit logic, you have to use this function in the onSubmit prop in tour form, you can pass 2 callbacks that will execute when the submit finishes OK (first one) or KO (second one).
• errors: {} -> The errors object, here you'll have all the ocurred errors returned by the API. The errors of the field will be passed by the gitInputProps function.

Examples

Here you have a full example:

import { FetchService } from '@betino/fetch'
import { EventService } from '@grupomayo/events-sdk'
import { useEventForm } from '@grupomayo/events-sdk'
import { Input, Select } from './FormComponents'

export const fetchService = new FetchService('https://yourapi.com/api')
export const eventsService = new EventService(fetchService, '33')

const componentsMap = {
  input: Input,
  select: Select,
}

export function App() {
  const event = useEventForm(eventsService)

  function onSubmitFinishesOK () {
    alert('submit_ok')
  }

  function onSubmitFinishesKO () {
    alert('submit_ko')
  }

  return (
    <form onSubmit={event.onSubmit(onSubmitFinishesOK, onSubmitFinishesKO)}>
      {!event.isLoading && event.data.fields.map(field => 
        React.createElement(componentsMap[field.type], { 
          inputProps: event.getInputProps(field) 
        })
      )}
    </form>
  )
}

Here an example of how to create the form components

export function Input ({ inputProps }) {
  return (
    <>
      <label htmlFor="floatingInput">{inputProps.label}</label>
      <input className="form-control" {...inputProps} type="text" placeholder={inputProps.label} />
    </>
  )
}

export function Select ({ inputProps }) {
  return (
    <>
      <label htmlFor="floatingInput">{inputProps.label}</label>
      <select className='form-select' {...inputProps}>
        <option value="">Select one...</option>
        {inputProps.options.map(option => <option value={option} key={option}>{option}</option>)}
      </select>
    </>
  )
}