text: import React, { useState, useEffect } from 'react'
  import io from 'socket.io-client'
  import { Link } from 'react-router-dom'
  
  import './Main.css'
  import logo from '../assets/logo.svg'
  import itamatch from '../assets/itsamatch.png'
  import dislike from '../assets/dislike.svg'
  import like from '../assets/like.svg'
  import api from '../services/api'
  
  
  export default function Main({ match }) {
  
      const [users, setUsers] = useState([])
      const [matchDev, setmatchDev] = useState(null)
  
      useEffect(() => {
          async function loadUsers() {
              const response = await api.get('/devs', {
                  headers: { user: match.params.id }
              })
  
              setUsers(response.data)
          }
  
          loadUsers()
      }, [match.params.id])
  
      useEffect(() => {
          const socket = io('http://localhost:3333',{
              query: { user: match.params.id }
          })
  
          socket.on('match', dev => {
              setmatchDev(dev)
          })
  
      }, [match.params.id])
  
      async function handleLike(id) {
          await api.post(`/devs/${id}/likes`, null, {
              headers: { user: match.params.id }
          })
  
          setUsers(users.filter(user => user._id !== id))
      }
  
      async function handleDislike(id) {
          await api.post(`/devs/${id}/dislikes`, null, {
              headers: { user: match.params.id }
          })
  
          setUsers(users.filter(user => user._id !== id))
      }
  
      return (
          <div className="main-container">
              <Link to='/'>
                  <img src={logo} alt='Tindev' />
              </Link>
              {users.length > 0 ? (
                  <ul>
                      {users.map(user => (
                          <li key={user._id}>
                              <img src={user.avatar} alt='Tindev' />
                              <footer>
                                  <strong>{user.name}</strong>
                                  <p>{user.bio}</p>
                              </footer>
                              <div className="buttons">
                                  <button onClick={() => handleDislike(user._id)}>
                                      <img src={dislike} alt='' />
                                  </button>
                                  <button onClick={() => handleLike(user._id)}>
                                      <img src={like} alt='' />
                                  </button>
                              </div>
                          </li>
                      ))}
                  </ul>
              ) : <div className="empty">Acabou :(</div>}
  
              { matchDev && (
                  <div className="match-container">
                      <img src={itamatch} alt="It's a match" />
                      <img className='avatar' src={matchDev.avatar} alt='' />
                      <strong>{matchDev.name}</strong>
                      <button onClick={() => setmatchDev(null) }>FECHAR</button>
                  </div>
              )}
  
          </div>
      )
  
  }