text: (window.webpackJsonpproject_chat_application=window.webpackJsonpproject_chat_application||[]).push([[0],{104:function(e,a){},107:function(e,a,t){},143:function(e,a,t){},144:function(e,a,t){},145:function(e,a,t){},146:function(e,a,t){},147:function(e,a,t){},148:function(e,a,t){},151:function(e,a,t){"use strict";t.r(a);var n,c=t(0),r=t.n(c),l=t(54),s=t.n(l),o=t(61),m=t(5),i=t(55),u=t.n(i),A=t(56),E=t.n(A),p=t(16),g=t.n(p),f=(t(107),function(e){var a=e.users;return r.a.createElement("div",{className:"textContainer"},r.a.createElement("div",null,r.a.createElement("h1",null,"Realtime Chat Application ",r.a.createElement("span",{role:"img","aria-label":"emoji"},"\ud83d\udcac")),r.a.createElement("h2",null,"Created with React, Express, Node and Socket.IO ",r.a.createElement("span",{role:"img","aria-label":"emoji"},"\u2764\ufe0f")),r.a.createElement("h2",null,"Try it out right now! ",r.a.createElement("span",{role:"img","aria-label":"emoji"},"\u2b05\ufe0f"))),a?r.a.createElement("div",null,r.a.createElement("h1",null,"People currently chatting:"),r.a.createElement("div",{className:"activeContainer"},r.a.createElement("h2",null,a.map(function(e){var a=e.name;return r.a.createElement("div",{key:a,className:"activeItem"},a,r.a.createElement("img",{alt:"Online Icon",src:g.a}))})))):null)}),d=t(57),h=t.n(d),v=(t(143),t(30)),N=t.n(v),j=function(e){var a=e.message,t=a.text,n=a.user,c=!1,l=e.name.trim().toLowerCase();return n===l&&(c=!0),c?r.a.createElement("div",{className:"messageContainer justifyEnd"},r.a.createElement("p",{className:"sentText pr-10"},l),r.a.createElement("div",{className:"messageBox backgroundBlue"},r.a.createElement("p",{className:"messageText colorWhite"},N.a.emojify(t)))):r.a.createElement("div",{className:"messageContainer justifyStart"},r.a.createElement("div",{className:"messageBox backgroundLight"},r.a.createElement("p",{className:"messageText colorDark"},N.a.emojify(t))),r.a.createElement("p",{className:"sentText pl-10 "},n))},b=(t(144),function(e){var a=e.messages,t=e.name;return r.a.createElement(h.a,{className:"messages"},a.map(function(e,a){return r.a.createElement("div",{key:a},r.a.createElement(j,{message:e,name:t}))}))}),C=t(58),O=t.n(C),I=(t(145),function(e){var a=e.room;return r.a.createElement("div",{className:"infoBar"},r.a.createElement("div",{className:"leftInnerContainer"},r.a.createElement("img",{className:"onlineIcon",src:g.a,alt:"online icon"}),r.a.createElement("h3",null,a)),r.a.createElement("div",{className:"rightInnerContainer"},r.a.createElement("a",{href:"/"},r.a.createElement("img",{src:O.a,alt:"close icon"}))))}),S=(t(146),function(e){var a=e.setMessage,t=e.sendMessage,n=e.message;return r.a.createElement("form",{className:"form"},r.a.createElement("input",{className:"input",type:"text",placeholder:"Type a message...",value:n,onChange:function(e){var t=e.target.value;return a(t)},onKeyPress:function(e){return"Enter"===e.key?t(e):null}}),r.a.createElement("button",{className:"sendButton",onClick:function(e){return t(e)}},"Send"))}),x=(t(147),"https://project-chat-application.herokuapp.com/"),y=function(e){var a=e.location,t=Object(c.useState)(""),l=Object(m.a)(t,2),s=l[0],i=l[1],A=Object(c.useState)(""),p=Object(m.a)(A,2),g=p[0],d=p[1],h=Object(c.useState)(""),v=Object(m.a)(h,2),N=v[0],j=v[1],C=Object(c.useState)(""),O=Object(m.a)(C,2),y=O[0],w=O[1],R=Object(c.useState)([]),k=Object(m.a)(R,2),B=k[0],M=k[1];Object(c.useEffect)(function(){var e=u.a.parse(a.search),t=e.name,c=e.room;n=E()(x),d(c),i(t),n.emit("join",{name:t,room:c},function(e){e&&alert(e)})},[x,a.search]),Object(c.useEffect)(function(){n.on("message",function(e){M(function(a){return[].concat(Object(o.a)(a),[e])})}),n.on("roomData",function(e){var a=e.users;j(a)})},[]);return r.a.createElement("div",{className:"outerContainer"},r.a.createElement("div",{className:"container"},r.a.createElement(I,{room:g}),r.a.createElement(b,{messages:B,name:s}),r.a.createElement(S,{message:y,setMessage:w,sendMessage:function(e){e.preventDefault(),y&&n.emit("sendMessage",y,function(){return w("")})}})),r.a.createElement(f,{users:N}))},w=t(17);t(148);function R(){var e=Object(c.useState)(""),a=Object(m.a)(e,2),t=a[0],n=a[1],l=Object(c.useState)(""),s=Object(m.a)(l,2),o=s[0],i=s[1];return r.a.createElement("div",{className:"joinOuterContainer"},r.a.createElement("div",{className:"joinInnerContainer"},r.a.createElement("h1",{className:"heading"},"Join"),r.a.createElement("div",null,r.a.createElement("input",{placeholder:"Name",className:"joinInput",type:"text",onChange:function(e){return n(e.target.value)}})),r.a.createElement("div",null,r.a.createElement("input",{placeholder:"Room",className:"joinInput mt-20",type:"text",onChange:function(e){return i(e.target.value)}})),r.a.createElement(w.b,{onClick:function(e){return t&&o?null:e.preventDefault()},to:"/chat?name=".concat(t,"&room=").concat(o)},r.a.createElement("button",{className:"button mt-20",type:"submit"},"Sign In"))))}var k=t(6),B=function(){return r.a.createElement(w.a,null,r.a.createElement(k.a,{path:"/",exact:!0,component:R}),r.a.createElement(k.a,{path:"/chat",component:y}))};s.a.render(r.a.createElement(B,null),document.getElementById("root"))},16:function(e,a){e.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAAExJREFUCB1jbPh/le3lx5tNDIwMcQwg8J9hkTi/eh0LWJCBoRwoAAPlQDEGJrhKmDCIBupmQuYjs5lAZiILgNlAMRaQRSAz4UZCLQcAIwYaiAejKoYAAAAASUVORK5CYII="},58:function(e,a){e.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAHBJREFUGBmNkAEKwCAMA2VfGP2mrx3sOV2us6IymIXQGlNTW9zdhCqcZQm4dmelFUp+CZZa6sYpeUVIFyIixMqjCO51Wy5unQExuYSbSF5JASLqPsqRM21lOoWc89tagr3PSMgOiWlwnUeXWA/E78IfuAX270S3ydAAAAAASUVORK5CYII="},62:function(e,a,t){e.exports=t(151)}},[[62,1,2]]]);
  //# sourceMappingURL=main.eac5e68b.chunk.js.map