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