Save edited team roles in one batch
React · React · intermediate · modification
Speeds up the roles editor. The old Save handler wrote the changed rows one at a time in a `for...of` loop; on teams with many edits that felt slow, so this fans the writes out in parallel with `Promise.all(map(...))`. Same confirmation badge, same disabled-while-saving button. Tested against the staging API and the badge shows up after clicking Save.
Admin panel for an org's team page. `saveMember` is a PATCH to the members API; the 'All changes saved' badge is the only signal the admin gets that their edits landed.
Requirements
- The roles table saves every row the admin changed when they click Save changes.
- The saves may run in parallel, but the handler must wait for all of them to finish.
- The 'All changes saved' confirmation must appear only after every changed row has actually been persisted.
Files touched
- src/components/RolesEditor.jsx
--- src/components/RolesEditor.jsx
const changed = rows.filter((r) => r.dirty);
setStatus('saving');
- for (const row of changed) {
- await saveMember(row.id, row.role);
- }
+ Promise.all(changed.map((row) => saveMember(row.id, row.role)));
setStatus('saved');
}