Remove "Top picks" carousel if no results #1195
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jonkafton
changed the title
jonkafton
commented
Jun 28, 2024
| const config = TopPicksCarouselConfig(profile) | ||
| const { data, isLoading } = useLearningResourcesSearch( | ||
| config[0].data | ||
| .params as LearningResourcesSearchApiLearningResourcesSearchRetrieveRequest, |
Contributor
Author
There was a problem hiding this comment.
Do we have a shorter equivalent?
Contributor
There was a problem hiding this comment.
No 😭
I import LearningResourcesSearchApiLearningResourcesSearchRetrieveRequest as SearchRequest sometimes.
jonkafton
force-pushed
the
jk/4711-hide-top-picks
branch
from
a8204de to
18a77a8
Compare
ChristopherChudzicki
requested changes
Jul 9, 2024
Contributor
ChristopherChudzicki
left a comment
ChristopherChudzicki
left a comment
There was a problem hiding this comment.
Discussed w/ Jon in Slack: Carousel tabs should be visible while carousel is loading, else it looks weird
tabs_video.mov
Contributor
Author
I've pushed the fix. The inverse isn't ideal either, though certainly the lesser evil if we assume there will generally be content. Screen.Recording.2024-07-09.at.19.14.47.mov |
ChristopherChudzicki
approved these changes
Jul 9, 2024
mbertrand
pushed a commit
that referenced
this pull request
Jul 15, 2024
* Top pick carousel display only if results * Remove not in document test - unreliable * Not used anywhere * Filter carousels without results * Update tests to reflect load states * More specific 'any' and reasoning * Set count in tests * Wait for all tabs to have loaded before removing if empty (fix layout flash) * Remove loading logic on lr_featured tabs
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What are the relevant tickets?
Closes https://github.com/mitodl/hq/issues/4711
Description (What does it do?)
Removes the "Top picks for you" if there are no results from the search.
Update: This change now applies the logic to all carousels.
How can this be tested?
Navigate to Dashboard from the user menu or at /dashboard. Testable only by mocking the
/api/v1/learning_resources_searchresponse or overwriting in the code.Additional Context
This will render the loading state first, then removes if no results, expecting that there will normally be results.
I attempted a test to check that the section is not in the document, though found it unreliable to use
waitForElementToBeRemoved()as that depends on the element always being there first. Also got unexpected results checking for the second render cycle (ie.isLoadingnowfalse) by check and then callingwaitForElementToBeRemoved()orexpect(queryByText("Top picks for you")).not.toBeInTheDocument(). Info here, open to suggestions.If we need this in other places we may want to build this into the
ResourceCarouselitself, or provide a carousel+container wrapper in theDashboardPageso we don't need to duplicate theuseLearningResourcesSearch()call.