text: import React, { useEffect, useState, useMemo } from 'react';
  import { Link } from 'react-router-dom';
  import socketio from 'socket.io-client';
  import api from '../../services/api';
  
  import './styles.css';
  
  export default function Dashboard() {
    const [spots, setSpots] = useState([]);
    const [requests, setRequests] = useState([]);
    const [loggedUser, setLoggedUser] = useState({});
  
    const user_id = localStorage.getItem('user');
  
    const socket = useMemo(
      () =>
        socketio('http://localhost:3333', {
          query: { user_id }
        }),
      [user_id]
    );
  
    useEffect(() => {
      socket.on('booking_request', data => {
        setRequests([...requests, data]);
      });
    }, [requests, socket]);
  
    useEffect(() => {
      async function getLoggedUser() {
        const user_id = localStorage.getItem('user');
        const response = await api.get(`/sessions/${user_id}`);
        
        setLoggedUser(response.data);
      }
      getLoggedUser();
    }, []);
  
    useEffect(() => {
      async function loadSpots() {
        const user_id = localStorage.getItem('user');
        const response = await api.get('/dashboard', {
          headers: { user_id }
        });
        
        setSpots(response.data);
      }
  
      loadSpots();
    }, []);
  
    async function handleAccept(id) {
      await api.post(`/bookings/${id}/approvals`);
      setRequests(requests.filter(request => request._id !== id));
    }
  
    async function handleReject(id) {
      await api.post(`/bookings/${id}/rejections`);
      setRequests(requests.filter(request => request._id !== id));
    }
  
    return (
      <>
        <p className='welcome'>
          Bem Vindo <strong>{loggedUser.email}</strong>
        </p>
  
        <ul className="notifications">
          {requests.map(request => (
            <li key={request._id}>
              <p>
                <strong>{request.user.email}</strong> está solicitando uma reserva
                em <strong>{request.spot.company}</strong> para a data{' '}
                <strong>{request.date}</strong>
              </p>
              <button
                className="accept"
                onClick={() => handleAccept(request._id)}
              >
                Aceitar
              </button>
              <button
                className="reject"
                onClick={() => handleReject(request._id)}
              >
                Rejeitar
              </button>
            </li>
          ))}
        </ul>
  
        <hr />
  
        <ul className="spot-list">
          {spots.map(spot => (
            <li key={spot._id}>
              <header style={{ backgroundImage: `url(${spot.thumbnail_url})` }} />
              <strong>{spot.company}</strong>
              <span>{spot.price ? `R$ ${spot.price}/Dia` : `Gratuíto`}</span>
            </li>
          ))}
        </ul>
        <Link to="/new">
          <button className="btn">Cadastrar novo Spot</button>
        </Link>
      </>
    );
  }
  