ChilliSource.Front.Modules

Swagger

This is unarguably one of the most of touchy topics for devs to agree upon. Everyone has their way of writing code and thus, different opinions. I consider myself neither experienced or opinionated enough to be able to decide on behalf of all devs so I’m gonna take the easy route and let the dev decide for himself.

This component exports two components - FetchData & SendData - and one utility - ApiRequest. This was based on two different usecases - one as wrapper for React view components and another a way to manually execute API requests without being directly coupled with a view component.

FetchData

This component is primarily intended as a way to fetch data and display it without involving the store. Websites that don’t require registration or public websites can use this without having to complicate the state. Read the docs

Importing

You can do either :

import Swagger from '../components/Swagger'

...

<Swagger.FetchData ...>{...}</Swagger.FetchData>

or

import { FetchData } from '../components/Swagger'

...

<FetchData ...>{...}</FetchData>

Usage

Basic

<FetchData apiPath="/chapters">
  {...}
</FetchData>

or

<FetchData apiPath="get/api/v1/chapters">
  {...}
</FetchData>

Basic with path arguments

<FetchData apiPath="/chapters/27">
{...}
</FetchData>

or

<FetchData apiPath="get/api/v1/chapters/{chapterId}"
           pathArgs=>
{...}
</FetchData>

Basic with path & query arguments

<FetchData apiPath="/chapters/27?questions=false">
{...}
</FetchData>

or

<FetchData apiPath="get/api/v1/chapters/{chapterId}"
           pathArgs=
           queryArgs=>
{...}
</FetchData>

SendData

This component is primarily intended as a way to make API requests the React way - using components that can be inserted as and where you feel like. Its a pure component and has nothing to with the store. Read the docs

Importing

You can do either :

import Swagger from '../components/Swagger'

...

<Swagger.SendData ...>{...}</Swagger.SendData>

or

import { SendData } from '../components/Swagger'

...

<SendData ...>{...}</SendData>

Usage

Basic

<SendData apiPath="/account/login" type="POST">
{...}
</SendData>

or

<SendData apiPath="post/api/v1/account/login">
/**
 * You can copy this( ^ ) full path from the
 * SwaggerView(https://localhost:9009) or the
 * swagger docs for the project
 */
{...}
</SendData>

Basic with path args

<SendData apiPath="/chapters/27/lessons/149" type="PUT">
{...}
</SendData>

or

<SendData apiPath="put/api/v1/chapters/{chapterId}/lessons/{id}"
          pathArgs=>
{...}
</SendData>

Basic with path args & queryArgs

<SendData apiPath="/group/32/users/12?summary=true" type="DELETE">
{...}
</SendData>

or

<SendData apiPath="delete/api/v1/group/{groupId}/users/{id}"
          pathArgs=
          queryArgs=>
{...}
</SendData>

ApiRequest

This a utility to make API request on your own. It always returns a Promise. If the request can not be made it returns a Promise that rejects with an error object. Read the docs

Importing

You can do either :

import Swagger from '../components/Swagger'

...

Swagger.ApiRequest.Get(...)

or

import { ApiRequest } from '../components/Swagger'

...

ApiRequest.Get(...)

Methods

• ApiRequest.Get
• ApiRequest.Post
• ApiRequest.Put
• ApiRequest.Patch
• ApiRequest.Delete

There is also one another method - ApiRequest.Base - which allows you to customise every part of a network request to your liking.

Usage

Basic

ApiRequest.Get("/chapters")
          .then(response => ...)
          .catch(error => ...)

ApiRequest.Post("/account/login", {
            body: { email, password }
          })
          .then(response => ...)
          .catch(error => ...)

Basic with path args

ApiRequest.Post("/chapters/27/lessons/149", {
            body: {
              completed: true
            }
          })
          .then(response => ...)
          .catch(error => ...)

Basic with path & query args

ApiRequest.Delete("/group/32/users/12?summary=true")
          .then(response => ...)
          .catch(error => ...)

Base

This base request method is like a master request for all the above methods and components. Under the hood, this base request is the one that actually gets executed. It works with full raw apiPath or in the way you use other methods above.

ApiRequest.Base("get/api/v1/chapters")
          .then(response => ...)
          .catch(error => ...)

ApiRequest.Base("get/api/v1/chapters/27/lessons/149")
          .then(response => ...)
          .catch(error => ...)

ApiRequest.Base("post/api/v1/chapters/{chapterId}/lessons/{id}", {
            path: {
              chapterId: 27,
              id: 149
            },
            body: {
                completed: true
            }
          })
          .then(response => ...)
          .catch(error => ...)

ApiRequest.Base("delete/api/v1/group/{groupId}/users/{id}", {
            path: {
              groupId: 32,
              id: 12
            },
            query: {
              summary: true
            }
          })
          .then(response => ...)
          .catch(error => ...)