Star Wars DataTable Filters (with Redux)

This project was entirely created as a prerequisite to measure my react_redux skills on Trybe's Software Development course.

What's been done here:

I've made an SPA with React and using redux to control the global state. The application consists in a table with lots of information about planets in Star Wars universe. It's been generated with data from an API. Also, there are filters which will allow users to select and find planets.

Installation

1 - Clone this repo

git clone git@github.com:laurolyra/StarWarsReduxTable.git

2 - Navigate to project's directory

cd StarWarsReduxTable

3 - Install dependencies

npm install

4 - Run the application

npm start

Fullfiled Requrements

Every requirement down below refers to business rules defined by Trybe, which I couldn't change to another pattern or use another technology.

1 - When mounted, the page makes a request to the endpoint `/planets` from a Star Wars API and fill a table with every data but the key `residents`.

All API data is stored in a field called data inside the store. A component called <Table /> renders every data from store. This asynchronous operation was done with the library redux-thunk

2 - Text Field that filters the table to show only planets whose names includes part of the text.

The table is updated with the planets that has part or the letters typed on its name. There isn't a search button. The input field is not case sensitive. E.g., if users type "ald", the planet "Alderaan" is exhibited.

Redux is used to manage the application's state and the text is saved in a field named filters: [{ name }]:

{
  filters: [
    {
      name: 'ald',
    }
  ]
}

3 - The page contains numerics filters.

It works with 3 selectors:

The first one opens a dropdown that allows users to select one of the following columns: population, orbital_period, diameter, rotation_period e surface_water.
The second one has 3 options: more than, less than or equal to ao numero que virá a seguir.
The third one is a input field that allows only numbers.

These three selectors combined, after clicking Filter!, filters every data according to chosen columns and values input. E.g.:

If population | more than | 100000 were selected, table will show, after click on search, only planets with more than 100000 inhabitants.
If diameter | less than | 8000 were selected, table will show, after click on search, only planetas with diameter larger than 8000.

Redux is used to manage the application's state. On store, these values are inserted on fields filters [{ numericValues: { column, comparison, value } }]:

{
  filters: [
    {
      numericValues: {
        column: 'population',
        comparison: 'more than',
        value: '100000',
      }
    }
  ]
}

4 - The page will show only one numeric filter set per time.

If all three dropdowns are filled and user clicks on button Filter!, a new filter set will be shown.

This new set won't include any columns that were selected before. If all the 5 columns were selected and used to filter data, a message No more filters available! will appear on screen. Redux is used to manage the application's state.

E.g., the first filter has the following criteria: population | more than| 100000. The second one appears after clicking on filter, but the first dropdown will show all columns but the one named population. If user selects, on second filter, the options diameter | less than | 8000, the application's state will be as follows:

{
  filters: [
    {
      numericValues: {
        column: 'population',
        comparison: 'more than',
        value: '100000',
      }
    },
    {
      numericValues: {
        column: 'diameter',
        comparison: 'less than',
        value: '8000',
      }
    }
  ]
}

5 - Every numeric filter has an X icon that, when clicked, excludes it and undo any changes made in the table.

The column option of the selected filter (i.e., the first dropdown) is available to be selected again. Redux is used to manage the application's state.

6 - Table's columns can be ordered ascending or descending.

Its order is stored in the fields filters: [{ column: 'Name', order: 'ASC'}]. The field column represents the column's criteria to order the table. By default, it is ordered by name in ascending order:

{
  filters: [
    {
      column: 'Name',
      order: 'ASC',
    }
  ]
}

laurolyra/StarWarsReduxTable