Still figuring that out
I am available for collaborations!
import React, {useState, useEffect, useContext} from 'react'; import {AppContext} from '../contexts/context'; import axios from 'axios'; import AdminNavbar from './AdminNavbar'; import UserList from './UserList'; import {RiUserSearchLine, RiAddLine} from 'react-icons/ri'; import FloatingBtn from './layouts/FloatingBtn'; import {Link} from 'react-router-dom'; const AdminDashboard = () => { const [users, setUsers] = useState ([]); // eslint-disable-next-line const [isAuthenticated, setIsAuthenticated] = useContext (AppContext); // ComponentDidMount useEffect (() => { async function getUsers () { await axios .get ('/api/users/') .then (result => setUsers (result.data)) .catch (err => console.log (err)); } getUsers (); }); // Event handler const handleDeleteUser = id => { axios .delete ('/api/users/delete/' + id) .then (setUsers (users.filter (user => user.id !== id))) .catch (err => console.log (err)); }; // Event handler const handleLogout = () => { setIsAuthenticated (false); }; return ( <div> <div className=""> <AdminNavbar /> <FloatingBtn /> <div className="container mb-3"> <Link to="/admin/user/add" className="btn btn-red text-white mb-3"> <small><RiAddLine /> Create user</small> </Link> </div><hr /> <div className="container"> <div> <h5> <RiUserSearchLine size="30" /> User Database</h5> <table className="table table-hover table-sm"> <thead> <tr className=""> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Status</th> </tr> </thead> <tbody> {users.length === 0 ? 'loading' : users.map (user => { return ( <UserList id={user._id} key={user._id} firstname={user.firstname} lastname={user.lastname} deleteUser={handleDeleteUser} /> ); })} </tbody> </table> <hr /> <div className="mt-2"> <button className="btn btn-red text-white mb-3" onClick={handleLogout} > <small>Logout</small> </button> </div> </div> </div> </div> </div> ); }; export default AdminDashboard;