[d8b6c91] | 1 | import {Link, NavLink} from "react-router-dom";
|
---|
| 2 | import "./Header.css"
|
---|
[b248810] | 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";
|
---|
[d8b6c91] | 10 |
|
---|
[19398ad] | 11 | export const Header = (props) => {
|
---|
[d8b6c91] | 12 |
|
---|
| 13 | const auth = useSelector(state => state.auth.currentUser);
|
---|
| 14 | const dispatch = useDispatch();
|
---|
[19398ad] | 15 | const navigator = useNavigate();
|
---|
[d8b6c91] | 16 |
|
---|
[19398ad] | 17 | const [role, setRole] = useState("");
|
---|
| 18 | const [username, setUsername] = useState("");
|
---|
[d8b6c91] | 19 |
|
---|
[b248810] | 20 | const [user, setUser] = useState("");
|
---|
| 21 |
|
---|
[d8b6c91] | 22 | const signOut = () => {
|
---|
| 23 | dispatch(AuthActions.signOut());
|
---|
| 24 | window.location = "/";
|
---|
| 25 | }
|
---|
| 26 |
|
---|
[b248810] | 27 | useEffect(() => {
|
---|
| 28 | const token = localStorage.getItem(AUTH_TOKEN);
|
---|
| 29 | if (token!=null) {
|
---|
| 30 | try {
|
---|
| 31 | const decodedToken = jwtDecode(token);
|
---|
| 32 | setUser({
|
---|
| 33 | name: decodedToken.name,
|
---|
| 34 | role: decodedToken.role,
|
---|
| 35 | hasAccess: decodedToken.hasAccess,
|
---|
| 36 | });
|
---|
| 37 | } catch (error) {
|
---|
| 38 | console.error('Failed to decode token', error);
|
---|
| 39 | }
|
---|
| 40 | }
|
---|
| 41 | }, [auth]);
|
---|
| 42 |
|
---|
[d8b6c91] | 43 | useEffect(() => {
|
---|
| 44 | if (auth) {
|
---|
| 45 | setRole(auth.role);
|
---|
| 46 | setUsername(auth.name);
|
---|
| 47 | }
|
---|
| 48 | }, [auth]);
|
---|
| 49 |
|
---|
| 50 | return (
|
---|
| 51 | <nav className="navbar navbar-expand-lg bg-light">
|
---|
| 52 | <div className="container-fluid">
|
---|
| 53 | <Link to="/" className="logo navbar-brand" />
|
---|
| 54 | <Link to="/" className="brand-name navbar-brand" />
|
---|
| 55 | <div className="collapse navbar-collapse" id="navbarSupportedContent">
|
---|
| 56 | <ul className="navbar-nav me-auto mb-2 mb-lg-0">
|
---|
[19398ad] | 57 | <NavLink to="/" className="nav-item nav-link">Home</NavLink>
|
---|
[d8b6c91] | 58 | {role==Roles.JOBSEEKER &&
|
---|
| 59 | <>
|
---|
[28b3398] | 60 | <NavLink to="/my-applications" className="nav-item nav-link" >My Applications</NavLink>
|
---|
| 61 | {/*<NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>*/}
|
---|
[d8b6c91] | 62 | </>
|
---|
| 63 |
|
---|
| 64 | }
|
---|
| 65 | {role==Roles.RECRUITER &&
|
---|
| 66 | <>
|
---|
[28b3398] | 67 | <NavLink to="/my-job-advertisements" className="nav-item nav-link" >My Advertisements</NavLink>
|
---|
| 68 | {/*<NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>*/}
|
---|
[d8b6c91] | 69 | </>
|
---|
| 70 | }
|
---|
[b248810] | 71 | {role===Roles.ADMIN &&
|
---|
| 72 | <>
|
---|
| 73 | <NavLink to="/admin-panel" className="nav-item nav-link">Admin Panel</NavLink>
|
---|
| 74 | </>
|
---|
| 75 |
|
---|
| 76 | }
|
---|
[d8b6c91] | 77 | <NavLink to="/about" className="nav-item nav-link">About</NavLink>
|
---|
[28b3398] | 78 | <NavLink to="/contact" className="nav-item nav-link">Support</NavLink>
|
---|
[d8b6c91] | 79 | </ul>
|
---|
| 80 |
|
---|
| 81 | {auth ?
|
---|
| 82 | <>
|
---|
| 83 | <img src="/images/user.png" width="45" height="45"/>
|
---|
| 84 | <div className="auth-box">
|
---|
[b248810] | 85 | <p className="user"><b>{user.name}</b></p>
|
---|
| 86 | {user.role==Roles.RECRUITER && <p className="role">Recruiter</p>}
|
---|
| 87 | {user.role==Roles.JOBSEEKER && <p className="role">Job Seeker</p>}
|
---|
| 88 | {user.role==Roles.ADMIN && <p className="role">Admin</p>}
|
---|
| 89 | {/*<p className="role">{user.role==Roles.RECRUITER ? "Recruiter" : "Job Seeker"}</p>*/}
|
---|
[d8b6c91] | 90 | </div>
|
---|
| 91 |
|
---|
| 92 |
|
---|
[19398ad] | 93 | <Link onClick={signOut} className="btn auth-secondary-btn">Log out</Link>
|
---|
[d8b6c91] | 94 | </> :
|
---|
| 95 | <>
|
---|
[19398ad] | 96 | <Link to="/signin" className="btn auth-secondary-btn">Sign in</Link>
|
---|
[d8b6c91] | 97 | </>
|
---|
| 98 | }
|
---|
| 99 |
|
---|
| 100 | </div>
|
---|
| 101 | </div>
|
---|
| 102 | </nav>
|
---|
| 103 |
|
---|
| 104 | )
|
---|
| 105 | } |
---|