react-hooks-unit-tests/README.md

101 lines
3.3 KiB
Markdown
Raw Normal View History

2019-06-28 01:53:57 -04:00
# Tempo challenge
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
A React app to harvest Tempo's team REST service.
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
## Challenge
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
* Build a UI showing an overview of all the teams, and allow the current user to navigate between teams to see each team's members.
* At the top of the teams overview page, add an input field, which filters the teams when the input value changes. This input field could also be used in other pages of your app, e.g. for filtering out team members in the team page.
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
## Solution
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
The end points of Tempo's REST API provide segmented info of their teams and members. In order to display all information I structured the app into 3 levels:
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
1. A Home view with all teams
2. A Team view with all members of a selected team
3. A Member view with the info of a selected member
2019-06-23 16:41:35 -04:00
This structure allows segmentation of the API calls. For example, the call for a member's data is made only when the third view is loaded. Yet, many calls are done right when loading the first Home view, and the data retrieved there must be passed down to the other components.
2019-06-23 16:41:35 -04:00
To do so, I chose not to implement Redux, Redux-Saga nor similar solutions. Instead, I used react-router v4 with a structure to manage the transfer of props between components.
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
This choice favors simplicity and fits quite well for small applications, specially when using React Hooks, as is the case.
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
Bigger applications would obviously make harder to track the passage of props between components, at which point it would be useful to implement a store to be the single source of truth for all the views of the app.
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
## App structure
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
The 3 main views cited above are stored in `src/views`.
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
The `src/components` holds the input field that filters results. It is used from the Home and the Team views. It also has a team list component.
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
The all-mighty router is in `src/components`.
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
```
.
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── components
│   │   ├── FilterForm.jsx
│   │   ├── FilterForm.scss
│   │   ├── Router.jsx
│   │   └── TeamList.jsx
│   ├── views
│   │   ├── __mocks__
│   │   │   └── axios.js
2019-06-28 01:53:57 -04:00
│   │   ├── Home.jsx
│   │   ├── Home.scss
│   │   ├── Home.test.js
2019-06-28 01:53:57 -04:00
│   │   ├── Member.jsx
│   │   ├── Member.scss
│   │   ├── Member.test.js
2019-06-28 01:53:57 -04:00
│   │   ├── Team.jsx
│   │   ├── Team.scss
│   │   └── Team.test.js
2019-06-28 01:53:57 -04:00
│   ├── App.js
│   ├── App.scss
│   ├── App.test.js
│   ├── config.json
│   ├── history.js
│   ├── index.css
│   ├── index.js
│   ├── serviceWorker.js
│   └── setupTests.js
2019-06-28 01:53:57 -04:00
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
└── pbcopy
2019-06-28 01:53:57 -04:00
```
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
## Requirements
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
Node JS and npm.
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
## Installation
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
Clone this repository
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
git clone https://github.com/Rodrigoplp/tempo-rest-client.git
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
Install dependencies
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
npm install
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
Start the app
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
npm start
2019-06-23 16:41:35 -04:00
2019-06-28 01:53:57 -04:00
Open a browser and access `http://localhost:3000`.
## Tests
Test written with Jest and React Testing Library. To run tests:
yarn test