Add user search

[leika]

User description

Proposed change

Closes #(issue or discussion)

Type of change

• Bug fix: non-breaking change which fixes an issue.
• New feature / Enhancement: non-breaking change which adds functionality. Please read the important note above.
• Breaking change: fix or feature that would cause existing functionality to not work as expected.
• Documentation only.
• Other. Please explain:

Checklist:

• I have read & agree with the contributing guidelines.
• If applicable, I have included testing coverage for new code in this PR, for backend and / or front-end changes.
• If applicable, I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.
• If applicable, I have checked that all tests pass, see documentation.
• I have run all pre-commit hooks, see documentation.
• I have made corresponding changes to the documentation as needed.
• I have checked my modifications for any breaking changes.

---

PR Type

Enhancement

---

Description

• Added user search functionality alongside task search.

• Updated backend /search endpoint to return both tasks and users.

• Enhanced frontend to display and search both tasks and users.

• Improved sorting for both tasks and users in search results.

---

Changes walkthrough 📝

Relevant files

Enhancement

server.js Add user dataset and enhance /search endpoint for users    graphite-demo/server.js Introduced a new users dataset for search. Updated /search endpoint to filter and return both tasks and users. Added alphabetical sorting for both tasks and users in results. Modified response format to return an object with tasks and users. +26/-2    frontend.jsx Update frontend to support user and task search                    graphite-demo/frontend.jsx Refactored component to TaskAndUserSearch to reflect dual search. Added state and UI for displaying searched users. Updated fetch logic to handle new response structure. Improved UI to show both tasks and users with headings. +17/-6

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[leika]

• Add user search #15 👈 (View in Graphite)
• Add frontend for search #14
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[qodo-code-review]

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Missing Loading State The component sets loading state to false only when data is successfully fetched, but not when users and tasks are updated. This could lead to the loading indicator never disappearing if the data arrays are empty. setTasks(data.tasks); setUsers(data.users); setLoading(false); Empty Results Handling There's no handling for empty results in either tasks or users lists. Consider adding a message when no results are found for better user experience. <ul> {tasks.map(task => ( <li key={task.id}> <p>{task.description}</p> </li> ))} </ul> <h3>Users</h3> <ul> {users.map(user => ( <li key={user.id}> <p>{user.name}</p> </li> ))} </ul>

[leika]

Merge activity

• May 8, 1:24 PM EDT: A user started a stack merge that includes this pull request via Graphite.
• May 8, 1:25 PM EDT: Graphite rebased this pull request as part of a merge.
• May 8, 1:26 PM EDT: @leika merged this pull request with Graphite.

[qodo-code-review]

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Trim search input Trim the search query to handle whitespace properly. Without trimming, searches with leading or trailing spaces could fail to match valid results. graphite-demo/server.js [38-39] // Retrieve the query parameter -const query = req.query.query?.toLowerCase() || ''; +const query = (req.query.query || '').toLowerCase().trim(); Apply / Chat Suggestion importance[1-10]: 8 __ Why: Trimming whitespace from search queries is an important improvement that prevents search failures due to accidental spaces. This fixes a potential bug that could cause valid results to be missed, enhancing the search functionality's reliability.	Medium
	Handle empty search results Add a check for empty search results to improve user experience. When both tasks and users arrays are empty, display a message indicating no results were found instead of showing empty headings. graphite-demo/frontend.jsx [30-36] if (loading) { return <div>Loading...</div>; } if (error) { return <div>Error: {error}</div>; } +if (tasks.length === 0 && users.length === 0) { + return <div>No results found for "{searchQuery}"</div>; +} + Apply / Chat Suggestion importance[1-10]: 7 __ Why: This suggestion improves user experience by displaying a helpful message when no search results are found, rather than showing empty sections. This is a meaningful UI enhancement that makes the application more user-friendly.	Medium
	Conditionally render result sections Conditionally render the task and user sections only when they contain results. This prevents showing empty headings and lists when no results are found for one category. graphite-demo/frontend.jsx [48-62] -<ul> - {tasks.map(task => ( - <li key={task.id}> - <p>{task.description}</p> - </li> - ))} -</ul> -<h3>Users</h3> -<ul> - {users.map(user => ( - <li key={user.id}> - <p>{user.name}</p> - </li> - ))} -</ul> +{tasks.length > 0 && ( + <> + <h3>Tasks</h3> + <ul> + {tasks.map(task => ( + <li key={task.id}> + <p>{task.description}</p> + </li> + ))} + </ul> + </> +)} +{users.length > 0 && ( + <> + <h3>Users</h3> + <ul> + {users.map(user => ( + <li key={user.id}> + <p>{user.name}</p> + </li> + ))} + </ul> + </> +)} Apply / Chat Suggestion importance[1-10]: 7 __ Why: This suggestion enhances the UI by only showing section headings when there are actual results to display. This creates a cleaner interface and complements the empty results handling, improving overall user experience.	Medium
Update