[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";
|
---|
| 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 | } |
---|