Show assignee names on the tasks board
React · React · intermediate · modification
Adds an assignee-name column to the tasks board. The board previously showed the raw assignee id; this resolves each task's `assigneeId` to the person's display name from the `users` directory, falling back to "Unassigned" when there is no match. Verified against a seeded board and the names render correctly.
This board is an internal ops tool. Production scale: ~8,000 open tasks joined against a ~3,000-person user directory, both passed in as in-memory arrays. The title filter re-renders the component on every keystroke, so the whole table — and every per-row lookup — recomputes each time. It runs on the main thread.
Requirements
- Show each task with its assignee's display name, resolved from the `users` directory by matching `user.id` to the task's `assigneeId`; show "Unassigned" when there is no match.
- The existing title filter still narrows the visible tasks as the user types, updating on every keystroke.
- The board renders the full open-task set (~8,000 tasks) against the full user directory (~3,000 people) and must stay responsive while typing — resolving names must not add work that grows with tasks × users.
Files touched
- src/components/AssignmentTable.jsx
--- src/components/AssignmentTable.jsx
import { useState } from "react";
-export function AssignmentTable({ tasks }) {
+export function AssignmentTable({ tasks, users }) {
const [query, setQuery] = useState("");
<table>
<tbody>
- {visible.map((task) => (
- <tr key={task.id}>
- <td>{task.title}</td>
- <td>{task.assigneeId}</td>
- </tr>
- ))}
+ {visible.map((task) => {
+ const assignee = users.find((user) => user.id === task.assigneeId);
+ return (
+ <tr key={task.id}>
+ <td>{task.title}</td>
+ <td>{assignee ? assignee.name : "Unassigned"}</td>
+ </tr>
+ );
+ })}
</tbody>
</table>