Fix search on User Rankings and Add Ratings page #129
Conversation
|
@vneogi199 is attempting to deploy a commit to the EddieHub Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughWalkthroughThe recent updates to the application enhance user search functionality across various components, particularly focusing on the User Rankings page. A notable addition includes the creation of an index for improved search performance, along with modifications in the UI components to support keyword-based filtering and search debouncing. These changes aim to address a bug where user search was not functioning as expected, ensuring a smoother and more efficient user experience. Changes
Assessment against linked issues
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 3
Configuration used: CodeRabbit UI
Files ignored due to path filters (2)
package-lock.jsonis excluded by:!**/*.jsonpackage.jsonis excluded by:!**/*.json
Files selected for processing (5)
- README.md (1 hunks)
- src/app/rankings/page.js (2 hunks)
- src/app/rate/page.js (1 hunks)
- src/components/SideNav.js (3 hunks)
- src/components/Users.js (1 hunks)
Additional comments: 5
src/app/rankings/page.js (1)
- 84-84: Passing
keyworddirectly fromsearchParamstoUsersis efficient. Verify thatUserscomponent is updated to handle this prop correctly.src/app/rate/page.js (1)
- 31-31: Change correctly implements hiding the search bar on the Add Ratings page by setting
showSearchtofalse.README.md (1)
- 64-65: Instructions for creating a
fulltextindex on theratingscollection are clear and necessary for search functionality. Verify subsequent step numbers are adjusted for consistency.src/components/SideNav.js (2)
- 75-81: The effect for navigating based on
debouncedSearchKeywordis implemented correctly. Verify that this navigation behavior integrates smoothly with the rest of the application.- 420-449: Conditional rendering of the search bar based on
showSearchprop is correctly implemented. This allows for flexible UI adjustments across different pages.
| @@ -8,7 +8,7 @@ export const metadata = { | |||
| title: "User Rankings - RepoRater" | |||
| }; | |||
|
|
|||
| export default function Page() { | |||
| export default function Page({ searchParams }) { | |||
There was a problem hiding this comment.
Ensure searchParams prop is validated or documented to clarify expected structure, especially the keyword property.
| export default async function Users({ keyword = "" }) { | ||
| const query = keyword | ||
| ? [Query.limit(1000), Query.search("username", keyword)] | ||
| : [Query.limit(1000)]; |
There was a problem hiding this comment.
Correctly implements keyword-based filtering with a default parameter and conditional query construction. Ensure keyword is sanitized before use in queries to prevent injection attacks.
| useDebounce( | ||
| () => { | ||
| setDebouncedSearchKeyword(searchKeyword); | ||
| setKeyword(searchKeyword); | ||
| }, | ||
| 200, | ||
| [searchKeyword], | ||
| ); |
There was a problem hiding this comment.
Correctly implements debouncing for the search input. Ensure the debounce interval of 200ms aligns with UX expectations and performance considerations.
| } else { | ||
| router.push(`?keyword=${debouncedSearchKeyword}`); | ||
| } | ||
| }, [debouncedSearchKeyword, router, pathName]); |
There was a problem hiding this comment.
Is pathName really needed in dependency array elements
There was a problem hiding this comment.
it is used at line 77, though I don't see any impact keeping/removing it from the dependency array
Fixes Issue #114
Closes #114
Changes proposed
fulltextindex onratingscollection onusername(needs to be done on appwrite in production)react-uselibrary to perform debouncing on search query (currently the search is done for every keypress, changed it to search only after 200ms)User Rankingspage, perform search usingsearchParamsAdd Ratingspage, hide search barCheck List (Check all the applicable boxes)
Screenshots
Default User Rankings page
User Rankings page after search query
vinAdd Ratings page (search box hidden)
Note to reviewers
This PR needs change to Appwrite schema as an index is added to
usernameattribute inratingscollection.Summary by CodeRabbit