Changeset b248810 for jobvista-frontend/src/views

Timestamp:

06/10/24 22:34:32 (5 months ago)

Author:

223021 <daniel.ilievski.2@…>

Branches:

main

Children:

befb988

Parents:

28b3398

Message:

Added no access page for new recruiters and admin panel for granting access

Location:

jobvista-frontend/src/views

Files:

• admin_panel/AdminPanel.css (added)
• admin_panel/AdminPanel.js (added)
• dashboard/Dashboard.js (modified) (6 diffs)
• job_advertisements/JobAdvertisements.js (modified) (2 diffs)
• static/ErrorPage.js (added)
• static/Header.js (modified) (5 diffs)
• static/NoAccess.css (added)
• static/NoAccess.js (added)

jobvista-frontend/src/views/dashboard/Dashboard.js

@@ -4 +4 @@
 import {useEffect, useState} from "react";
 import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
-import {formatRelativeTime, sortElementsByDateCreated} from "../../utils/utils";
+import {formatRelativeTime, sortElementsBy} from "../../utils/utils";
 import {dataRangeOptions, industryOptions, industryOptionsFilter, sortOptions} from "../selectOptions";
 import Select from "react-select";
@@ -10 +10 @@
 import {Link} from "react-router-dom";
 import JobType from "../../enumerations/JobType";
+import {AUTH_TOKEN} from "../../axios/axiosInstance";
+import {jwtDecode} from "jwt-decode";
 
-export const Dashboard = () => {
+export const Dashboard = (props) => {
 
     const dispatch = useDispatch();
@@ -17 +19 @@
     const [jobAdvertisements, setJobAdvertisements] = useState([]);
     let jobAdvertisementsState = useSelector(state => state.jobAd.jobAdvertisements)
-    const auth = useSelector(state => state.auth.currentUser);
+    const auth = useSelector(state => state.auth);
 
-    const [role, setRole] = useState("");
+    // const [role, setRole] = useState("");
     const [selectedSortOrder, setSelectedSortOrder] = useState("date_newest");
     const [selectedIndustry, setSelectedIndustry] = useState("all");
@@ -25 +27 @@
     const [dispatched, setDispatched] = useState(false)
 
-    useEffect(() => {
-        if (auth) {
-            setRole(auth.role);
-        }
-    }, [auth]);
+    // const [user, setUser] = useState(null);
+    //
+    // useEffect(() => {
+    //     const token = localStorage.getItem(AUTH_TOKEN);
+    //     if (token!=null) {
+    //         try {
+    //             const decodedToken = jwtDecode(token);
+    //             setUser({
+    //                 name: decodedToken.name,
+    //                 role: decodedToken.role,
+    //                 hasAccess: decodedToken.access,
+    //             });
+    //         } catch (error) {
+    //             console.error('Failed to decode token', error);
+    //         }
+    //     }
+    //     console.log(user)
+    // }, [auth]);
+
+    // useEffect(() => {
+    //     if (auth) {
+    //         setRole(auth.role);
+    //     }
+    //     console.log(props)
+    // }, [auth]);
 
     useEffect(() => {
@@ -35 +57 @@
             dispatch(JobAdvertisementActions.fetchJobAdvertisements((success, response) => {
                 if (success && response.data.length > 0) {
-                    setJobAdvertisements(sortElementsByDateCreated(response.data))
+                    setJobAdvertisements(sortElementsBy(response.data))
                 }
                 setDispatched(true)
@@ -62 +84 @@
 
     return (
+
         <div className="container">
             <div className="head-dashboard-box">

jobvista-frontend/src/views/job_advertisements/JobAdvertisements.js

@@ -5 +5 @@
 import {useEffect, useState} from "react";
 import {JobAdvertisementActions} from "../../redux/actions/jobAdvertisementActions";
-import {formatRelativeTime, sortElementsByDateCreated} from "../../utils/utils";
+import {formatRelativeTime, sortElementsBy} from "../../utils/utils";
 import {dataRangeOptions, industryOptions, industryOptionsFilter, sortOptions} from "../selectOptions";
 import Select from "react-select";
@@ -37 +37 @@
             dispatch(JobAdvertisementActions.fetchJobAdvertisementsByRecruiter((success, response) => {
                 if (success && response.data.length > 0) {
-                    setJobAdvertisementsByRecruiter(sortElementsByDateCreated(response.data))
+                    setJobAdvertisementsByRecruiter(sortElementsBy(response.data))
                 }
                 console.log("Fetch job advertisements by recruiter GET")

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

@@ -1 +1 @@
 import {Link, NavLink} from "react-router-dom";
 import "./Header.css"
+import { jwtDecode } from "jwt-decode";
 import {useDispatch, useSelector} from 'react-redux';
 import {useEffect, useState} from "react";
@@ -6 +7 @@
 import Roles from "../../enumerations/Roles";
 import {useNavigate} from "react-router";
+import {AUTH_TOKEN} from "../../axios/axiosInstance";
 
 export const Header = (props) => {
@@ -16 +18 @@
     const [username, setUsername] = useState("");
 
+    const [user, setUser] = useState("");
+
     const signOut = () => {
         dispatch(AuthActions.signOut());
         window.location = "/";
     }
+
+    useEffect(() => {
+        const token = localStorage.getItem(AUTH_TOKEN);
+        if (token!=null) {
+            try {
+                const decodedToken = jwtDecode(token);
+                setUser({
+                    name: decodedToken.name,
+                    role: decodedToken.role,
+                    hasAccess: decodedToken.hasAccess,
+                });
+            } catch (error) {
+                console.error('Failed to decode token', error);
+            }
+        }
+    }, [auth]);
 
     useEffect(() => {
@@ -49 +69 @@
                             </>
                         }
+                        {role===Roles.ADMIN &&
+                            <>
+                                <NavLink to="/admin-panel" className="nav-item nav-link">Admin Panel</NavLink>
+                            </>
+
+                        }
                         <NavLink to="/about" className="nav-item nav-link">About</NavLink>
                         <NavLink to="/contact" className="nav-item nav-link">Support</NavLink>
@@ -57 +83 @@
                             <img src="/images/user.png" width="45" height="45"/>
                             <div className="auth-box">
-                                <p className="user"><b>{username}</b></p>
-                                <p className="role">{role==Roles.RECRUITER ? "Recruiter" : "Job Seeker"}</p>
+                                <p className="user"><b>{user.name}</b></p>
+                                {user.role==Roles.RECRUITER && <p className="role">Recruiter</p>}
+                                {user.role==Roles.JOBSEEKER && <p className="role">Job Seeker</p>}
+                                {user.role==Roles.ADMIN && <p className="role">Admin</p>}
+                                {/*<p className="role">{user.role==Roles.RECRUITER ? "Recruiter" : "Job Seeker"}</p>*/}
                             </div>