Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | 46x 46x 46x 46x 2x 2x 2x 1x 2x 1x 46x 2x 46x 1x 1x 46x 1x 46x 2x 1x 75x 1x 1x 1x 74x | import OurTable from "main/components/OurTable";
import { useBackendMutation } from "main/utils/useBackend";
import { useQueryClient } from "react-query";
import { useCurrentUser } from "main/utils/currentUser";
import { useNavigate } from "react-router";
import { toast } from "react-toastify";
export default function UsersTable({ users }) {
const { data: currentUser } = useCurrentUser();
const navigate = useNavigate();
const queryClient = useQueryClient();
// helper function to toggle admin status
const toggleAdminMutation = useBackendMutation(
(row) => ({
url: "/api/admin/toggleAdmin",
method: "PUT",
params: { id: row.id },
}),
{
onSuccess: (_data, row) => {
toast("Updated admin status for user " + row.givenName);
// stryker mutates by removing ?'s - when we are not admin, this page is not accessible, so currentUsers.root.user is guaranteed to have values
// non-self navigate behavior is tested implicitly via AdminUsersPage tests
// Stryker disable next-line OptionalChaining, ConditionalExpression
if (row.id === currentUser?.root?.user?.id) {
navigate("/");
}
},
// skip cache invalidation for self-toggle: we're navigating away and are no longer admin, so the refetch would 403
// Stryker disable next-line all : don't test internal caching of react query
onSettled: (_data, _error, row) => {
// Stryker disable next-line OptionalChaining, ConditionalExpression
if (row.id !== currentUser?.root?.user?.id) {
// Stryker disable next-line all : don't test internal caching of react query
queryClient.invalidateQueries(["/api/admin/users"]);
}
},
},
// Stryker disable next-line all : don't test internal caching of react query
["/api/admin/users"],
);
// toggle admin status
const handleAdminToggle = (row) => {
toggleAdminMutation.mutate(row);
};
// helper function to toggle moderator status
const toggleModeratorMutation = useBackendMutation(
(row) => ({
url: "/api/admin/toggleModerator",
method: "PUT",
params: { id: row.id },
}),
{
onSuccess: (_data, row) =>
toast("Updated moderator status for user " + row.givenName),
},
// Stryker disable next-line all : don't test internal caching of react query
["/api/admin/users"],
);
// toggle moderator status
const handleModeratorToggle = (row) => {
toggleModeratorMutation.mutate(row);
};
// the table
const columns = [
{
Header: "id",
accessor: "id", // accessor is the "key" in the data
},
{
Header: "First Name",
accessor: "givenName",
},
{
Header: "Last Name",
accessor: "familyName",
},
{
Header: "Email",
accessor: "email",
},
{
Header: "Admin",
id: "admin",
accessor: (row) => {
return (
// Stryker disable next-line StringLiteral, ObjectLiteral
<div style={{ display: "flex", gap: "5%", justifyContent: "center" }}>
{/* checkbox: toggle admin status */}
<input
type="checkbox"
aria-label="admin"
name="adminToggle"
checked={row.admin}
onChange={() => handleAdminToggle(row)}
/>
</div>
);
},
},
{
Header: "Moderator",
id: "moderator",
accessor: (row) => {
return (
// Stryker disable next-line StringLiteral, ObjectLiteral
<div style={{ display: "flex", justifyContent: "center" }}>
{/* checkbox: toggle moderator status */}
<input
type="checkbox"
aria-label="moderator"
name="moderatorToggle"
checked={row.moderator}
onChange={() => handleModeratorToggle(row)}
/>
</div>
);
},
},
{
Header: "Alias",
accessor: "alias",
},
{
Header: "Proposed Alias",
accessor: "proposedAlias",
},
{
Header: "Status",
accessor: (row) => {
if (row.status === "Approved" && row.dateApproved) {
// Parse as local date (YYYY-MM-DD)
const [year, month, day] = row.dateApproved.split("-");
const formattedDate = new Date(
year,
month - 1,
day,
).toLocaleDateString();
return `Approved on ${formattedDate}`;
}
return row.status;
},
},
];
return <OurTable data={users} columns={columns} testid={"UsersTable"} />;
}
|