Once you have finished the exercise, just copy the src/ directory into a zip file and send it by email.
Appart from the src/ directory, you can include a text file with notes or comments if you want, or comment on anything you consider relevant in the email.
You are given this React app skeleton and you need to solve the following tasks. You don't need to solve all of them, but the more you solve the better. Try at least to solve Task1 and Task6, which are the more important. Some tasks are independent, but take into account that to solve some of them you need to first solve the previous ones. For example, you need to solve Task 1 before any other.
You can start by running the app with:
yarn && yarn start
You'll get some TypeScript errors, but they should disappear once you finish Task 1.
Consume the provided api in src/api.tsx and render the people list in the App component.
Review the console.log() calls in the onPress handlers and replace them with the needed logic to select a person when the user clicks on a row and deselect it when the user navigates back.
Implement a loading UI while the user waits for the api response.
Implement an error UI when the api response fails.
We don't expect a fancy UI, a simple/functional one is enough.
Once you have finished Task1, the app-test.tsx "Task1" test should pass. You can run it with:
yarn test
The test should pass, but you may see a react warning. Fix it in Task 2.
At this point you should see a fully functional application with a responsive UI working both in mobile and desktop viewports:
| 
|
Remember that the UI is responsive, because you may need special code for mobile/desktop viewports in some of the following tasks.
There is a react warning in the console:
Warning: Each child in a list should have a unique "key" prop
Fix it.
The app ui is responsive and works as a master/detail layout in desktop, with a left side list of people and a detail view in the right side of the screen. When there isn't any selected person from the list, the right side of the UI in desktop is empty, we want to render an empty case there instead.
There is a bug in the ui in desktop viewport: when we switch between different people, the details tabs (Contact/Location/Login) should reset to the first tab (Contact).
Steps to reproduce the bug:
- Select any person
- Click on the Location tab
- Select a different person
Result: the Location tab is still selected.
Expected behavior: the Contact tab should be selected.
There are different parts of the code where we join the person's first and last name to render the person's full name. This code duplication has also lead to inconsistences in the UI. We want the person's full name to always be rendered in the same way.
The user should be able to mark/unmark a person as a favorite.
Add a section to the MainNavigationBar with the title "Favorites". When the user navigates to the new "Favorites" section, the people list should only show people marked as favorite.
As a user, I want to easily identify a person in the list as a favorite in the "People" section too.
Some UI suggestions:
- You can set right actions to navbars, like in this example. You can use a filled/unfilled star icon to toggle the person as fovorite.
- To mark a favorite person in list row, you can conditionally use a
headlineTaglike in this example.
All the components in the above UI examples can be imported from @telefonica/mistica package.
Tip: you'll need to replace the console.log in the onPress handler of MainNavigationBar with the code needed to switch between sections.
Here is an example of the expected UI:
Write one or more tests in app-test.tsx to cover the feature implemented in Task 6.
Implement a local persistence using localStorage or any other method. We want to persist favorites too. Also, take into account that server data may change, so we don't want to use cached data forever.