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 | 2x 2x | import { useEffect } from "react";
import PropTypes from "prop-types";
import { parse } from "cookie";
import Dropdown from "../../../Dropdown";
import {
redirectPage,
getLocalStorageRoleState,
initializeLocalStorageRoleState,
updateLocalStorageRoleState,
} from "./utils";
const SelectRole = ({ selectedRole, setSelectedRole, roleOptions }) => {
const { qpp_impersonated_user: isHelpdeskRoleAndImpersonating } = parse(
document.cookie,
);
const handleSelection = (e) => {
e.preventDefault();
const dropdownValue = e.target.value;
const newRoleSelected = roleOptions.filter(
(opt) => opt.value === dropdownValue,
)[0].value;
// Update localStorage with the new role selected
updateLocalStorageRoleState(newRoleSelected);
setSelectedRole(newRoleSelected);
redirectPage(newRoleSelected);
};
// Set role on init render
// below is executed on every page refresh including on side nav link navigation & on role selection
useEffect(() => {
// Check localStorage & set initial selected role
const { selectedUserRole } = getLocalStorageRoleState();
const roleValue = selectedUserRole || roleOptions[0].value;
// Set localStorage values if not set
initializeLocalStorageRoleState(roleValue);
// Update state
setSelectedRole(roleValue);
document.cookie = `selected_role=${roleValue}; Path=/;`;
//Redirect to role default page IF localStorage was not set (indicates initial login)
if (!selectedUserRole) {
redirectPage(roleValue);
}
}, []);
return (
<div className="SelectRole__Container">
<p className="SelectRole__Text">You are viewing as a</p>
<Dropdown
value={selectedRole}
name="user-role-selection"
ariaLabel="Select User Role"
className="qpp-u-width--100 SelectRole__Dropdown"
options={roleOptions}
onChange={handleSelection}
disabled={isHelpdeskRoleAndImpersonating}
/>
</div>
);
};
SelectRole.propTypes = {
selectedRole: PropTypes.string,
setSelectedRole: PropTypes.func,
roleOptions: PropTypes.array,
};
export default SelectRole;
|