js-api-starter v0.1.0

js-api-starter

JS API Layer for the an app. This is solely to facilitate API calls and to run a proxy and mock server.

Installing

yarn add js-api-starter redux-thunk redux-saga

redux-thunk and redux-saga is necessary in order to use this package. Make sure the root reducer for the reducers in this package is named jsApi.

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { all } from 'redux-saga/effects';
import thunk from 'redux-thunk';
import { Api, compileReducers, sagas } from 'js-api-starter';

/* ------------- Assemble The Reducers ------------- */
const reducers = combineReducers({
  ...,
  jsApi: compileReducers(),
});

/* ------------- Middlewares ------------- */
const sagaMiddleware = createSagaMiddleware();
const middlewarers = [thunk, sagaMiddleware];

/* ------------- Store ------------- */
const store = createStore(reducers, compose(applyMiddleware(...middlewarers)));

/* ------------- Root Saga ------------- */
function* rootSaga() {
  yield all([
    ...sagas,
  ]);
}

/* ------------- Sagas ------------- */
const sagasManager = sagaMiddleware.run(rootSaga);

/* ------------- Initialize Package ------------- */
Api.initialize(store);

If you ever create the store again, you need to call Api.initialize(store); again in order to update the store reference.

Config.json Breakdown

The first key in the root level of the config.json is what becomes the "Class Name" of that specific API. It's basically a group. So COLLECTION_HUB in this instance will generate a folder under src/collection-hub and so on.

Each entry inside the array assigned to COLLECTION_HUB is an API endpoint. type: This is the method of the API call url: URL of the API call. Any URL param such as here "/me/collectionhublogs/:logId" will be an extra argument on the API function. You would call it like this, CollectionHub.deleteLog(logId). label: This is the name of the method for the endpoint as well as the name used to generate actions/reducers/selectors. description: This is the JS Doc description of the API method. paramDescriptions: This is the JS Doc description of each of the parameters for that method. preProcessMethod: This is a string representing a function name exported from the file src/utils/index.js which is calling on the body of a API call before sending it. postProcessMethod: This is a string representing a function name exported from the file src/utils/index.js which is calling on the body of a API call after receiving it.

{
  "COLLECTION_HUB": [
    {
      "type": "get",
      "url": "/me/collectionhub",
      "label": "getCollectionHubInfo",
      "description": "Gets the current patient collection hub info"
    },
    {
      "type": "put",
      "url": "/me/collectionhublogs/:logId",
      "label": "deleteLog",
      "description": "Deletes a log from the collection hub logs",
      "paramDescriptions": {
        "data": "The collection hub log data",
        "logId": "ID of the collection hub log"
      }
    }
  ]
}

Running Servers

You can run the servers by adding this script to your package.json "js-api": "js-api" and then running yarn js-api. To run different environments, you can run yarn js-api production or yarn js-api stage. To skip the mock server and proxy the API calls to the real server directly, run with the --no-mock (--nm also valid) argument as such: yarn js-api production --no-mock.

Usage

To use, import any class and call the specific static method.

import { Connections } from 'js-api-starter';

...
  Connections.submitConnection(clientId, data, axiosConfigObject);
...

Making API Calls

To make an API call (Fire a redux action)

import { Connections } from 'js-api-starter';

Connections.getConnections();

To make an API call (No redux action)

import { Connections } from 'js-api-starter';

Connections.getConnections({ noRedux: true }).then((result) => {
  console.log(result);
});

Using Selectors

Selectors can be accessed easily by the className which is Patient in this case all lowercase, and then the same method name as shown below.

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { Patient, selectors } from 'js-api-starter';

const Component = ({
  data,
}) => {
  useEffect(() => {
    Patient.getPatientInfo();
  }, []);

  return (
    <div>
      DataLoaded {data.dataLoaded}
      Error {JSON.stringify(data.error)}
      Fetching {data.fetching}
      Data {JSON.stringify(data.payload)}
    </div>
  );
};

const mapStateToProps = state => ({
  data: selectors.patient.getPatientInfo(state),
});

export default connect(mapStateToProps)(Component);

Notes

Be aware that different methods have different arguments varying on GET, POST, PUT, and PATCH. VS Code should support intelli-sense with the JS Docs and should make it easy to know which arguments to pass. As a rule of thumb, GET DELETE have arguments config, POST PUT PATCH have data, config. But there could be any number of arguments coming before those depending on the url, such as noteId, recommendationId, config.

Contributing

To add/remove/modify apis, you can modify the config.json file with the changes you desire and simply run yarn generate:all. You can also run it with the flag no-overwrite as such: yarn generate:all --no. This will make existing files not be overwritten.