codeforboston / codeforboston/maple

Global Search - Front-End - 2. Search Result Component Work

Open
#1,175 0 comments 0 reactions 1 assignee Claimed by @timblais View on GitHub
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
![image](https://github.com/codeforboston/maple/assets/97904016/b4768673-f13a-43b6-b48a-1e5f27ab215b)
![image](https://github.com/codeforboston/maple/assets/97904016/a792fc35-96f2-45bd-bcf3-9bef67f5723c)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.