import { useContext, useEffect, useState } from 'react'; import { useNavigate } from 'react-router'; import { ApiContext } from '../../utils/api_context'; import { AuthContext } from '../../utils/auth_context'; import { RolesContext } from '../../utils/roles_context'; import { Button } from '../common/button'; import { Map } from '../map/_map'; export const Home = () => { const [, setAuthToken] = useContext(AuthContext); const api = useContext(ApiContext); const roles = useContext(RolesContext); const navigate = useNavigate(); const [loading, setLoading] = useState(true); const [user, setUser] = useState(null); useEffect(async () => { const res = await api.get('/users/me'); setUser(res.user); setLoading(false); }, []); const logout = async () => { const res = await api.del('/sessions'); if (res.success) { setAuthToken(null); } }; const joinRoom = async (id, userPosition) => { const res = await api.get(`/chat_rooms/${id}/joinable?lat=${userPosition.lat}&lng=${userPosition.lng}`); if (res) { navigate(`/rooms/${id}`); } }; if (loading) { return
Loading...
; } return ( <>

Welcome {user.firstName}

{roles.includes('admin') && ( )}
); };