https://slack-clone-by-tunde.firebaseapp.com/static/js/main.56dba49b.chunk.js

1(this["webpackJsonpslack-clone"]=this["webpackJsonpslack-clone"]||[]).push([[0],{123:function(t,n,e){"use strict";e.r(n);var o,c,i,a,r,s=e(2),l=e.n(s),d=e(32),j=e.n(d),b=(e(91),e(6)),p=e(21),x=(e(92),e(83)),h=e(12),g=e(7),u=e(140),m=e(57),O=e.n(m),f=e(61),v=e.n(f),w=e(62),y=e.n(w),I=e(33),k=e(38),S=k.a.initializeApp({apiKey:"AIzaSyD2-T4nTQLx_Mi_ukbusrDswpdtzcnLdXw",authDomain:"slack-clone-by-tunde.firebaseapp.com",projectId:"slack-clone-by-tunde",storageBucket:"slack-clone-by-tunde.appspot.com",messagingSenderId:"542260434076",appId:"1:542260434076:web:8423c93d375c8ce123c959",measurementId:"G-QJ8VDCX2LK"}).firestore(),z=k.a.auth(),C=new k.a.auth.GoogleAuthProvider,D=e(3);var M,R,N=function(){var t=Object(I.a)(z),n=Object(p.a)(t,1)[0];return Object(D.jsxs)(L,{children:[Object(D.jsxs)(T,{children:[Object(D.jsx)(F,{src:null===n||void 0===n?void 0:n.photoURL,alt:null===n||void 0===n?void 0:n.displayName}),Object(D.jsx)(O.a,{})]}),Object(D.jsxs)(A,{children:[Object(D.jsx)(v.a,{}),Object(D.jsx)("input",{type:"text",placeholder:"Search..."})]}),Object(D.jsx)(B,{children:Object(D.jsx)(y.a,{})})]})},A=g.a.div(o||(o=Object(b.a)(["\n\tflex: 0.4;\n\topacity: 1;\n\tborder-radius: 6px;\n\tbackground-color: #421f44;\n\ttext-align: center;\n\tdisplay: flex;\n\tpadding: 0 50px;\n\tcolor: gray;\n\tborder: 1px gray solid;\n\talign-items: center;\n\n\t> input {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\ttext-align: center;\n\t\tmin-width: 30vw;\n\t\toutline: 0;\n\t\talign-items: center;\n\t}\n"]))),L=g.a.div(c||(c=Object(b.a)(["\n\tdisplay: flex;\n\tposition: fixed;\n\twidth: 100%;\n\tjustify-content: space-between;\n\tpadding: 10px 0;\n\tbackground-color: var(--slack-color);\n\tcolor: white;\n"]))),T=g.a.div(i||(i=Object(b.a)(["\n\tflex: 0.3;\n\tdisplay: flex;\n\talign-items: center;\n\tmargin-left: 20px;\n\t> .MuiSvgIcon-root {\n\t\tmargin-left: auto;\n\t\tmargin-right: 30px;\n\t}\n"]))),B=g.a.div(a||(a=Object(b.a)(["\n\tflex: 0.3;\n\tdisplay: flex;\n\talign-items: center;\n\n\t> .MuiSvgIcon-root {\n\t\tmargin-left: auto;\n\t\tmargin-right: 20px;\n\t}\n"]))),F=Object(g.a)(u.a)(r||(r=Object(b.a)(["\n\tcursor: pointer;\n\t:hover {\n\t\topacity: 0.8;\n\t}\n"]))),P=e(68),V=e.n(P),E=e(69),G=e.n(E),J=e(36),U=e(49),W=Object(U.b)({name:"app",initialState:{roomId:null},reducers:{enterRoom:function(t,n){t.roomId=n.payload.roomId}}}),_=W.actions.enterRoom,K=function(t){return t.app.roomId},Q=W.reducer;var X,$,q,H=function(t){var n=t.Icon,e=t.title,o=t.addChannelOption,c=t.id,i=Object(J.b)();return Object(D.jsxs)(Y,{onClick:o?function(){var t=prompt("Please enter channel name");t&&S.collection("rooms").add({name:t})}:function(){c&&i(_({roomId:c}))},children:[n&&Object(D.jsx)(n,{fontSize:"small",style:{padding:10}}),n?Object(D.jsx)("h3",{children:e}):Object(D.jsxs)(Z,{children:[Object(D.jsx)("span",{children:"#"}),e]})]})},Y=g.a.div(M||(M=Object(b.a)(["\n\tdisplay: flex;\n\tfont-size: 12px;\n\talign-items: center;\n\tpadding-left: 2px;\n\tcursor: pointer;\n\n\t:hover {\n\t\topacity: 0.9;\n\t\tbackground-color: #340e36;\n\t}\n\t> h3 {\n\t\tfont-weight: 500;\n\t}\n\t> h3 > span {\n\t\tpadding: 15px;\n\t}\n"]))),Z=g.a.h3(R||(R=Object(b.a)(["\n\tpadding: 10px 0;\n\tfont-weight: 300;\n"]))),tt=e(71),nt=e.n(tt),et=e(70),ot=e.n(et),ct=e(72),it=e.n(ct),at=e(73),rt=e.n(at),st=e(74),lt=e.n(st),dt=e(75),jt=e.n(dt),bt=e(76),pt=e.n(bt),xt=e(77),ht=e.n(xt),gt=e(78),ut=e.n(gt),mt=e(79),Ot=e.n(mt),ft=e(44);var vt,wt=function(){var t=Object(ft.a)(S.collection("rooms")),n=Object(p.a)(t,2),e=n[0],o=(n[1],Object(I.a)(z)),c=Object(p.a)(o,1)[0];return console.log(c),Object(D.jsxs)(yt,{children:[Object(D.jsxs)(It,{children:[Object(D.jsxs)(kt,{children:[Object(D.jsx)("h2",{children:c.displayName}),Object(D.jsxs)("h3",{children:[Object(D.jsx)(V.a,{}),c.email]})]}),Object(D.jsx)(G.a,{onClick:function(){return z.signOut()}})]}),Object(D.jsx)(H,{Icon:ot.a,title:"Threads"}),Object(D.jsx)(H,{Icon:nt.a,title:"Mentions & reactions"}),Object(D.jsx)(H,{Icon:it.a,title:"Saved items"}),Object(D.jsx)(H,{Icon:rt.a,title:"Channel browser"}),Object(D.jsx)(H,{Icon:lt.a,title:"People & user groups"}

1),Object(D.jsx)(H,{Icon:jt.a,title:"Apps"}),Object(D.jsx)(H,{Icon:pt.a,title:"File browser"}),Object(D.jsx)(H,{Icon:ht.a,title:"Show Less"}),Object(D.jsx)("hr",{}),Object(D.jsx)(H,{Icon:ut.a,title:"Channels"}),Object(D.jsx)("hr",{}),Object(D.jsx)(H,{Icon:Ot.a,title:"Add Channel",addChannelOption:!0}),null===e||void 0===e?void 0:e.docs.map((function(t){return Object(D.jsx)(H,{title:t.data().name,id:t.id},t.id)}))]})},yt=g.a.div(X||(X=Object(b.a)(["\n\tbackground-color: var(--slack-color);\n\tflex: 0.3;\n\tborder-top: 1px solid #49274b;\n\tmax-width: 260px;\n\tmargin-top: 60px;\n\tcolor: white;\n\toverflow: scroll;\n\tscrollbar-color: red;\n\t::-webkit-scrollbar {\n\t\twidth: 10px;\n\t\tscrollbar-color: whitesmoke;\n\t\tz-index: 2;\n\t}\n\n\t> hr {\n\t\tmargin-top: 10px;\n\t\tmargin-bottom: 10px;\n\t\tborder: 1px solid #49174b;\n\t}\n"]))),It=g.a.div($||($=Object(b.a)(["\n\tdisplay: flex;\n\tborder-bottom: 1px solid #49274b;\n\tpadding: 13px;\n\t> .MuiSvgIcon-root {\n\t\tpadding: 8px;\n\t\tcolor: #49274b;\n\t\tfont-size: 18px;\n\t\tbackground-color: white;\n\t\tborder-radius: 999px;\n\t\tcursor: pointer;\n\t\t:hover {\n\t\t\tbackground-color: #49274b;\n\t\t\tcolor: white;\n\t\t}\n\t}\n"]))),kt=g.a.div(q||(q=Object(b.a)(["\n\tflex: 1;\n\t> h2 {\n\t\tfont-size: 15px;\n\t\tfont-weight: 900;\n\t\tmargin-bottom: 5px;\n\t}\n\t> h3 {\n\t\tdisplay: flex;\n\t\tfont-size: 13px;\n\t\tfont-weight: 400;\n\t\talign-items: center;\n\t}\n\t> h3 > .MuiSvgIcon-root {\n\t\tfont-size: 14px;

1\n\t\tmargin-top: 1px;\n\t\tmargin-right: 2px;\n\t\tcolor: green;\n\t}\n"]))),St=e(80),zt=e.n(St),Ct=e(81),Dt=e.n(Ct),Mt=e(139);var Rt,Nt,At=function(t){var n=t.channelId,e=t.channelName,o=t.chatRef,c=Object(s.useState)(""),i=Object(p.a)(c,2),a=i[0],r=i[1],l=Object(I.a)(z),d=Object(p.a)(l,1)[0];return Object(D.jsx)(Lt,{children:Object(D.jsxs)("form",{children:[Object(D.jsx)("input",{value:a,onChange:function(t){return r(t.target.value)},placeholder:"Message ".concat(e)}),Object(D.jsx)(Mt.a,{type:"submit",onClick:function(t){if(t.preventDefault(),console.log(n),!n)return!1;S.collection("rooms").doc(n).collection("messages").add({message:a,timestamp:k.a.firestore.FieldValue.serverTimestamp(),user:d.displayName,userImage:d.photoURL}),o.current.scrollIntoView({behavior:"smooth"}),r("")},hidden:!0,children:"SEND"})]})})},Lt=g.a.div(vt||(vt=Object(b.a)(["\n\tborder-radius: 20px;\n\t> form {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t}\n\t> form > input {\n\t\tposition: fixed;\n\t\tbottom: 30px;\n\t\twidth: 60%;\n\t\tborder: 1px solid gray;\n\t\tborder-radius: 3px;\n\t\tpadding: 20px;\n\t\toutline: none;\n\t}\n\t> form > button {\n\t\tdisplay: none;\n\t}\n"])));var Tt,Bt,Ft,Pt,Vt,Et,Gt=function(t){var n=t.message,e=t.timestamp,o=t.user,c=t.userImage;return Object(D.jsxs)(Jt,{children:[Object(D.jsx)("img",{src:c,alt:""}),Object(D.jsxs)(Ut,{children:[Object(D.jsxs)("h4",{children:[o," ",Object(D.jsx)("span",{children:new Date(null===e||void 0===e?void 0:e.toDate()).toUTCString()})]}),Object(D.jsx)("p",{children:n})]})]})},Jt=g.a.div(Rt||(Rt=Object(b.a)(["\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 20px;\n\t> img {\n\t\theight: 50px;\n\t\tborder-radius: 8px;\n\t}\n"]))),Ut=g.a.div(Nt||(Nt=Object(b.a)(["\n\tpadding-left: 10px;\n\t> h4 > span {\n\t\tcolor: gray;\n\t\tfont-weight: 300;\n\t\tmargin-left: 4px;\n\t\tfont-size: 10px;\n\t}\n"])));var Wt,_t,Kt=function(){var t=Object(s.useRef)(),n=Object(J.c)(K),e=Object(ft.b)(n&&S.collection("rooms").doc(n)),o=Object(p.a)(e,1)[0],c=Object(ft.a)(n&&S.collection("rooms").doc(n).collection("messages").orderBy("timestamp","asc")),i=Object(p.a)(c,2),a=i[0],r=i[1];return Object(s.useEffect)((function(){var n;null===t||void 0===t||null===(n=t.current)||void 0===n||n.scrollIntoView({behavior:"smooth"})}),[n,r]),Object(D.jsx)(Xt,{children:o&&a&&Object(D.jsxs)(D.Fragment,{children:[Object(D.jsxs)($t,{children:[Object(D.jsxs)(qt,{children:[Object(D.jsx)("h4",{children:Object(D.jsx)("strong",{children:null===o||void 0===o?void 0:o.data().name})}),Object(D.jsx)(zt.a,{})]}),Object(D.jsx)(Ht,{children:Object(D.jsxs)("p",{children:[Object(D.jsx)(Dt.a,{}),"Details"]})})]}),Object(D.jsxs)(Yt,{children:[null===a||void 0===a?void 0:a.docs.map((function(t){var n=t.data(),e=n.message,o=n.timestamp,c=n.user,i=n.userImage;return Object(D.jsx)(Gt,{message:e,timestamp:o,user:c,userImage:i},t.id)})),Object(D.jsx)(Qt,{ref:t})]}),Object(D.jsx)(At,{chatRef:t,channelId:n,channelName:null===o||void 0===o?void 0:o.data().name})]})})},Qt=g.a.div(Tt||(Tt=Object(b.a)(["\n\tpadding-bottom: 200px;\n"]))),Xt=g.a.div(Bt||(Bt=Object(b.a)(["\n\tflex: 0.7;\n\tflex-grow: 1;\n\toverflow-y: scroll;\n\tmargin-top: 60px;\n"]))),$t=g.a.div(Ft||(Ft=Object(b.a)(["\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tpadding: 20px;\n\tborder-bottom: 1px solid lightgray;\n"]))),qt=g.a.div(Pt||(Pt=Object(b.a)(["\n\tdisplay: flex;\n\talign-items: center;\n\t> h4 {\n\t\tdisplay: flex;\n\t\ttext-transform: lowercase;\n\t\tmargin-right: 10px;\n\t}\n\t> h4 > .MuiSvgIcon-root {\n\t\tmargin-left: 20px;\n\t\tfont-size: 18px;\n\t}\n"]))),Ht=g.a.div(Vt||(Vt=Object(b.a)(["\n\t> p {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tfont-size: 14px;\n\t}\n\t> p > .MuiSvgIcon-root {\n\t\tmargin-right: 5px;\n\t\tfont-size: 16px;\n\t}\n"]))),Yt=g.a.div(Et||(Et=Object(b.a)([""])));var Zt,tn,nn,en=function(){return Object(D.jsx)(on,{children:Object(D.jsxs)(cn,{children:[Object(D.jsx)("img",{src:"https://a.slack-edge.com/bv1-9/slack_logo-ebd02d1.svg",alt:""}),Object(D.jsx)("h1",{children:"Sign-in to Tunde's Slack"}),Object(D.jsx)("p",{children:"Build using React, Redux, Firestore, Styled Components"}),Object(D.jsx)(Mt.a,{type:"submit",onClick:function(t){t.preventDefault(),z.signInWithPopup(C).catch((function(t){return alert(t.message)}))},children:"Sign in with Google"})]})})},on=g.a.div(Wt||(Wt=Object(b.a)(["\n\tbackground-color: #f8f8f8;\n\theight: 100vh;\n\tdisplay: grid;\n\tplace-items: center;

1\n"]))),cn=g.a.div(_t||(_t=Object(b.a)(["\n\tpadding: 100px;\n\ttext-align: center;\n\tbackground-color: white;\n\tborder-radius: 10px;\n\tbox-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n\t> img {\n\t\tobject-fit: contain;\n\t\theight: 100px;\n\t\tmargin-bottom: 40px;\n\t}\n\t> button {\n\t\tmargin-top: 50px;\n\t\ttext-transform: inherit !important;\n\t\tbackground-color: #0a8d48 !important;\n\t\tcolor: white;\n\t}\n"]))),an=e(82),rn=e.n(an);var sn=function(){var t=Object(I.a)(z),n=Object(p.a)(t,2),e=n[0];return n[1]?Object(D.jsx)(dn,{children:Object(D.jsxs)(jn,{children:[Object(D.jsx)("img",{src:"https://cdn.worldvectorlogo.com/logos/slack-new-logo.svg",alt:""}),Object(D.jsx)(rn.a,{name:"ball-spin-fade-loader",color:"purple",fadeIn:"none"})]})}):Object(D.jsx)("div",{className:"App",children:Object(D.jsx)(x.a,{children:e?Object(D.jsxs)(D.Fragment,{children:[Object(D.jsx)(N,{user:e}),Object(D.jsxs)(ln,{children:[Object(D.jsx)(wt,{}),Object(D.jsx)(h.c,{children:Object(D.jsx)(h.a,{path:"/",exact:!0,children:Object(D.jsx)(Kt,{})})})]})]}):Object(D.jsx)(en,{})})})},ln=g.a.div(Zt||(Zt=Object(b.a)(["\n\tdisplay: flex;\n\theight: 100vh;\n"]))),dn=g.a.div(tn||(tn=Object(b.a)(["\n\tdisplay: grid;\n\tplace-items: center;\n\theight: 100vh;\n\twidth: 100%;\n"]))),jn=g.a.div(nn||(nn=Object(b.a)(["\n\ttext-align: 100px;\n\tpadding-bottom: 100px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\t> img {\n\t\theight: 100px;\n\t\tpadding: 100vh;\n\t\tmargin-bottom: 40px;\n\t}\n"]))),bn=Object(U.a)({reducer:{app:Q}});Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));j.a.render(Object(D.jsx)(l.a.StrictMode,{children:Object(D.jsx)(J.a,{store:bn,children:Object(D.jsx)(sn,{})})}),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(t){t.unregister()}))},91:function(t,n,e){},92:function(t,n,e){}},[[123,1,2]]]);
2//# sourceMappingURL=main.56dba49b.chunk.js.map