logica de aceitar e recusar convite via socket.io para comunicação em…

… tempo real, aula 5 - oministack 9.0

package.json

@@ -7,7 +7,8 @@
     "react": "^16.10.1",
     "react-dom": "^16.10.1",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.1.2"
+    "react-scripts": "3.1.2",
+    "socket.io-client": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/pages/Dashboard/index.js

@@ -1,9 +1,22 @@
-import React, { useEffect, useState } from 'react';
-import {Link} from 'react-router-dom';
+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 user_id = localStorage.getItem('user');
+        const socket = useMemo(()=>socketio('http://192.168.2.249:3333', {
+            query: { user_id },
+        }),[user_id]);
+    useEffect(() => {
+
+        socket.on('booking_request', data => {
+            setRequests([...requests, data])
+        });
+
+    }, [requests,socket]);
 
     useEffect(() => {
         async function loadSpots() {
@@ -12,19 +25,43 @@ export default function Dashboard() {
                 headers: { user_id }
             });
             setSpots(response.data);
-            console.log(response.data);
+
 
         }
         loadSpots();
     }, [])
+    async function handleAceppt(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 (
         <>
+            <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 data:<strong> {request.date}</strong>
+                            </p>
+                            <button className="accept" onClick={()=>handleAceppt(request._id)}>ACEITAR</button>
+                            <button className="decline" onClick={()=>handleReject(request._id)}>REJEITAR</button>
+                        </li>
+                    ))
+                }
+            </ul>
             <ul className="spot-list">
                 {spots.map((spots) => (
                     <li key={spots._id}>
-                        <header style={{backgroundImage: `url(${spots.thumbnail_url})`}}/>
+                        <header style={{ backgroundImage: `url(${spots.thumbnail_url})` }} />
                         <strong>{spots.company}</strong>
-                        <span>{spots.price ? `R$${spots.price}/dia`: 'Gratuito'}</span>
+                        <span>{spots.price ? `R$${spots.price}/dia` : 'Gratuito'}</span>
                     </li>
                 ))}
             </ul>

src/pages/Dashboard/styles.css

@@ -25,4 +25,28 @@ color: #444;
 ul.spot-list li span{
     font-size: 15px;
     color: #999;
-}
+}
+ul.notifications{
+    list-style: none;
+    margin-bottom: 15px;
+}
+ul.notifications li{
+    font-size: 16px;
+    line-height: 24px;
+}
+ul.notifications li button {
+ margin-right: 10px;
+ border:0;
+ font-weight: bold;
+ margin-top: 10px;
+ background: #fff;
+ cursor: pointer;
+}
+ul.notifications li button.accept {
+   color: #84C870;
+   }
+
+   ul.notifications li button.decline {
+    color: #c00;
+    }
+