Search page upgrades #500
Search page upgrades #500
Conversation
Need to do a big more testing but I think this is good.
Don't forget to mention -- when there's no course possible due to filters, the preview card is deselected.
This reverts commit 92a427b.
Still to do: Figure out how to handle the very long mobile page, fix sorting by relevance to number of reviews if possible, run it by everyone!
Also got rid of useless comments
|
[diff-counting] Significant lines: 738. |
|
omg just realized jacqueline actually added the zero results logic too. sorry about that </3 |
There was a problem hiding this comment.
Hi Matt, thank you for fixing some of the more annoying parts of the search page, especially the really old code and the weird spacing. I enjoy some of the checks you added for no-reviews or no results, but I think that the styling changes don't really align well with the visual design of the website in its entirety, so I would like to say that we should revert them. Otherwise, great work, and this works smoothly as an update :)
| </a> | ||
| )} | ||
|
|
||
| {numReviews === 0 && ( |
There was a problem hiding this comment.
Let's check in with designers to determine whether or not we should use the bear here - I think that given the size of the page, it seems a bit out of place
|
|
||
| this.updateResults = this.updateResults.bind(this); | ||
| } | ||
| export const Results = ({match, history}: ResultsProps) => { |
There was a problem hiding this comment.
Thank you for updating to functional React components - much better now!
| .container { | ||
| padding: 16px; | ||
| border: 1px solid var(--clr-gray-300); | ||
| background-color: color-mix(in srgb, var(--clr-blue-100) 90%, var(--clr-gray-300)); |
There was a problem hiding this comment.
I would also have a conversation about this with our designers, but I think that the grey background and border looks a bit jarring
Summary
This PR upgrades the search pages. It updates outdated React search page code to use hooks and functional components, fixes the weird spacing on the original search page, behaves more predictably when no reviews are available due to bad searches/filters, and includes overall style improvements. Please refer below for important notes.
PR Type
Mobile + Desktop Screenshots & Recordings
https://github.com/user-attachments/assets/f7085e89-734a-4f3d-81e3-10870de92a8b
Note: I got rid of the "Search Results" header wrapping onto two lines since recording this.
QA - Test Plan
Did testing on every possible feature on the search page (eg. different combos of filters, all possible sort arrangements, etc).
Breaking Changes & Notes
Added to documentation?
What GIF represents this PR?
gif