codeforboston / codeforboston/maple
Global Search - Front-End - 2. Search Result Component Work
- Dominant language
- TypeScript
- Stars
- 56
- Forks
- 175
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 13
Description
1. Create component to hold list of search results. [Hits Widget](https://www.algolia.com/doc/api-reference/widgets/hits/react-hooks/) from RIS likely what we would use here to house the individual list item components
2. Create individual list item components
- Use components/search/BillHit.tsx for inspiration/integration with RIS
- Likely props needed from returned search results:
- Result type (e.g. bill, org, user)
- Text from search string (for matching/bold formatting) ** probably going to be using [Highlight widget](https://www.algolia.com/doc/api-reference/widgets/highlight/react-hooks/) for this**
- Bill id/org name/user name
- Bill title text (if bill)
- Url id (for routing to appropriate page)
- Follow designs for formatting of results. Add basic character limit for strings (we can revisit the leading truncation piece, we may not need this right now since we are only going to search bill titles at this time)
Add max height to results. Add scrollbar if results exceed max height. Determine results cutoff number (should we display max 30 results? More? Fewer?)
3. Add link to appropriate page when clicking a search result
- Links for bill hits are currently using the maple component in components/links
4. Ensure appropriate formatting for desktop and mobile views for search results
5. Create default “no results found” list item styling for when the search returns no results


Contributor guide
Assessment
This issue has not been assessed yet.