Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { useEffect } from 'react';
- import {Link, useNavigate} from "react-router-dom";
- import { useSelector, useDispatch } from "react-redux";
- import {
- clearOCMSErrorsAction,
- retrieveRoleNameAction
- } from "../../../store/actions/ocms-jobActions"; // for OCMS user role-name
- import classes from './home.module.css';
- import ADA_logo from "../../../assets/images/ADA_logo.png";
- import FooterLinks from "../../footer-links/footer-links";
- const OCMS_Home = () => {
- // store data
- const { id } = useSelector(state => state.auth.userData);
- const ocmsRoles = useSelector(state => state.ocmsJobs.ocmsRoles) || [];
- const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
- const navigate = useNavigate();
- const dispatch = useDispatch();
- const goBack = () => navigate(-1);
- // clear errors
- useEffect(() => {
- dispatch(clearOCMSErrorsAction());
- }, []);
- // retrieve OCMS user role-name
- useEffect(() => {
- dispatch(retrieveRoleNameAction(id));
- }, [id]);
- useEffect(() => {
- if(!isAuthenticated) {
- navigate(`/login`);
- }
- }, [isAuthenticated]);
- let ocmsRole;
- if(ocmsRoles.length > 1) {
- ocmsRole = (
- <>
- <li className="">
- <Link to={`/ocms-checker-form`} className="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap">
- <span className="text-gray-700">SRE</span>
- </Link>
- </li>
- <li className="">
- <Link to={`/ocms-maker-form`} className="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap">
- <span className="text-gray-700">Application</span>
- </Link>
- </li>
- </>
- );
- } else if(ocmsRoles.length == 1 && ocmsRoles.includes('SRE')) {
- ocmsRole = (
- <li className="">
- <Link to={`/ocms-checker-form`} className="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap">
- <span className="text-gray-700">SRE</span>
- </Link>
- </li>
- );
- } else if(ocmsRoles.length == 1 && ocmsRoles.includes('Application')) {
- ocmsRole = (
- <li className="">
- <Link to={`/ocms-maker-form`} className="rounded-t bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap">
- <span className="text-gray-700">Application</span>
- </Link>
- </li>
- );
- }
- const roleNamesDropdown = (
- <div className="p-3 mb-3 mr-2">
- <div className={`${classes.dropdown} inline-block relative`}>
- <button className="dbsMainButton font-semibold py-1 px-2 rounded inline-flex items-center">
- <span className="mr-1">Your role is</span>
- <svg className="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
- <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
- </svg>
- </button>
- <ul className={`${classes.dropdownMenu} absolute hidden text-gray-700 pt-1`}>
- { ocmsRole }
- </ul>
- </div>
- </div>
- );
- return (
- <div className={`${classes.outerContainer}`}>
- <div className={`${classes.container} bg-blue-900 rounded`}>
- <div className={`${classes.wrapper} mb-10`}>
- <div className={`${classes.callToAction}`}>
- <h2 className={`text-gray-500 font-bold text-lg ml-3`}>Control & Monitoring Service</h2>
- { roleNamesDropdown }
- </div>
- <div className={`${classes.logoContainer} `}>
- <img src={ ADA_logo } alt={`ADA logo`} className={`${classes.logo} ml-4`} />
- </div>
- </div>
- <FooterLinks />
- </div>
- </div>
- );
- }
- export default OCMS_Home;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement