Description: Challenge for Adjust Frontend Developer
Owner: adjust
Contacts: [email protected]
Here you will be given the opportunity to play with JavaScript and Rockets in the same project. For this, we recommend you to block 2-3 hours of your time to complete it.
Please make sure you have read this page entirely, before starting the challenge. If you have any doubts, please reach out to us by opening an issue as described at the bottom of this page.
Importantly, we would like to give all candidates taking this test the same opportunity to solve the exercise in their own way. Because of this, please do not fork or share this repo (nor your solution) with anybody 🙏🏻
- You MUST clone this repo to a location of your choosing where you can work on your solution
- Write your solutions inside of the files contained in
src/solutions
, making sure the provided tests are green. Please do not modify anything inside ofsrc/tests
- Push your solution to a private repo in your personal Github account
- When you are ready for us to take a look, please add adjust-frontend-hiring (GitHub user) as collaborator
Your challenge submission will be disqualified and automatically rejected if any of the following happens:
- Your repo was not properly cloned as specified on step #1 of Instructions. See how to clone a repository here. Note: If you cloned the repo properly, previous commits from this (original) repo, must be showing on your git history.
- Your tests are not passing (green) as specified on step #2 of Instructions. Note: You can run tests with command
npm run test src
oryarn test src
(according to the package manager you are using). - You have modified any of the files inside of
src/tests
as specified on step #2 of Instructions. - Your repo visibility is not set to private as specified on step #3 of Instructions. See how to make a repository private here.
Implement prepareData
higher order function, which takes an object of filter params {year, customerName}
, and returns a function that processes a list of missions, by only showing the ones that were launched in year
and carried a payload belonging to customerName
.
Observations:
- You can use any utility library you see fit
- Missions should appear in inverse chronological order (sort), with the exception of those that carried more payloads should appear first.
- Payloads are carried in the second stage of a rocket and they can belong to multiple customers.
- It doesn't matter to which
customerName
'program' each payload belongs to as long ascustomerName
is the customer.
Example:
Considering we have the list of missions from this data fixture, and the following filter params:
{
year: 2018,
customerName: "NASA"
}
The expected result should be:
[
{
flight_number: 62,
mission_name: 'Iridium NEXT Mission 6',
payloads_count: 2,
},
{
flight_number: 72,
mission_name: 'CRS-16',
payloads_count: 1,
},
{
flight_number: 64,
mission_name: 'CRS-15',
payloads_count: 1,
},
{
flight_number: 60,
mission_name: 'TESS',
payloads_count: 1,
},
{
flight_number: 59,
mission_name: 'CRS-14',
payloads_count: 1,
},
];
Implement RocketsList
component with the following specifications:
- It takes
filerParams
object (with shape described in task #1) as a prop - It obtains a list of 'missions' from a custom hook, which uses global fetch (
window.fetch
) to GET the whole list of missions from SpaceX API and processes them withprepareData
function (from task #1) andfilterParams
prop - For each 'mission' obtained from the custom hook, it renders a string using template literals with the following format: "#
flight_number
mission_name
(payloads_count
)" - While 'missions' are being fetched from API, it renders
"Loading..."
to screen - If no 'missions' are obtained from the custom hook, it renders
"No data"
to screen
Observations:
- Missions processing with
prepareData
must happen inside the custom hook - The list of missions should be re-processed if
filterParams
prop changes, BUT no new API calls should happen to SpaceX API - You are not allowed to use any of the filter parameters provided by the SpaceX API docs, just fetch all available data and process it with
prepareData
function - Only global fetch (
window.fetch
) can be used to make API requests
Example:
Considering we pass the following filterParams
as a prop:
{
year: 2018,
customerName: "NASA"
}
The expected render should be:
#62 Iridium NEXT Mission 6 (2)
#72 CRS-16 (1)
#64 CRS-15 (1)
#60 TESS (1)
#59 CRS-14 (1)
If you have any doubts, you can reach out to us by simply creating a GitHub issue in your private repo.
Describe your question(s) and mention adjust-frontend-hiring in your comments (don't forget to add user as collaborator). We will then receive a notification and get back to you as soon as possible.