{"version":3,"sources":["components/Chat/Chat.js","components/TextContainer/TextContainer.js","components/Messages/Message/Message.js","components/Messages/Messages.js","components/InfoBar/InfoBar.js","components/Input/Input.js","components/Join/Join.js","App.js","index.js","icons/onlineIcon.png","icons/closeIcon.png"],"names":["socket","TextContainer","users","className","map","name","key","charAt","toUpperCase","slice","alt","src","onlineIcon","Message","message","text","user","isSentByCurrentUser","trimmedName","trim","toLowerCase","ReactEmoji","emojify","Messages","messages","i","InfoBar","room","href","closeIcon","Input","setMessage","sendMessage","type","placeholder","value","onChange","target","onKeyPress","event","onClick","e","ENDPOINT","Chat","location","useState","setName","setRoom","setUsers","setMessages","useEffect","queryString","parse","search","io","emit","error","alert","on","preventDefault","SignIn","to","App","path","exact","component","Join","ReactDOM","render","document","getElementById","module","exports"],"mappings":"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","file":"static/js/main.85cb80d7.chunk.js","sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport queryString from 'query-string';\nimport io from \"socket.io-client\";\n\nimport TextContainer from '../TextContainer/TextContainer';\nimport Messages from '../Messages/Messages';\nimport InfoBar from '../InfoBar/InfoBar';\nimport Input from '../Input/Input';\n\nimport './Chat.css';\n\nconst ENDPOINT = 'https://react-chat-application-akash.herokuapp.com/';\n\nlet socket;\n\nconst Chat = ({ location }) => {\n  const [name, setName] = useState('');\n  const [room, setRoom] = useState('');\n  const [users, setUsers] = useState('');\n  const [message, setMessage] = useState('');\n  const [messages, setMessages] = useState([]);\n\n  useEffect(() => {\n    const { name, room } = queryString.parse(location.search);\n    \n    socket = io(ENDPOINT);\n\n    setRoom(room);\n    setName(name)\n\n    socket.emit('join', { name, room }, (error) => {\n      if(error) {\n        alert(error);\n      }\n    });\n  }, [ENDPOINT, location.search]);\n  \n  useEffect(() => {\n    socket.on('message', message => {\n      setMessages(messages => [ ...messages, message ]);\n    });\n    \n    socket.on(\"roomData\", ({ users }) => {\n      setUsers(users);\n    });\n}, []);\n\n  const sendMessage = (event) => {\n    event.preventDefault();\n\n    if(message) {\n      socket.emit('sendMessage', message, () => setMessage(''));\n    }\n  }\n\n  return (\n    <div className=\"outerContainer\">\n      <div className=\"container\">\n          <InfoBar room={room} />\n          <Messages messages={messages} name={name} />\n          <Input message={message} setMessage={setMessage} sendMessage={sendMessage} />\n      </div>\n      <TextContainer users={users}/>\n    </div>\n  );\n}\n\nexport default Chat;\n","import React from 'react';\n\nimport onlineIcon from '../../icons/onlineIcon.png';\n\nimport './TextContainer.css';\n\nconst TextContainer = ({ users }) => (\n  <div className=\"textContainer\">\n    <div>\n      <h1>Realtime Chat Application</h1>\n    </div>\n    {\n      users\n        ? (\n          <div>\n            <h1>People currently chatting:</h1>\n            <div className=\"activeContainer\">\n              <h2>\n                {users.map(({name}) => (\n                  <div key={name} className=\"activeItem\">\n                    {\n                      name.charAt(0).toUpperCase() + name.slice(1)\n                      }\n                    <img alt=\"Online Icon\" src={onlineIcon}/>\n                  </div>\n                ))}\n              </h2>\n            </div>\n          </div>\n        )\n        : null\n    }\n  </div>\n);\n\nexport default TextContainer;","import React from 'react';\n\nimport './Message.css';\n\nimport ReactEmoji from 'react-emoji';\n\nconst Message = ({ message: { text, user }, name }) => {\n  let isSentByCurrentUser = false;\n\n  const trimmedName = name.trim().toLowerCase();\n\n  if(user === trimmedName) {\n    isSentByCurrentUser = true;\n  }\n\n  return (\n    isSentByCurrentUser\n      ? (\n        <div className=\"messageContainer justifyEnd\">\n          <p className=\"sentText pr-10\">{trimmedName}</p>\n          <div className=\"messageBox backgroundPurple\">\n            <p className=\"messageText colorWhite\">{ReactEmoji.emojify(text)}</p>\n          </div>\n        </div>\n        )\n        : (\n          <div className=\"messageContainer justifyStart\">\n            <div className=\"messageBox backgroundLight\">\n              <p className=\"messageText colorDark\">{ReactEmoji.emojify(text)}</p>\n            </div>\n            <p className=\"sentText pl-10 \">{user}</p>\n          </div>\n        )\n  );\n}\n\nexport default Message;","import React from 'react';\n\nimport ScrollToBottom from 'react-scroll-to-bottom';\n\nimport Message from './Message/Message';\n\nimport './Messages.css';\n\nconst Messages = ({ messages, name }) => (\n  <ScrollToBottom className=\"messages\">\n    {messages.map((message, i) => <div key={i}><Message message={message} name={name}/></div>)}\n  </ScrollToBottom>\n);\n\nexport default Messages;","import React from 'react';\n\nimport onlineIcon from '../../icons/onlineIcon.png';\nimport closeIcon from '../../icons/closeIcon.png';\n\nimport './InfoBar.css';\n\nconst InfoBar = ({ room }) => (\n  <div className=\"infoBar\">\n    <div className=\"leftInnerContainer\">\n      <img className=\"onlineIcon\" src={onlineIcon} alt=\"online icon\" />\n      <h3>{room}</h3>\n    </div>\n    <div className=\"rightInnerContainer\">\n      <a href=\"/\"><img src={closeIcon} alt=\"close icon\" /></a>\n    </div>\n  </div>\n);\n\nexport default InfoBar;","import React from 'react';\n\nimport './Input.css';\n\nconst Input = ({ setMessage, sendMessage, message }) => (\n  <form className=\"form\">\n    <input\n      className=\"input\"\n      type=\"text\"\n      placeholder=\"Type a message...\"\n      value={message}\n      onChange={({ target: { value } }) => setMessage(value)}\n      onKeyPress={event => event.key === 'Enter' ? sendMessage(event) : null}\n    />\n    <button className=\"sendButton\" onClick={e => sendMessage(e)}>Send</button>\n  </form>\n)\n\nexport default Input;","import React, { useState } from 'react';\nimport { Link } from \"react-router-dom\";\n\nimport './Join.css';\n\nexport default function SignIn() {\n  const [name, setName] = useState('');\n  const [room, setRoom] = useState('');\n\n  return (\n    <div className=\"joinOuterContainer\">\n      <div className=\"joinInnerContainer\">\n        <h1 className=\"heading\">Join</h1>\n        <div>\n          <input placeholder=\"Name\" className=\"joinInput\" type=\"text\" onChange={(event) => setName(event.target.value)} />\n        </div>\n        <div>\n          <input placeholder=\"Room\" className=\"joinInput mt-20\" type=\"text\" onChange={(event) => setRoom(event.target.value)} />\n        </div>\n        <Link onClick={e => (!name || !room) ? e.preventDefault() : null} to={`/chat?name=${name}&room=${room}`}>\n          <button className={'button mt-20'} type=\"submit\">Sign In</button>\n        </Link>\n      </div>\n    </div>\n  );\n}\n","import React from 'react';\n\nimport Chat from './components/Chat/Chat';\nimport Join from './components/Join/Join';\n\nimport { BrowserRouter as Router, Route } from \"react-router-dom\";\n\nconst App = () => {\n  return (\n    <Router>\n      <Route path=\"/\" exact component={Join} />\n      <Route path=\"/chat\" component={Chat} />\n    </Router>\n  );\n}\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport App from './App';\n\nReactDOM.render(<App />, document.getElementById('root'));","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAAExJREFUCB1jbPh/le3lx5tNDIwMcQwg8J9hkTi/eh0LWJCBoRwoAAPlQDEGJrhKmDCIBupmQuYjs5lAZiILgNlAMRaQRSAz4UZCLQcAIwYaiAejKoYAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAHBJREFUGBmNkAEKwCAMA2VfGP2mrx3sOV2us6IymIXQGlNTW9zdhCqcZQm4dmelFUp+CZZa6sYpeUVIFyIixMqjCO51Wy5unQExuYSbSF5JASLqPsqRM21lOoWc89tagr3PSMgOiWlwnUeXWA/E78IfuAX270S3ydAAAAAASUVORK5CYII=\""],"sourceRoot":""}