diff --git a/graphite-demo/frontend.jsx b/graphite-demo/frontend.jsx index dd6a2a3b..10512ee5 100644 --- a/graphite-demo/frontend.jsx +++ b/graphite-demo/frontend.jsx @@ -1,7 +1,8 @@ import React, { useEffect, useState } from 'react'; -const TaskSearch = () => { +const TaskAndUserSearch = () => { const [tasks, setTasks] = useState([]); + const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [searchQuery, setSearchQuery] = useState(''); @@ -16,14 +17,15 @@ const TaskSearch = () => { return response.json(); }) .then(data => { - setTasks(data); + setTasks(data.tasks); + setUsers(data.users); setLoading(false); }) .catch(error => { setError(error.message); setLoading(false); }); - }, [searchQuery]); // Depend on searchQuery + }, [searchQuery]); if (loading) { return
Loading...
; @@ -35,13 +37,14 @@ const TaskSearch = () => { return (
-

Task Search

+

Search Tasks and Users

setSearchQuery(e.target.value)} /> +

Tasks

+

Users

+
); }; -export default TaskSearch; \ No newline at end of file +export default TaskAndUserSearch; \ No newline at end of file diff --git a/graphite-demo/server.js b/graphite-demo/server.js index cf7ec650..ff79b7d4 100644 --- a/graphite-demo/server.js +++ b/graphite-demo/server.js @@ -18,17 +18,38 @@ const tasks = [ } ]; +// Fake data for users +const users = [ + { + id: 101, + name: 'Alice Smith' + }, + { + id: 102, + name: 'Bob Johnson' + }, + { + id: 103, + name: 'Charlie Brown' + } +]; + app.get('/search', (req, res) => { // Retrieve the query parameter const query = req.query.query?.toLowerCase() || ''; // Filter tasks based on the query - const filteredTasks = tasks.filter(task => task.description.toLowerCase().includes(query)); + const filteredTasks = tasks.filter(task => + task.description.toLowerCase().includes(query) + ).sort((a, b) => a.description.localeCompare(b.description)); - // Sort the filtered tasks alphabetically by description - const sortedTasks = filteredTasks.sort((a, b) => a.description.localeCompare(b.description)); + // Filter users based on the query + const filteredUsers = users.filter(user => + user.name.toLowerCase().includes(query) + ).sort((a, b) => a.name.localeCompare(b.name)); - res.json(sortedTasks); + // Return both sets of results + res.json({ tasks: filteredTasks, users: filteredUsers }); }); app.listen(port, () => {