Changeset b248810 for jobvista-frontend/src

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

Files:

• App.js (modified) (2 diffs)
• auth/RoutesConfig.js (modified) (2 diffs)
• redux/actionTypes.js (modified) (1 diff)
• redux/actions/adminActions.js (added)
• redux/actions/authActions.js (modified) (1 diff)
• redux/reducers/adminReducer.js (added)
• redux/reducers/jobAdvertisementReducer.js (modified) (6 diffs)
• redux/store.js (modified) (2 diffs)
• utils/utils.js (modified) (2 diffs)
• views/admin_panel/AdminPanel.css (added)
• views/admin_panel/AdminPanel.js (added)
• views/dashboard/Dashboard.js (modified) (6 diffs)
• views/job_advertisements/JobAdvertisements.js (modified) (2 diffs)
• views/static/ErrorPage.js (added)
• views/static/Header.js (modified) (5 diffs)
• views/static/NoAccess.css (added)
• views/static/NoAccess.js (added)

jobvista-frontend/src/App.js

@@ -1 +1 @@
 import logo from './logo.svg';
 import './App.css';
-import {useDispatch} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
 import {BrowserRouter} from "react-router-dom";
 import {Header} from "./views/static/Header";
 import {RoutesConfig} from "./auth/RoutesConfig";
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 import {AuthActions} from "./redux/actions/authActions";
 import {AUTH_TOKEN} from "./axios/axiosInstance";
+import {jwtDecode} from "jwt-decode";
+import {NoAccess} from "./views/static/NoAccess";
 
 function App() {
@@ -16 +18 @@
     }, [dispatch])
 
