Purpose

This project has all the common services for mobile and web applications.

Topics

- Purpose
- Topics
- Setting up
- Building the project
- Structure
- Core
- Connector
- Loader
- Notificator
- Hooks
- useService
- useLoadingState
- useNotificationState
- Services
- execute()
- useAsHook()
- Service declaration
- Generator
- Service
- Hook

Setting up

- Configure your npm registry

``bash
npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false
npm run registry:authenticate
`

- Install dependencies

`bash
npm install
`

Building the project

`bash
npm run build
`

Structure

| Folder | Description |
| --------------------- | ----------------------------------------------------- |
| Core | Contains all the core services |
| Hooks | Contains all the hooks |
| Services | Contains all http clients for web and mobile projects |

Core

Is all logic encapsulated in private services, that is, they are not exported in the package.

$3

The service responsible for all the http requests. It is a wrapper for the an Axios instance, containing some other logic, such as error handling, loading state and header injection.

$3

It is a singleton containing the isLoading state, which is an observable. So everytime an http request starts this state is changed to true and when it ends it is changed back to false.

$3

It is also a singleton, containing the notification state, which is an observable. So everytime an http request in completed it is updated. It is used for error handling.

Hooks

Basically a hook is a function that can use in our components to encapsulate some logic. For more details about React Hooks read the official documentation. In the hooks folder we have all the custom hooks, through them we can expose some core service.

$3

Is a hook that encapsulate all the logic on using a service into a React component. It basically return an object with the following properties:

- response:
- A state representing the response coming from the service.
- error:
- A state representing the error coming from the service, if it occurs.
- send:
- Its a function that triggers the service call.
- onSuccess:
- Its an event function for success.
- Receives a handler to be executed when response is returned successfully.
- onError:
- Its an event function for error.
- Receives a handler to be executed when service returns an error.

$3

It create an isLoading state, based on the global state located on the Loader core service. The isLoading state is automatically updated when Loader global state changes.

$3

It create an notification state, based on the global state located on the Notificator core service. The notification state is automatically updated when Notificator global state changes.

Services

Each http request in the project is represented by a service, which have both request and response types. The services expose two main methods: execute and useAsHook.

$3

This method is responsible for execute the http request with the specific configuration.

$3

This method can be used into React components, as a hook. It basically is the useService hook but with the especific execute logic.

$3

Every service extends the ApiService class, which receives an object that contains the request configuration.

Generator

Execute the command:

``bash
npm run generator
`

It will give us two options:

- Service
- Hook

Service

To generate a service we need the following parameters:

- Domain name:
- The entity you want the service to be associated with.
- Service name:
- Must describe the request method.
- Endpoint URL.
- Endpoint method.

It will generate a new directory into the domain directory, with an index.ts file.

`javascript
import ApiService from '@services/_base';
import GetExampleResponse from './interfaces/response';
import GetExampleRequest from './interfaces/request';

class GetExampleService extends ApiService<
GetExampleResponse,
GetExampleRequest
> {
constructor() {
super({
config: request => ({
url: '/example',
method: 'GET',
params: request,
}),
handleLoader: true,
handleError: true,
});
}
}

export default GetExampleService;
export { GetExampleResponse, GetExampleRequest };
`

It also generate two interfaces into an interfaces directory. The request.ts, that represents the request body.

`javascript
export default interface GetExampleRequest {}
`

And the response.ts, that represents the response body.

`javascript
export default interface GetExampleResponse {}
`

This is our base to define any service.

Hook

To generate a hook we pass only one parameter: The hook name. It must stars with the 'use' prefix.

It will generate a directory for the hook into the hooks folder, with an index.ts.

`javascript
import * as React from 'react';

const { useState } = React;

export default function useExample() {
const [state, setState] = useState('');

return [state, setState];
}
``

With this base structure you can create your own custom hook.

Both generators automatically export the components.