Ignore:
Timestamp:
06/17/24 21:59:14 (2 weeks ago)
Author:
223021 <daniel.ilievski.2@…>
Branches:
main
Children:
08f82ec
Parents:
b248810
Message:

Added an edit profile page for both job seekers and recruiters, where they can upload profile pictures/company logos and edit their profile data. Added profile page specifically for recruiters. Refactored existing code.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • jobvista-frontend/src/views/static/Header.js

    rb248810 rbefb988  
    11import {Link, NavLink} from "react-router-dom";
    22import "./Header.css"
    3 import { jwtDecode } from "jwt-decode";
     3import {jwtDecode} from "jwt-decode";
    44import {useDispatch, useSelector} from 'react-redux';
    55import {useEffect, useState} from "react";
    … …  
    88import {useNavigate} from "react-router";
    99import {AUTH_TOKEN} from "../../axios/axiosInstance";
     10import {JobSeekerActions} from "../../redux/actions/JobSeekerActions";
     11import {RecruiterActions} from "../../redux/actions/recruiterActions";
    1012
    1113export const Header = (props) => {
    … …  
    1719    const [role, setRole] = useState("");
    1820    const [username, setUsername] = useState("");
     21    const [user, setUser] = useState("");
    1922
    20     const [user, setUser] = useState("");
     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);
    2130
    2231    const signOut = () => {
    2332        dispatch(AuthActions.signOut());
    2433        window.location = "/";
     34        //navigator("/")
    2535    }
     36    const [isActive, setIsActive] = useState(false);
     37
     38    const toggleMenu = () => {
     39        setIsActive(!isActive);
     40    };
    2641
    2742    useEffect(() => {
    2843        const token = localStorage.getItem(AUTH_TOKEN);
    29         if (token!=null) {
     44        if (token != null) {
    3045            try {
    3146                const decodedToken = jwtDecode(token);
    … …  
    3449                    role: decodedToken.role,
    3550                    hasAccess: decodedToken.hasAccess,
     51                    id: decodedToken.id
    3652                });
    3753            } catch (error) {
    … …  
    4561            setRole(auth.role);
    4662            setUsername(auth.name);
     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            }
    4781        }
    4882    }, [auth]);
    … …  
    5185        <nav className="navbar navbar-expand-lg bg-light">
    5286            <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">
     87                <Link to="/" className="logo"/>
     88                <Link to="/" className="brand-name"/>
     89                <div className="navbar-collapse">
    5690                    <ul className="navbar-nav me-auto mb-2 mb-lg-0">
    5791                        <NavLink to="/" className="nav-item nav-link">Home</NavLink>
    58                         {role==Roles.JOBSEEKER &&
     92                        {role == Roles.JOBSEEKER &&
    5993                            <>
    60                                 <NavLink to="/my-applications" className="nav-item nav-link" >My Applications</NavLink>
    61                                 {/*<NavLink to="/favoritejobs" className="nav-item nav-link" >Saved</NavLink>*/}
    62                             </>
    63 
    64                         }
    65                         {role==Roles.RECRUITER &&
    66                             <>
    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>*/}
     94                                <NavLink to="/my-applications" className="nav-item nav-link">My Applications</NavLink>
    6995                            </>
    7096                        }
    71                         {role===Roles.ADMIN &&
     97                        {role == Roles.RECRUITER &&
     98                            <>
     99                                <NavLink to="/job-management-hub" className="nav-item nav-link">Job Management Hub</NavLink>
     100                            </>
     101                        }
     102                        {role === Roles.ADMIN &&
    72103                            <>
    73104                                <NavLink to="/admin-panel" className="nav-item nav-link">Admin Panel</NavLink>
    74105                            </>
     106                        }
     107                        <NavLink to="/about" className="nav-item nav-link">About Us</NavLink>
     108                        {/*<NavLink to="/contact" className="nav-item nav-link">Support</NavLink>*/}
     109                    </ul>
     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"/> }
     119                                </div>
     120                                <div className="auth-box">
     121                                    <p className="username">{user.name}</p>
     122                                    {user.role === Roles.RECRUITER && <p className="role">Recruiter</p>}
     123                                    {user.role === Roles.JOBSEEKER && <p className="role">Job Seeker</p>}
     124                                    {user.role === Roles.ADMIN && <p className="role">Admin</p>}
     125                                </div>
    75126
    76                         }
    77                         <NavLink to="/about" className="nav-item nav-link">About</NavLink>
    78                         <NavLink to="/contact" className="nav-item nav-link">Support</NavLink>
    79                     </ul>
     127                            </div>
     128                            <div className="menu-toggle" onClick={toggleMenu}></div>
     129                            <ul className="menu">
     130                                {user.role == Roles.JOBSEEKER &&
     131                                    <>
     132                                        <Link to="/job-seeker/edit-profile" onClick={toggleMenu} className="menu-link">
     133                                            <i className="fa-solid fa-pen-to-square"></i> Edit profile
     134                                        </Link>
     135                                    </>
     136                                }
     137                                {user.role == Roles.RECRUITER &&
     138                                    <>
     139                                        <Link to="/recruiter/edit-profile" onClick={toggleMenu} className="menu-link">
     140                                            <i className="fa-solid fa-pen-to-square"></i> Edit profile
     141                                        </Link>
     142                                    </>
     143                                }
    80144
    81                     {auth ?
    82                         <>
    83                             <img src="/images/user.png" width="45" height="45"/>
    84                             <div className="auth-box">
    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>*/}
    90                             </div>
    91 
    92 
    93                             <Link onClick={signOut} className="btn auth-secondary-btn">Log out</Link>
    94                         </> :
    95                         <>
    96                             <Link to="/signin" className="btn auth-secondary-btn">Sign in</Link>
    97                         </>
    98                     }
    99 
    100                 </div>
     145                                <Link onClick={signOut} className="menu-link">
     146                                    <i className="fa-solid fa-right-from-bracket"></i> Log out
     147                                </Link>
     148                            </ul>
     149                        </div>
     150                    </> :
     151                    <>
     152                        <Link to="/signin" className="btn auth-secondary-btn">Sign in</Link>
     153                    </>
     154                }
    101155            </div>
    102156        </nav>
Note: See TracChangeset for help on using the changeset viewer.