+    const [user, setUser] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const auth = useSelector(state => state.auth);
+
+    useEffect(() => {
+        const token = localStorage.getItem(AUTH_TOKEN);
+        if (token !== null) {
+            try {
+                const decodedToken = jwtDecode(token);
+                setUser({
+                    name: decodedToken.name,
+                    role: decodedToken.role,
+                    hasAccess: auth.currentUser.access,
+                });
+                setLoading(false);
+            } catch (error) {
+                console.error('Failed to decode token', error);
+                setLoading(false);
+            }
+        } else {
+            setLoading(false);
+        }
+    }, [auth]);
+
+    if (loading) {
+        return <NoAccess />; // Replace LoadingSpinner with your loading indicator component
+    }
+
   return (
       <div className="App">
           <BrowserRouter>
-              <Header/>
-              <RoutesConfig/>
+              {user === null ? (
+                  <>
+                      <Header />
+                      <RoutesConfig />
+                  </>
+              ) : user.hasAccess ? (
+                  <>
+                      <Header />
+                      <RoutesConfig />
+                  </>
+              ) : (
+                  <NoAccess user={user}/>
+              )}
+
+
           </BrowserRouter>
       </div>

jobvista-frontend/src/auth/RoutesConfig.js

@@ -9 +9 @@
 import {ApplicationsByJobAd} from "../views/applications/ApplicationsByJobAd";
 import {ApplicationsByJobSeeker} from "../views/applications/ApplicationsByJobSeeker";
+import {useEffect, useState} from "react";
+import {AUTH_TOKEN} from "../axios/axiosInstance";
+import {jwtDecode} from "jwt-decode";
+import {useSelector} from "react-redux";
+import {AdminPanel} from "../views/admin_panel/AdminPanel";
 export const RoutesConfig = () => {
 
@@ -21 +26 @@
                 <Route path="/job-advertisements/:id" element={<JobAdDetails/>}></Route>
                 <Route path="/my-job-advertisements/:advertisement_id/applications" element={<ApplicationsByJobAd/>}></Route>
+                <Route path="/admin-panel" element={<AdminPanel/>}></Route>
             </Routes>
     )

jobvista-frontend/src/redux/actionTypes.js

@@ -18 +18 @@
 export const DOWNLOAD_RESUME = "DOWNLOAD_RESUME"
 
+export const FETCH_RECRUITERS = "FETCH_RECRUITERS"
+export const CHANGE_ACCESS = "CHANGE_ACCESS"
 
+

jobvista-frontend/src/redux/actions/authActions.js

@@ -48 +48 @@
                     email: response.email,
                     name: response.name,
-                    role: response.role
+                    role: response.role,
+                    access: response.hasAccess,
                 };
                 dispatch({

jobvista-frontend/src/redux/reducers/jobAdvertisementReducer.js

@@ -5 +5 @@
     FETCH_JOB_ADVERTISEMENTS_BY_RECRUITER, FILTER_JOB_ADVERTISEMENTS, FILTER_JOB_ADVERTISEMENTS_BY_RECRUITER
 } from "../actionTypes";
-import {sortElementsByDateCreated} from "../../utils/utils";
+import {sortElementsBy} from "../../utils/utils";
 import {useSelector} from "react-redux";
 
@@ -22 +22 @@
             return {
                 ...state,
-                jobAdvertisements: sortElementsByDateCreated([...state.jobAdvertisements, action.jobAdvertisement]),
-                jobAdvertisementsByRecruiter: sortElementsByDateCreated([...state.jobAdvertisementsByRecruiter, action.jobAdvertisement])
+                jobAdvertisements: sortElementsBy([...state.jobAdvertisements, action.jobAdvertisement]),
+                jobAdvertisementsByRecruiter: sortElementsBy([...state.jobAdvertisementsByRecruiter, action.jobAdvertisement], "postedOn")
             }
         case EDIT_JOB_ADVERTISEMENT:
@@ -30 +30 @@
 
             return {
-                jobAdvertisements: sortElementsByDateCreated([...jobAdvertisements, action.jobAdvertisement]),
-                jobAdvertisementsByRecruiter: sortElementsByDateCreated([...jobAdvertisementsByRecruiter, action.jobAdvertisement])
+                jobAdvertisements: sortElementsBy([...jobAdvertisements, action.jobAdvertisement], "postedOn"),
+                jobAdvertisementsByRecruiter: sortElementsBy([...jobAdvertisementsByRecruiter, action.jobAdvertisement], "postedOn")
             }
         case DELETE_JOB_ADVERTISEMENT:
@@ -38 +38 @@
 
             return {
-                jobAdvertisements: sortElementsByDateCreated([...jobAdvertisements]),
-                jobAdvertisementsByRecruiter: sortElementsByDateCreated([...jobAdvertisementsByRecruiter])
+                jobAdvertisements: sortElementsBy([...jobAdvertisements], "postedOn"),
+                jobAdvertisementsByRecruiter: sortElementsBy([...jobAdvertisementsByRecruiter], "postedOn")
             }
 
@@ -45 +45 @@
             return {
                 ...state,
-                jobAdvertisements: sortElementsByDateCreated(action.jobAdvertisements)
+                jobAdvertisements: sortElementsBy(action.jobAdvertisements, "postedOn")
             }
 
@@ -52 +52 @@
             return {
                 ...state,
-                jobAdvertisementsByRecruiter: sortElementsByDateCreated(action.jobAdvertisementsByRecruiter)
+                jobAdvertisementsByRecruiter: sortElementsBy(action.jobAdvertisementsByRecruiter, "postedOn")
             }
 

jobvista-frontend/src/redux/store.js

@@ -4 +4 @@
 import jobAdReducer from "./reducers/jobAdvertisementReducer";
 import applicationReducer from "./reducers/applicationReducer"
+import adminReducer from "./reducers/adminReducer"
+import {AdminActions} from "./actions/adminActions";
 
 // const rootReducer = combineReducers({
@@ -18 +20 @@
         auth: authReducer,
         jobAd: jobAdReducer,
-        appl: applicationReducer
+        appl: applicationReducer,
+        admin: adminReducer
     },
 });

jobvista-frontend/src/utils/utils.js

@@ -1 +1 @@
 
 
-export const sortElementsByDateCreated = (array) => {
+export const sortElementsBy = (array, column) => {
     return array.slice().sort((a, b) => {
-        return new Date(b.postedOn).getTime() - new Date(a.postedOn).getTime()
+        return new Date(b[column]).getTime() - new Date(a[column]).getTime()
     });
 }
@@ -9 +9 @@
 export const sortElementsBySubmissionDate = (array) => {
     return array.slice().sort((a, b) => {
-        return new Date(b.postedOn).getTime() - new Date(a.postedOn).getTime()
+        return new Date(b).getTime() - new Date(a.postedOn).getTime()
     });
 }

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>