[b248810] | 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";
|
---|
[befb988] | 6 | import {notifyAccessUpdate} from "../../utils/toastUtils";
|
---|
[b248810] | 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")
|
---|
[befb988] | 27 | console.log(recruitersState)
|
---|
| 28 |
|
---|
[b248810] | 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 |
|
---|
[befb988] | 37 | const handleAccessChange = (recruiterId, companyName, newAccessStatus) => {
|
---|
| 38 |
|
---|
[b248810] | 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) {
|
---|
[befb988] | 49 | notifyAccessUpdate(companyName)
|
---|
[b248810] | 50 | }
|
---|
| 51 | }));
|
---|
| 52 | };
|
---|
| 53 |
|
---|
| 54 | return (
|
---|
[befb988] | 55 | <div className="custom-container mt-5">
|
---|
[08f82ec] | 56 | <table className="table">
|
---|
[b248810] | 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>
|
---|
[befb988] | 68 | {recruitersState.map((recruiter) => (
|
---|
[b248810] | 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>
|
---|
[befb988] | 74 | <td>{recruiter.contactPhoneNumber}</td>
|
---|
[b248810] | 75 | <td>
|
---|
| 76 | <label className="switch">
|
---|
| 77 | <input
|
---|
| 78 | type="checkbox"
|
---|
| 79 | checked={recruiter.hasAccess}
|
---|
[befb988] | 80 | onChange={(e) => handleAccessChange(recruiter.id, recruiter.companyName, e.target.checked)}
|
---|
[b248810] | 81 | />
|
---|
| 82 | <span className="slider"></span>
|
---|
| 83 | </label>
|
---|
| 84 | </td>
|
---|
| 85 |
|
---|
| 86 |
|
---|
| 87 | </tr>
|
---|
| 88 | ))}
|
---|
| 89 | </tbody>
|
---|
| 90 | </table>
|
---|
| 91 | </div>
|
---|
| 92 | )
|
---|
| 93 | } |
---|