text: import React from 'react'
  import {useState, useEffect} from 'react'
  import queryString from 'query-string'
  import io from 'socket.io-client'
  import './Chat.css'
  
  import InfoBar from '../components/chatComponents/Infobar'
  import Messages from '../components/chatComponents/Messages/Messages'
  import Input from '../components/chatComponents/Input'
  import TextContainer from '../components/chatComponents/TextContainer'
  
  let socket 
  const ENDPOINT = 'http://localhost:5000'
  
  const Chat = ({ location }) => {
      const [name, setName] = useState('');
      const [room, setRoom] = useState('');
      const [users, setUsers] = useState('');
      const [message, setMessage] = useState('');
      const [messages, setMessages] = useState([]);
    
      useEffect(() => {
        const { name, room } = queryString.parse(location.search);
    
        socket = io(ENDPOINT);
    
        setRoom(room);
        setName(name)
    
        socket.emit('join', { name, room }, (error) => {
          if(error) {
            alert(error);
          }
        });
      }, [ENDPOINT, location.search]);
      
      useEffect(() => {
        socket.on('message', message => {
          setMessages(messages => [ ...messages, message ]);
        });
        
        socket.on("roomData", ({ users }) => {
          setUsers(users);
        });
    }, []);
    
      const sendMessage = (event) => {
        event.preventDefault();
    
        if(message) {
          socket.emit('sendMessage', message, () => setMessage(''));
        }
      }
    
      return (
        <div className="outerContainer">
          <div className="container">
              <InfoBar room={room} />
              <Messages messages={messages} name={name} />
              <Input message={message} setMessage={setMessage} sendMessage={sendMessage} />
          </div>
          <TextContainer users={users}/>
        </div>
      );
    }
    
    export default Chat;
  