-
Notifications
You must be signed in to change notification settings - Fork 0
/
description.txt
93 lines (71 loc) · 3.16 KB
/
description.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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 eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNzEiLCJleHAiOjE2MDM3ODM0Mzd9.3ievseHtX0t3roGh7nBuNsiaQeSjfiHWyyx_5GlOLXk
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,
(...)
},
(...)
}
}