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 | 1x 16x 15x 15x 1x 1x 1x 15x 15x 1x 14x 14x 1x 1x 14x 2x 2x 2x 14x 1x | import React, { useState } from "react";
import { Row, Col , Modal, Button } from "react-bootstrap";
import RoleBadge from "main/components/Profile/RoleBadge";
import { useCurrentUser } from "main/utils/currentUser";
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import axios from "axios";
const ProfilePage = () => {
// Stryker disable all
const [showModal, setShow] = useState(false);
const [userCellPhone, setUserCellPhone] = useState("");
// Stryker restore all
const onSubmit = (event) => {
axios.put(`/api/userprofile?cellPhone=${userCellPhone}`)
event.preventDefault();
window.location.reload();
}
const { data: currentUser } = useCurrentUser();
if (!currentUser.loggedIn) {
return (
<p>Not logged in.</p>
)
}
const { email, cellPhone, pictureUrl, fullName } = currentUser.root.user;
// Stryker disable all
const handleClose = async () => {
await setShow(false);
console.log(showModal+" modal")
};
const handleShow = async () => {
await setUserCellPhone(cellPhone);
await setShow(true);
console.log(showModal+" modal")
};
// Stryker restore all
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>
<div>
<p className="lead text-muted" id="phone_number" data-testid="phone_number">{cellPhone}</p>
<Button variant="primary" onClick={handleShow} id="update_phone_btn">
Update Phone Number
</Button>
</div>
<RoleBadge role={"ROLE_USER"} currentUser={currentUser}/>
<RoleBadge role={"ROLE_MEMBER"} currentUser={currentUser}/>
<RoleBadge role={"ROLE_ADMIN"} currentUser={currentUser}/>
<RoleBadge role={"ROLE_DRIVER"} currentUser={currentUser}/>
<RoleBadge role={"ROLE_RIDER"} currentUser={currentUser}/>
{/* d-flex align-items-center justify-content-center */}
<div className="">
<Modal show={showModal} onHide={handleShow} data-testid="modal_id">
<Modal.Header closeButton onClick={handleClose}>
<Modal.Title>Update Phone Number:</Modal.Title>
</Modal.Header>
<Modal.Body>Enter New Phone Number</Modal.Body>
<form onSubmit={onSubmit}>
<input id="new_phone" data-testid="new_phone" placeholder="Enter New Phone Number" value={userCellPhone} name="new_phone" onChange={(e) => setUserCellPhone(e.target.value)}></input>
<Modal.Footer>
<Button type="submit">Update</Button>
<Button variant="secondary" id="cancel-button" onClick={handleClose}>Cancel</Button>
</Modal.Footer>
</form>
</Modal>
</div>
</Col>
</Row>
</BasicLayout>
);
};
export default ProfilePage;
|