We need help to fix some bugs and improve some areas/components at this stage. The goal of this challenge is to fix the project search component behavior.
Currently the search component has some flaws (/projects route). Fix the following.
- Typeahead not working. If the user types nothing happens.
- Remove "Recent searches" and "Popular searches". The list should display results only.
- Search results should be a simple list with inner scrolling. At least seven (7) items should be visible at first sight. Adjust the component height and scrolling feature as this sample.
- While typing, the results are displayed in the dropdown, doesn't affectthe projects list. Once a project link is clicked it should take to the proper project details page.
- Additionally, clicking on the label should activat the "My Projects Only" checkbox.
Overall Connect Project Considerations
- RE-USE existing components as much as possible.
- Do not include any extra third-party libraries.
- Source code and design text must be written in US-English.
- Don't overly nest your code; we'll need to abstract the final DOM into multiple components; try to stay into smaller logical pieces.
- Do not redeclare/style buttons and form elements that exist in the /styles/_forms.scss and the library as whole. If you need to define a button style (or extend an existing one) - think how this could happen in the /styles/_forms.scss (or relevant _*.scss) file. In the end we want to add extrapolate the styles you create int 2 places:
-- Component-specific styles (used only once).
-- Global styles (/styles/*.scss) used from all components.
- Use .jsx extension for React components; using PascalCase for filenames. E.g., Navigation.jsx.
- Ensure that there are no lint errors.
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows
- Topcoder Connect 2.0 App (latest version of the app)
- Topcoder UI Kit Guidelines (Topcoder design and development UI guidelines)