[Ready for Review] Save scroll positions and results to show #381
+146
−6
Conversation
This file contains 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
|
[diff-counting] Significant lines: 152. |
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.
Summary
This pull request includes several changes to improve the user experience by saving your scroll position and number of results loaded on the Home Page, Search Results Page, and the 4 location pages (north, west, etc..). The most important changes include the addition of scroll position saving, new properties for the
ApartmentCardscomponent, and the updates to multiple pages to utilize these new features.Enhancements to
ApartmentCardscomponent:frontend/src/components/ApartmentCard/ApartmentCards.tsx: Added new optional propertiesinitialResultsToShowandonMoreResultsLoadedto handle the initial number of results to display and to trigger a callback when more results are loaded. [1] [2] [3]Scroll position saving:
frontend/src/utils/saveScrollPosition.ts: Introduced a new hookuseSaveScrollPositionto save and restore the scroll position across page navigations.Page updates to utilize new features:
frontend/src/pages/ApartmentPage.tsx: Added auseEffectto scroll to the top of the page when the component mounts.frontend/src/pages/HomePage.tsx: IntegrateduseSaveScrollPositionto save the scroll position and updated the component to use the newinitialResultsToShowandonMoreResultsLoadedproperties ofApartmentCards. [1] [2] [3]frontend/src/pages/LandlordPage.tsx: Added auseEffectto scroll to the top of the page when the component mounts.frontend/src/pages/LocationPage.tsx: IntegrateduseSaveScrollPositionand updated the component to use the newinitialResultsToShowandonMoreResultsLoadedproperties ofApartmentCards. [1] [2] [3] [4]frontend/src/pages/SearchResultsPage.tsx: IntegrateduseSaveScrollPositionand updated the component to use the newinitialResultsToShowandonMoreResultsLoadedproperties ofApartmentCards. [1] [2] [3]Test Plan
Tested scrolling features on Chromium browsers including mobile, and on Safari.
Notes
I could not find a way to remove the event listener on scroll quick enough before the page changes. When the page changes, the ApartmentCards component vanishes from the page in an instant, which pulls your scroll immediately to the top. This causes the scroll to save that top position when you change pages. To resolve this, I set a max scroll difference which would prevent it from updating the scrollY in sessionStorage if the scroll position changes too much per update. However, this means that if you scroll really fast to the bottom, it will not save.