1 | import {Link, NavLink} from "react-router-dom";
|
---|
2 | import "./Header.css"
|
---|
3 | import {useDispatch, useSelector} from 'react-redux';
|
---|
4 | import {useEffect, useState} from "react";
|
---|
5 | import {AuthActions} from "../../redux/actions/authActions";
|
---|
6 | import Roles from "../../enumerations/Roles";
|
---|
7 | import {useNavigate} from "react-router";
|
---|
8 |
|
---|
9 | export const Header = (props) => {
|
---|
10 |
|
---|
11 | const auth = useSelector(state => state.auth.currentUser);
|
---|
12 | const dispatch = useDispatch();
|
---|
13 | const navigator = useNavigate();
|
---|
14 |
|
---|
15 | const [role, setRole] = useState("");
|
---|
16 | const [username, setUsername] = useState("");
|
---|
17 |
|
---|
18 | const signOut = () => {
|
---|
19 | dispatch(AuthActions.signOut());
|
---|
20 | window.location = "/";
|
---|
21 | }
|
---|
22 |
|
---|
23 | useEffect(() => {
|
---|
24 | if (auth) {
|
---|
25 | setRole(auth.role);
|
---|
26 | setUsername(auth.name);
|
---|
27 | }
|
---|
28 | }, [auth]);
|
---|
29 |
|
---|
30 | return (
|
---|
31 | <nav className="navbar navbar-expand-lg bg-light">
|
---|
32 | <div className="container-fluid">
|
---|
33 | <Link to="/" className="logo navbar-brand" />
|
---|
34 | <Link to="/" className="brand-name navbar-brand" />
|
---|
35 | <div className="collapse navbar-collapse" id="navbarSupportedContent">
|
---|
36 | <ul className="navbar-nav me-auto mb-2 mb-lg-0">
|
---|
37 | <NavLink to="/" className="nav-item nav-link">Home</NavLink>
|
---|
38 | {role==Roles.JOBSEEKER &&
|
---|
39 | <>
|
---|
40 | <NavLink to="/applications" className="nav-item nav-link" >Applications</NavLink>
|
---|
41 | <NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>
|
---|
42 | </>
|
---|
43 |
|
---|
44 | }
|
---|
45 | {role==Roles.RECRUITER &&
|
---|
46 | <>
|
---|
47 | <NavLink to="/my-job-advertisements" className="nav-item nav-link" >Job Advertisements</NavLink>
|
---|
48 | <NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>
|
---|
49 | </>
|
---|
50 | }
|
---|
51 | <NavLink to="/about" className="nav-item nav-link">About</NavLink>
|
---|
52 | <NavLink to="/contact" className="nav-item nav-link">Contact</NavLink>
|
---|
53 | </ul>
|
---|
54 |
|
---|
55 | {auth ?
|
---|
56 | <>
|
---|
57 | <img src="/images/user.png" width="45" height="45"/>
|
---|
58 | <div className="auth-box">
|
---|
59 | <p className="user"><b>{username}</b></p>
|
---|
60 | <p className="role">{role==Roles.RECRUITER ? "Recruiter" : "Job Seeker"}</p>
|
---|
61 | </div>
|
---|
62 |
|
---|
63 |
|
---|
64 | <Link onClick={signOut} className="btn auth-secondary-btn">Log out</Link>
|
---|
65 | </> :
|
---|
66 | <>
|
---|
67 | <Link to="/signin" className="btn auth-secondary-btn">Sign in</Link>
|
---|
68 | </>
|
---|
69 | }
|
---|
70 |
|
---|
71 | </div>
|
---|
72 | </div>
|
---|
73 | </nav>
|
---|
74 |
|
---|
75 | )
|
---|
76 | } |
---|