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 | 1x 32x 32x 32x 32x 1x 32x 32x 19x 19x 19x 19x 19x 1x | import { Row, Col, Button, Form } from "react-bootstrap";
import RoleBadge from "main/components/Profile/RoleBadge";
import { useCurrentUser, hasRole } from "main/utils/currentUser";
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import { toast } from "react-toastify";
import { useForm } from "react-hook-form";
import { useBackendMutation } from "main/utils/useBackend";
import UsersTable from "main/components/Users/UsersTable";
const ProfilePage = () => {
const { data: currentUser } = useCurrentUser();
const {
register,
formState: { errors },
handleSubmit,
} = useForm();
const objectToAxiosParams = (user) => ({
url: "/api/currentUser/updateAlias",
method: "POST",
params: {
proposedAlias: user.proposedAlias,
},
});
const onSuccess = (user) => {
toast(`Alias Awaiting Moderation: ${user.proposedAlias}`);
};
const mutation = useBackendMutation(
objectToAxiosParams,
{ onSuccess },
// Stryker disable next-line all : don't test internal caching of React Query
["current user"],
);
if (!currentUser.loggedIn) {
return <p>Not logged in.</p>;
}
const { root } = currentUser;
const { user } = root;
const { email, pictureUrl, fullName } = user;
const profileUser = {
...user,
admin: hasRole(currentUser, "ROLE_ADMIN"),
moderator: hasRole(currentUser, "ROLE_MODERATOR"),
};
const onSubmit = async (data) => {
mutation.mutate({ proposedAlias: data.alias });
};
return (
<BasicLayout>
<Row className="align-items-center profile-header mb-5 text-center text-md-left">
<Col md={2}>
<img
src={pictureUrl}
alt="Profile"
className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
/>
</Col>
<Col md>
<h2>{fullName}</h2>
<p className="lead text-muted">{email}</p>
<RoleBadge role={"ROLE_USER"} currentUser={currentUser} />
<RoleBadge role={"ROLE_MEMBER"} currentUser={currentUser} />
<RoleBadge role={"ROLE_ADMIN"} currentUser={currentUser} />
<RoleBadge role={"ROLE_MODERATOR"} currentUser={currentUser} />
</Col>
</Row>
<Row className="text-left">
<Col md={12}>
<Form onSubmit={handleSubmit(onSubmit)}>
<Form.Group controlId="formAlias">
<Form.Label>Alias</Form.Label>
<Form.Control
type="text"
{...register("alias", {
required: "Alias is required.",
})}
isInvalid={Boolean(errors.alias)}
placeholder="Enter your new alias"
/>
<Form.Control.Feedback type="invalid">
{errors.alias?.message}
</Form.Control.Feedback>
</Form.Group>
<Button
variant="primary"
type="submit"
disabled={mutation.isLoading}
>
Update Alias
</Button>
<Row className="mt-5">
<Col md={12}>
<h4>Your Current User Information</h4>
<UsersTable users={[profileUser]} />
</Col>
</Row>
</Form>
</Col>
</Row>
</BasicLayout>
);
};
export default ProfilePage;
|