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 | 1x 12x 12x 1x 12x 1x 12x 12x 3x 9x 9x 1x | import { Row, Col, Button, Accordion } from "react-bootstrap";
import RoleBadge from "main/components/Profile/RoleBadge";
import { hasRole, useCurrentUser } from "main/utils/currentUser";
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import JsonView from "@uiw/react-json-view";
import { useBackendMutation } from "main/utils/useBackend";
import { toast } from "react-toastify";
import { useState } from "react";
import ConfirmationModal from "main/components/Common/ConfirmationModal";
const ProfilePage = () => {
const currentUser = useCurrentUser();
const onSuccess = (response) => {
toast(response.message);
};
const disconnectGithub = useBackendMutation(
() => {
return {
url: "/api/github/disconnect",
method: "DELETE",
};
},
{ onSuccess: onSuccess },
["current user"],
);
const [viewModal, setViewModal] = useState(false);
if (!currentUser.loggedIn) {
return <p>Not logged in.</p>;
}
const { email, pictureUrl, fullName } = currentUser.root.user;
return (
<BasicLayout>
<ConfirmationModal
onYes={disconnectGithub.mutate}
showModal={viewModal}
setShowModal={setViewModal}
>
<p>Are you sure you want to disconnect your Github account?</p>
<p>Please only do so if you know what you're doing.</p>
</ConfirmationModal>
<Row className="align-items-center profile-header mb-5 text-center text-md-left">
<Col md={2}>
<h2>User Profile</h2>
<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} />
</Col>
</Row>
<Row className={"mt-3 g-3"} data-testid={"ProfilePage-advancedFeatures"}>
<h2>Advanced Features</h2>
{hasRole(currentUser, "ROLE_GITHUB") && (
<>
<Col md={2}>
<Button variant={"danger"} onClick={() => setViewModal(true)}>
Disconnect GitHub
</Button>
</Col>
</>
)}
</Row>
<Row>
<Col>
<Accordion>
<Accordion.Item eventKey="individual">
<Accordion.Header>Current User Information</Accordion.Header>
<Accordion.Body>
<JsonView value={currentUser} />
</Accordion.Body>
</Accordion.Item>
</Accordion>
</Col>
</Row>
</BasicLayout>
);
};
export default ProfilePage;
|