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.
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).
- react (v16)
- axios
- bootstrap (v4)
- node-sass
- react-redux
- redux (v4)
- react-custom-scrollbars
- reselect
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,
(...)
},
(...)
}
}