text: import React, { useState } from 'react';
  import { FiLogIn } from 'react-icons/fi';
  import { Link, useHistory } from 'react-router-dom';
  
  import './styles.css';
  
  import api from '../../services/api';
  import logoImg from '../../assets/logo.svg';
  import heroesImg from '../../assets/heroes.png';
  
  export default function Logon() {
  	const [id, setId] = useState('');
  	
  	const history = useHistory();
  
  	async function handleLogin(event) {
  		event.preventDefault();
  
  		try {
  			const data = { id };
  			const { data: { name: ongName } } = await api.post('sessions', data);
  
  			localStorage.setItem('ongId', id);
  			localStorage.setItem('ongName', ongName);
  
  			history.push('/profile');
  		} catch (err) {
  			alert('Falha no login, tente novamente.')
  		}
  	}
  
  	return (
  		<div className="logon-container">
  			<section className="form">
  				<img src={logoImg} alt="Logo" />
  
  				<form onSubmit={handleLogin}>
  					<h1>Faça seu logon</h1>
  
  					<input
  						placeholder="Sua ID"
  						value={id}
  						onChange={event => setId(event.target.value)}
  					/>
  					<button className="button" type="submit">Entrar</button>
  
  					<Link className="back-link" to="/register">
  						<FiLogIn size={16} color="#e02041" />
  						Não tenho cadastro
  					</Link>
  				</form>
  			</section>
  
  			<img src={heroesImg} alt="Heroes" />
  		</div>
  	);
  }
  