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;