Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/koko37/react-dev-test
Pastors Line - React Developer Test
https://github.com/koko37/react-dev-test
create-react-app javascript react-custom-scrollbars reactjs reselector
Last synced: 4 days ago
JSON representation
Pastors Line - React Developer Test
- Host: GitHub
- URL: https://github.com/koko37/react-dev-test
- Owner: koko37
- Created: 2020-08-06T00:18:32.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-18T16:49:43.000Z (almost 4 years ago)
- Last Synced: 2023-10-27T04:26:58.588Z (about 1 year ago)
- Topics: create-react-app, javascript, react-custom-scrollbars, reactjs, reselector
- Language: JavaScript
- Homepage:
- Size: 240 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Pastors Line - React developer test
This test is intended to check you are using the best practices and you know how to use libraries we are using. This is a small task, but please think about it as a part of something bigger.
Please create a public repository on your Github or Bitbucket account and push the code there. Use branch /feature/react-dev-test and merge it to master via Pull Request.
### Task description
The main screen should have two buttons (Button A and Button B described below) centered vertically and horizontally with a margin between.
Clicking on Button A should open a Modal A. Clicking on Button B should open a Modal B.
Both modals should have three buttons:
- Modal Button A - labeled ‘All Contacts’, switching to Modal A
- Modal Button B - labeled ‘US Contacts’, switching to Modal B
- Modal Button C - labeled ‘Close’, closing modals
and a checkbox in a footer, LHS:
- Checkbox A - labeled ‘Only even’, when checked, only contacts with even ID (ex. 2, 4, 6...) should be displayed.
In Modal A should be displayed (from API) contacts from all countries.
In Modal B should be displayed (from API) contacts only from US.
Clicking on the contact items in modals should open a next modal (Modal C) with few contact details, no matter what.
Opening Modals A and B should change the URL of the page.
Opening Modal C should NOT change the URL.
Button A and Modal Button A should have a color: #46139f
Button B and Modal Button B should have a color: #ff7f50
Button C should have a white background and border #46139f (same as the background of Button A)
Modals A and B should have a search box to filter contacts (use API param). Contacts should be filtered while typing in a search input (with a small delay) and immediately on hitting the Enter key.
Lists of contacts should display only the first page (API param, page=1) after scrolling to bottom of modal load next page (infinity scroll).
### Part of our stack (npm)
- react (v16)
- axios
- bootstrap (v4)
- node-sass
- react-redux
- redux (v4)
- react-custom-scrollbars
- reselect
### Contacts API
GET https://api.dev.pastorsline.com/api/contacts.json
Authorization via header:
Authorization: Bearer xyzxyz
CORS is allowing only pages at http://127.0.0.1:30080
Params:
- companyId - use 171
- query - to filter by names and number
- page - pagination
- countryId - to filter by country. The US has a 226 ID.
Example of result:
```
{
"total": 10, // total amount of found contacts
"contacts_ids": [ // this a list of IDs of found contacts
745450,
502931,
(...)
],
"contacts": { // this is a data of found contacts
"745450": {
"id": 745450,
"first_name": "Jason1",
"last_name": "Alexis1",
"email": null,
"phone_number": "9404480524",
"country_id": 226,
(...)
},
"502931": {
"id": 502931,
"first_name": "jason",
"last_name": "Alexis",
"email": "",
"phone_number": "0",
"country_id": 226,
(...)
},
(...)
}
}
```