Add user search

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 <div>Loading...</div>;
@@ -35,13 +37,14 @@ const TaskSearch = () => {
 
   return (
     <div>
-      <h2>Task Search</h2>
+      <h2>Search Tasks and Users</h2>
       <input
         type="text"
-        placeholder="Search tasks..."
+        placeholder="Search tasks and users..."
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
       />
+      <h3>Tasks</h3>
       <ul>
         {tasks.map(task => (
           <li key={task.id}>
@@ -49,8 +52,16 @@ const TaskSearch = () => {
           </li>
         ))}
       </ul>
+      <h3>Users</h3>
+      <ul>
+        {users.map(user => (
+          <li key={user.id}>
+            <p>{user.name}</p>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 };
 
-export default TaskSearch;
+export default TaskAndUserSearch;

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, () => {