Create Table and Select All Checkbox

[carolynzhang18]

Notion Ticket Link

Create Table and Select All Checkbox

Implementation Description

• Created a table with checkboxes to select individual or all roles.
• Currently populated with dummy data - replace with actual data once the backend routes are ready.
• We don't have types for documents yet - once we do, we'll have to touch up the typing of the variables in this PR to match
• 0 styling rn lol I just plopped in chakra components

Steps to Test

1. Log in with an admin account!
2. Go to the documents directory page (localhost:3000/documents).
3. Open up your developer console window (right click -> Inspect -> Console) - that's where the ids will be logged!
4. Play around with the checkboxes and logging the ids (button under the table)! Select one, click the button, use the header checkbox to select all of them, click the button, deselect one of the checkboxes, click the button, use the header checkbox to deselect all of them, click the button, etc.

Check that the ids logged in the console correspond to the ids you are selecting!

Screenshots (optional)

Checklist

• My PR name is descriptive and in imperative tense
• My commit messages are descriptive and in imperative tense. My commits are atomic and trivial commits are squashed or fixup'd into non-trivial commits
• I have run the appropriate linter(s)
• I have requested a review from the PL, as well as other devs who have background knowledge on this PR or who will be building on top of this PR

Linting & Formatting

Mac

docker exec -it CWC-backend /bin/bash -c "yarn fix"
docker exec -it CWC-frontend /bin/bash -c "yarn fix"

Windows

docker exec -it CWC-backend bash -c "yarn fix"
docker exec -it CWC-frontend bash -c "yarn fix"

[carolynzhang18]

Doing Set.add and Set.delete won't trigger a React state update because the object itself has not changed (even though its contents did).
To force a state update, I'm creating a new Set copied off the mutated previous Set.

[carolynzhang18]

This covers the case where someone selects all checkboxes, and then deselects one of them - we want the select all checkbox to be deselected in this case.

[shencynthia]

LGTM!! 🔥🔥