1 | import "./AdminPanel.css"
|
---|
2 |
|
---|
3 | import {useDispatch, useSelector} from "react-redux";
|
---|
4 | import {useState, useEffect} from "react";
|
---|
5 | import {AdminActions} from "../../redux/actions/adminActions";
|
---|
6 |
|
---|
7 | export const AdminPanel = () => {
|
---|
8 |
|
---|
9 | const dispatch = useDispatch();
|
---|
10 | const [recruiters, setRecruiters] = useState([]);
|
---|
11 | let recruitersState = useSelector(state => state.admin.recruiters)
|
---|
12 | const [dispatched, setDispatched] = useState(false)
|
---|
13 |
|
---|
14 | useEffect(() => {
|
---|
15 | if(!dispatched && recruitersState.length == 0) {
|
---|
16 | dispatch(AdminActions.fetchRecruiters((success, response) => {
|
---|
17 | if(success && response.data.length > 0) {
|
---|
18 | setRecruiters(response.data)
|
---|
19 | }
|
---|
20 | setDispatched(true)
|
---|
21 | console.log("Fetch all recruiters GET")
|
---|
22 | }))
|
---|
23 | } else {
|
---|
24 | setRecruiters(recruitersState)
|
---|
25 | console.log("Fetch all recruiters STATE")
|
---|
26 | }
|
---|
27 | }, [recruitersState])
|
---|
28 |
|
---|
29 | const formatDate = (dateString) => {
|
---|
30 | const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
|
---|
31 | return new Date(dateString).toLocaleDateString('en-US', options);
|
---|
32 | };
|
---|
33 |
|
---|
34 | const handleAccessChange = (recruiterId, newAccessStatus) => {
|
---|
35 | setRecruiters(prevState =>
|
---|
36 | prevState.map(recruiter =>
|
---|
37 | recruiter.id === recruiterId
|
---|
38 | ? { ...recruiter, hasAccess: newAccessStatus }
|
---|
39 | : recruiter
|
---|
40 | )
|
---|
41 | );
|
---|
42 |
|
---|
43 | console.log(recruiterId + " " + newAccessStatus)
|
---|
44 |
|
---|
45 | dispatch(AdminActions.changeAccess(recruiterId, newAccessStatus, (success, response) => {
|
---|
46 | if(success) {
|
---|
47 | console.log("Access changed")
|
---|
48 | }
|
---|
49 | }));
|
---|
50 | };
|
---|
51 |
|
---|
52 | return (
|
---|
53 | <div className="applications-container mt-5">
|
---|
54 | <table className="table table-striped">
|
---|
55 | <thead>
|
---|
56 | <tr>
|
---|
57 | <th scope="col">ID</th>
|
---|
58 | <th scope="col">Registered on</th>
|
---|
59 | <th scope="col">Email</th>
|
---|
60 | <th scope="col">Company Name</th>
|
---|
61 | <th scope="col">Phone Number</th>
|
---|
62 | <th scope="col">Access</th>
|
---|
63 | </tr>
|
---|
64 | </thead>
|
---|
65 | <tbody>
|
---|
66 | {recruiters.map((recruiter) => (
|
---|
67 | <tr key={recruiter.id}>
|
---|
68 | <th scope="row">{recruiter.id}</th>
|
---|
69 | <td>{formatDate(recruiter.registeredOn)}</td>
|
---|
70 | <td>{recruiter.email}</td>
|
---|
71 | <td>{recruiter.companyName}</td>
|
---|
72 | <td>{recruiter.phoneNumber}</td>
|
---|
73 | <td>
|
---|
74 | <label className="switch">
|
---|
75 | <input
|
---|
76 | type="checkbox"
|
---|
77 | checked={recruiter.hasAccess}
|
---|
78 | onChange={(e) => handleAccessChange(recruiter.id, e.target.checked)}
|
---|
79 | />
|
---|
80 | <span className="slider"></span>
|
---|
81 | </label>
|
---|
82 | </td>
|
---|
83 |
|
---|
84 |
|
---|
85 | </tr>
|
---|
86 | ))}
|
---|
87 | </tbody>
|
---|
88 | </table>
|
---|
89 | </div>
|
---|
90 | )
|
---|
91 | } |
---|