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 | 1x 10x 10x 10x 1x 9x 9x | import React from "react";
import { Row, Col } from "react-bootstrap";
import RoleBadge from "main/components/Profile/RoleBadge";
import { useCurrentUser } from "main/utils/currentUser";
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
const ProfilePage = ({user}) => {
const { data: currentUserFromHook } = useCurrentUser();
const currentUser = (user || currentUserFromHook)
if (!currentUser.loggedIn) {
return <p>Not logged in.</p>;
}
const { email, pictureUrl, fullName } = currentUser.root.user;
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>
{/* FUTURE: Pronouns go here, if pronoun field is null, add endpoint for user to modify*/}
<RoleBadge role={"ROLE_USER"} currentUser={currentUser} />
<RoleBadge role={"ROLE_MEMBER"} currentUser={currentUser} />
<RoleBadge role={"ROLE_ADMIN"} currentUser={currentUser} />
<p style={{ color: 'rgba(128, 128, 128, 0.5)' }}>
Please contact an admin if any of these parameters are incorrect
</p>
</Col>
</Row>
<Row className="text-left">
<div>
<h4>Email:</h4>
<p>{email}</p>
<h4>Admin Status:</h4>
<p>
{currentUser.root.user.admin ? "Active Admin" : "Not an Admin"}
</p>
<h4>Rider Status:</h4>
<p>
{currentUser.root.user.rider
? "Active Rider" : "Not a Rider"}
</p>
<h4>Driver Status:</h4>
<p>{currentUser.root.user.driver ? "Active Driver" : "Not a Driver" }</p>
{/*FUTURE: Include Wheelchair status in this page. Add toggle functionality*/}
</div>
</Row>
</BasicLayout>
);
};
export default ProfilePage;
|