{"id":21744024,"url":"https://github.com/telefonica/react-code-test","last_synced_at":"2025-03-21T01:40:35.593Z","repository":{"id":66221951,"uuid":"488907088","full_name":"Telefonica/react-code-test","owner":"Telefonica","description":null,"archived":false,"fork":false,"pushed_at":"2022-09-13T12:10:41.000Z","size":978,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":22,"default_branch":"main","last_synced_at":"2025-01-25T22:21:41.459Z","etag":null,"topics":["cdco","managed","org-cdo","srv-novum"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Telefonica.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-05T09:23:43.000Z","updated_at":"2023-02-08T09:32:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"bbcb5607-e94e-49c0-bb48-3f88af25fc47","html_url":"https://github.com/Telefonica/react-code-test","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telefonica%2Freact-code-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telefonica%2Freact-code-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telefonica%2Freact-code-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Telefonica%2Freact-code-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Telefonica","download_url":"https://codeload.github.com/Telefonica/react-code-test/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244722653,"owners_count":20499151,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cdco","managed","org-cdo","srv-novum"],"created_at":"2024-11-26T07:09:45.626Z","updated_at":"2025-03-21T01:40:35.588Z","avatar_url":"https://github.com/Telefonica.png","language":"TypeScript","readme":"# React code test\n\n## How to send the solution\n\n:warning: **PLEASE, DON'T SEND PULL REQUESTS TO THIS REPOSITORY**\n\n:warning: **PLEASE, DON'T PUBLISH YOUR SOLUTION IN A PUBLIC REPOSITORY**\n\n:warning: **Do not install any additional dependencies.**\n\nOnce you have finished the exercise, just copy the `src/` directory into a zip file and send it by email.\n\nAppart 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.\n\n## The exercise\n\nYou 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.\n\nYou can start by running the app with:\n\n```\nyarn \u0026\u0026 yarn start\n```\n\nYou'll get some TypeScript errors, but they should disappear once you finish Task 1.\n\n## Tasks\n\n### Task 1: consume the api\n\nConsume the provided api in `src/api.tsx` and render the people list in the App component.\n\nReview 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.\n\nImplement a loading UI while the user waits for the api response.\n\nImplement an error UI when the api response fails.\n\nWe don't expect a fancy UI, a simple/functional one is enough.\n\nOnce you have finished Task1, the `app-test.tsx` `\"Task1\"` test should pass. You can run it with:\n\n```\nyarn test\n```\n\nThe test should pass, but you may see a react warning. Fix it in Task 2.\n\nAt this point you should see a fully functional application with a responsive UI working both in mobile and desktop viewports:\n\n![desktop](img/desktop.png)\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"img/mobile.png\"/\u003e\n        \u003ctd\u003e\u003cimg src=\"img/mobile-detail.png\"/\u003e\n\u003c/table\u003e\n\nRemember that the UI is responsive, because you may need special code for mobile/desktop viewports in some of the following tasks.\n\n### Task 2: fix react warning\n\nThere is a react warning in the console:\n\n```\nWarning: Each child in a list should have a unique \"key\" prop\n```\n\nFix it.\n\n### Task 3: desktop empty case\n\nThe 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.\n\n### Task 4: ui bug in desktop details\n\nThere 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).\n\nSteps to reproduce the bug:\n\n1. Select any person\n2. Click on the Location tab\n3. Select a different person\n\nResult: the Location tab is still selected.\n\nExpected behavior: the Contact tab should be selected.\n\n### Task 5: refactor Person name rendering logic\n\nThere 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.\n\n### Task 6: implement a favorites list\n\nThe user should be able to mark/unmark a person as a favorite.\n\nAdd 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.\n\nAs a user, I want to easily identify a person in the list as a favorite in the `\"People\"` section too.\n\nSome UI suggestions:\n\n-   You can set right actions to navbars, [like in this example](https://mistica-web.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8A5AhgNwJYHM0BcsIA7AITQCcAdYgAlvwgAcAxLADxigF5gAzNABsAzjAC%2BNeiXJgA1rwAUASlrcAfLWBiJdBlnyCY3KiBYBXQWmL6ItWLQAqQk5NoVcAC3y9X9VJlwCIjJKAEEwQhIAcQoIMyY1X3paf2w8SJCKcIzaSiw0AFpLACMYQWMQAFViAFtKWVzhWgEMCHd8GBNaEgAFChhhYUUVdU1tRN1k5KQASUhiAGV8SjZBQyhaSEE2irAzCn7ifABhCG3qEFoAegmpvyv0NKDpMIjg2%2BmHgPTg8iy36KxeIfHQ3Gg0VKBDJ-VyMVgcLi8AQicSuF5yYaqDRaHT0QgGIwmcyWayMOwwRzOECudw4Lw%2BSYpR5Q36vDIxOIJJJ%2BZk-F7-HJ5QolMoVACy9UazUwbX0nUuvX6g0xoxxHzuKTmJCWlAASjAcBZKJszjsTHsDjAjqdzl0wYz7rznplsu8kkgvk9oWzghzga5QRMQAAaED4DwwGoDBAAbRADjKMD4JCwYDQIAAuqGAO5YKDh4SxgDMADYAAwZsRAA). You can use a filled/unfilled star icon to toggle the person as fovorite.\n-   To mark a favorite person in list row, you can conditionally use a `headline` `Tag` [like in this example](https://mistica-web.vercel.app/playroom#?code=N4Igxg9gJgpiBcIA8AlCB3AOgOwAS4AsYBDKAGwEtsYBeYJAFWIHNcAXATwAdbMQuAThAC2EPgD4AYsQBuEARTYwkAeibNxAXxz5iAZz0w2dHflxIAwhQFgyMU2dx6KAL1rAALAAZteR7gAjYjAAa2YhAFdsKABJYRZ3PgI2Ni49eBUVAWJokQjDAQA6YRgVYi4KFS55NmzFPRUSqEaYbBUAdnbCgCsuZj5fRxVxU0H2RTsaPkkIshzFCFxYXCYyPlMIbAAFARgDOgAKAEpcGnFcYE1fYZwQABoQNiISvQQAbRAGGDsAM02KMDEEAAXQe6AoUCer3gbwAzAA2LzAzRAA).\n\nAll the components in the above UI examples can be imported from `@telefonica/mistica` package.\n\n**Tip**: you'll need to replace the `console.log` in the `onPress` handler of `MainNavigationBar` with the code needed to switch between sections.\n\nHere is an example of the expected UI:\n![favorites ui 1](img/favorites.png)\n![favorites ui 2](img/favorites2.png)\n\n### Task 7: write a test for Task 6\n\nWrite one or more tests in `app-test.tsx` to cover the feature implemented in Task 6.\n\n### Task 8: implement persistence\n\nImplement 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.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelefonica%2Freact-code-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftelefonica%2Freact-code-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftelefonica%2Freact-code-test/lists"}