Job description
Creating React components for search fields in the flight search engine, modeled on https://en.tripmydream.com/. HTML element styles based on Bootstrap 4 (using classes and mixins) - i.e. without using styled-components libraries. Based on redux-saga.
The components are to be stateless and reflect the interface like the example below:
<LocationPicker onChange = {handleChange} value = {value} />
components:
- Location field: value in the KOD1_KOD2_KOD3 format (where codes are location identifiers, e.g. airports); after initialization, it downloads from the API into the state of redux full data according to codes, e.g. for "WAW" "Warsaw Chopin (airport)" and displays the full name to the user; you can choose several places (just like on TripMyDream); checkboxes as in TripMyDream
After entering any letter, we ask the API for location suggestions for the phrase entered and display them
Checkboxes as in TripMyDream + already selected locations with marked checkboxes at the top. After choosing the location, the modal closes.
Destination selection - in the absence of entered locations you can select "Anywhere" - after selecting another location after Anywhere - anywhere disappears.
- Date selection field: bookmarks as on TripMyDream; ever selectable, date range, specific date; calendar with the possibility of changing months based on date-fns.
Operation departure date: after clicking on input as on TripMyDream we have 3 options (tabs) to choose from. After clicking on 1) anytime the modal closes 2) Date range we choose the start and end date of the range - after selecting them the modal closes 3) Specific date - we choose the date by 1 click and the modal closes.
Return date: as in departure date + 4) One-way tab - closes the modal 5) Length of stay tab - slider with OK button.
The components should be mobile-friendly: just like TripMyDream, the full-screen mode opens.
The components are to be installed into an existing project to which the source code will be made available.
