[d8b6c91] | 1 | import {Link, NavLink} from "react-router-dom";
|
---|
| 2 | import "./Header.css"
|
---|
[befb988] | 3 | import {jwtDecode} from "jwt-decode";
|
---|
[d8b6c91] | 4 | import {useDispatch, useSelector} from 'react-redux';
|
---|
| 5 | import {useEffect, useState} from "react";
|
---|
| 6 | import {AuthActions} from "../../redux/actions/authActions";
|
---|
| 7 | import Roles from "../../enumerations/Roles";
|
---|
[19398ad] | 8 | import {useNavigate} from "react-router";
|
---|
[b248810] | 9 | import {AUTH_TOKEN} from "../../axios/axiosInstance";
|
---|
[befb988] | 10 | import {JobSeekerActions} from "../../redux/actions/JobSeekerActions";
|
---|
| 11 | import {RecruiterActions} from "../../redux/actions/recruiterActions";
|
---|
[d8b6c91] | 12 |
|
---|
[19398ad] | 13 | export const Header = (props) => {
|
---|
[d8b6c91] | 14 |
|
---|
| 15 | const auth = useSelector(state => state.auth.currentUser);
|
---|
| 16 | const dispatch = useDispatch();
|
---|
[19398ad] | 17 | const navigator = useNavigate();
|
---|
[d8b6c91] | 18 |
|
---|
[19398ad] | 19 | const [role, setRole] = useState("");
|
---|
| 20 | const [username, setUsername] = useState("");
|
---|
[b248810] | 21 | const [user, setUser] = useState("");
|
---|
| 22 |
|
---|
[befb988] | 23 | const [profilePics, setProfilePics] = useState({});
|
---|
| 24 | let profilePicState = useSelector(state => state.images.profilePictures);
|
---|
| 25 | const [profilePicDispatched, setProfilePicDispatched] = useState(false);
|
---|
| 26 |
|
---|
| 27 | const [logos, setLogos] = useState({});
|
---|
| 28 | let logoState = useSelector(state => state.images.logos);
|
---|
| 29 | const [logoDispatched, setLogoDispatched] = useState(false);
|
---|
| 30 |
|
---|
[d8b6c91] | 31 | const signOut = () => {
|
---|
| 32 | dispatch(AuthActions.signOut());
|
---|
| 33 | window.location = "/";
|
---|
[befb988] | 34 | //navigator("/")
|
---|
[d8b6c91] | 35 | }
|
---|
[befb988] | 36 | const [isActive, setIsActive] = useState(false);
|
---|
| 37 |
|
---|
| 38 | const toggleMenu = () => {
|
---|
| 39 | setIsActive(!isActive);
|
---|
| 40 | };
|
---|
[d8b6c91] | 41 |
|
---|
[b248810] | 42 | useEffect(() => {
|
---|
| 43 | const token = localStorage.getItem(AUTH_TOKEN);
|
---|
[befb988] | 44 | if (token != null) {
|
---|
[b248810] | 45 | try {
|
---|
| 46 | const decodedToken = jwtDecode(token);
|
---|
| 47 | setUser({
|
---|
| 48 | name: decodedToken.name,
|
---|
| 49 | role: decodedToken.role,
|
---|
| 50 | hasAccess: decodedToken.hasAccess,
|
---|
[befb988] | 51 | id: decodedToken.id
|
---|
[b248810] | 52 | });
|
---|
| 53 | } catch (error) {
|
---|
| 54 | console.error('Failed to decode token', error);
|
---|
| 55 | }
|
---|
| 56 | }
|
---|
| 57 | }, [auth]);
|
---|
| 58 |
|
---|
[d8b6c91] | 59 | useEffect(() => {
|
---|
| 60 | if (auth) {
|
---|
| 61 | setRole(auth.role);
|
---|
| 62 | setUsername(auth.name);
|
---|
[befb988] | 63 |
|
---|
| 64 | console.log("ROLE: " + auth.role)
|
---|
| 65 |
|
---|
| 66 | if (auth.role === Roles.JOBSEEKER) {
|
---|
| 67 | dispatch(JobSeekerActions.downloadProfilePic(auth.id, (success, reponse) => {
|
---|
| 68 | if (success) {
|
---|
| 69 | setProfilePics(prevState => ({...prevState, [auth.id]: reponse}))
|
---|
| 70 | console.log(reponse)
|
---|
| 71 | }
|
---|
| 72 | }))
|
---|
| 73 | } else if (auth.role === Roles.RECRUITER) {
|
---|
| 74 | dispatch(RecruiterActions.downloadLogo(auth.id, (success, reponse) => {
|
---|
| 75 | if (success) {
|
---|
| 76 | setLogos(prevState => ({...prevState, [auth.id]: reponse}))
|
---|
| 77 | console.log(reponse)
|
---|
| 78 | }
|
---|
| 79 | }))
|
---|
| 80 | }
|
---|
[d8b6c91] | 81 | }
|
---|
| 82 | }, [auth]);
|
---|
| 83 |
|
---|
| 84 | return (
|
---|
| 85 | <nav className="navbar navbar-expand-lg bg-light">
|
---|
| 86 | <div className="container-fluid">
|
---|
[befb988] | 87 | <Link to="/" className="logo"/>
|
---|
| 88 | <Link to="/" className="brand-name"/>
|
---|
| 89 | <div className="navbar-collapse">
|
---|
[d8b6c91] | 90 | <ul className="navbar-nav me-auto mb-2 mb-lg-0">
|
---|
[19398ad] | 91 | <NavLink to="/" className="nav-item nav-link">Home</NavLink>
|
---|
[befb988] | 92 | {role == Roles.JOBSEEKER &&
|
---|
[d8b6c91] | 93 | <>
|
---|
[befb988] | 94 | <NavLink to="/my-applications" className="nav-item nav-link">My Applications</NavLink>
|
---|
[d8b6c91] | 95 | </>
|
---|
| 96 | }
|
---|
[befb988] | 97 | {role == Roles.RECRUITER &&
|
---|
[d8b6c91] | 98 | <>
|
---|
[befb988] | 99 | <NavLink to="/job-management-hub" className="nav-item nav-link">Job Management Hub</NavLink>
|
---|
[d8b6c91] | 100 | </>
|
---|
| 101 | }
|
---|
[befb988] | 102 | {role === Roles.ADMIN &&
|
---|
[b248810] | 103 | <>
|
---|
| 104 | <NavLink to="/admin-panel" className="nav-item nav-link">Admin Panel</NavLink>
|
---|
| 105 | </>
|
---|
| 106 | }
|
---|
[befb988] | 107 | <NavLink to="/about" className="nav-item nav-link">About Us</NavLink>
|
---|
| 108 | {/*<NavLink to="/contact" className="nav-item nav-link">Support</NavLink>*/}
|
---|
[d8b6c91] | 109 | </ul>
|
---|
[befb988] | 110 | </div>
|
---|
| 111 | {(auth.role === Roles.RECRUITER || auth.role === Roles.ADMIN || auth.role === Roles.JOBSEEKER) ?
|
---|
| 112 | <>
|
---|
| 113 | <div className={`navigation ${isActive ? 'active' : ''}`}>
|
---|
| 114 | <div className="user-box">
|
---|
| 115 | <div className="image-box">
|
---|
| 116 | {user.role === Roles.JOBSEEKER && <img src={profilePicState[auth.id]} /> }
|
---|
| 117 | {user.role === Roles.RECRUITER && <img src={logoState[auth.id]} /> }
|
---|
| 118 | {user.role === Roles.ADMIN && <img src="/images/admin.jpg"/> }
|
---|
[4d97b63] | 119 | {/*<img src="https://lh3.googleusercontent.com/a/ACg8ocJOmmRzyRWcuhJj_sCzIoxMeP1M1DOgQ1UeYsFoeJuFB4XgOAnS=s96-c"/>*/}
|
---|
[befb988] | 120 | </div>
|
---|
| 121 | <div className="auth-box">
|
---|
| 122 | <p className="username">{user.name}</p>
|
---|
| 123 | {user.role === Roles.RECRUITER && <p className="role">Recruiter</p>}
|
---|
| 124 | {user.role === Roles.JOBSEEKER && <p className="role">Job Seeker</p>}
|
---|
| 125 | {user.role === Roles.ADMIN && <p className="role">Admin</p>}
|
---|
| 126 | </div>
|
---|
[d8b6c91] | 127 |
|
---|
| 128 | </div>
|
---|
[befb988] | 129 | <div className="menu-toggle" onClick={toggleMenu}></div>
|
---|
| 130 | <ul className="menu">
|
---|
| 131 | {user.role == Roles.JOBSEEKER &&
|
---|
| 132 | <>
|
---|
| 133 | <Link to="/job-seeker/edit-profile" onClick={toggleMenu} className="menu-link">
|
---|
| 134 | <i className="fa-solid fa-pen-to-square"></i> Edit profile
|
---|
| 135 | </Link>
|
---|
| 136 | </>
|
---|
| 137 | }
|
---|
| 138 | {user.role == Roles.RECRUITER &&
|
---|
| 139 | <>
|
---|
| 140 | <Link to="/recruiter/edit-profile" onClick={toggleMenu} className="menu-link">
|
---|
| 141 | <i className="fa-solid fa-pen-to-square"></i> Edit profile
|
---|
| 142 | </Link>
|
---|
| 143 | </>
|
---|
| 144 | }
|
---|
[d8b6c91] | 145 |
|
---|
[befb988] | 146 | <Link onClick={signOut} className="menu-link">
|
---|
| 147 | <i className="fa-solid fa-right-from-bracket"></i> Log out
|
---|
| 148 | </Link>
|
---|
| 149 | </ul>
|
---|
| 150 | </div>
|
---|
| 151 | </> :
|
---|
| 152 | <>
|
---|
| 153 | <Link to="/signin" className="btn auth-secondary-btn">Sign in</Link>
|
---|
| 154 | </>
|
---|
| 155 | }
|
---|
[d8b6c91] | 156 | </div>
|
---|
| 157 | </nav>
|
---|
| 158 |
|
---|
| 159 | )
|
---|
| 160 | } |
---|