Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.editorconfig
.eslintignore
.eslintrc
.gitignore
README.md
jsconfig.json
package.json
yarn.lock

README.md

Trello Stats

Trello Stats is an application for tracking tasks progress.

Getting started

  1. Clone this repository.
  2. yarn install to install all required dependencies.
  3. yarn start to run local development server.
  4. yarn lint to lint project.
  5. yarn build to build project.

To run tests use yarn test. For more commands check the package.json file.

Overview

This project is based on redux and redux-saga.

Configuration

If you are going to connect your API during development, you should change value of REACT_APP_API_URL property in .env.local.

DEFAULT_API_URL: 'http://localhost:8080'

Redux

This project has combined API requests with Redux. You can use methods below to handle requests in your store.

apiAction(type, endpoint, method, [options])

An action creator generates action for an API request.

  • type (string) - The type of the action.
  • endpoint (string) - The endpoint URL.
  • method (string) - The type of the HTTP request method (GET, POST, etc.).
  • options (object) - Additional things which may extend the action.
  • options.payload (object) - The payload data sending to API.
  • options.afterSagaSuccess (function) - The generator function that will be call after success in saga.

You can use options.afterSagaSuccess to call other action. For example:

afterSagaSuccess: function* () {
  yield put(someActions.getSomeData());
}

apiSaga(type)

Method creates saga for an API request.

  • type (string) - The type of the action.

apiReducer(type, [reduceSuccess])

Method creates reducer for an API request.

  • type (string) - The type of the action.
  • reduceSuccess (function) - The callback function to customize state after success.

You can use reduceSuccess to modify and return new state. For example:

list: apiReducer('FEED_LIST', (state, action) => {
  let data = {...action.data};

  const newData = data.map((item) => {
    // Modify original data from API
  });

  return { ...state, data: newData };
})
You can’t perform that action at this time.