{"version":3,"sources":["components/Signout.js","components/Header.js","components/Signin.js","components/ChatMessage.js","components/ChatRoom.js","App.js","index.js"],"names":["Signout","auth","firebase","currentUser","className","onClick","signOut","Header","href","target","rel","size","icon","faGithub","Signin","src","alt","provider","GoogleAuthProvider","signInWithPopup","ChatMessage","props","message","text","uid","photoURL","neighbour","next","prev","withAvatar","addDistance","messageClass","ChatRoom","firestore","dummy","useRef","messagesRef","collection","query","orderBy","useCollectionData","idField","messages","useState","formValue","setFormValue","scrollToBottom","current","scrollIntoView","behavior","useEffect","sendMessage","e","a","preventDefault","add","createdAt","FieldValue","serverTimestamp","map","msg","index","pool","id","ref","onSubmit","value","onChange","placeholder","type","disabled","faPaperPlane","initializeApp","apiKey","process","authDomain","projectId","storageBucket","messagingSenderId","appId","measurementId","App","useAuthState","user","ReactDOM","render","document","getElementById"],"mappings":"6OAaeA,MARf,WAEI,IAAMC,EAAOC,IAASD,OACtB,OAAOA,EAAKE,aACR,wBAAQC,UAAU,WAAWC,QAAS,kBAAMJ,EAAKK,WAAjD,uBCmBOC,MAnBf,WACE,OACE,mCACE,mBAAGC,KAAK,kCAAR,SACE,gDAEF,mBACEA,KAAK,+CACLJ,UAAU,UACVK,OAAO,SACPC,IAAI,aAJN,SAME,cAAC,IAAD,CAAiBC,KAAK,KAAKC,KAAMC,QAEnC,cAAC,EAAD,QCCSC,MAnBf,WAEI,IAIMb,EAAOC,IAASD,OAEtB,OACI,qCACI,qBAAKG,UAAU,gBAAgBW,IAAI,gBAAgBC,IAAI,KACvD,yBAAQZ,UAAU,iBAAiBC,QATlB,WACrB,IAAMY,EAAW,IAAIf,IAASD,KAAKiB,mBACnCjB,EAAKkB,gBAAgBF,IAOjB,UACI,qBAAKb,UAAU,iBAAiBW,IAAI,4DAA4DC,IAAI,KADxG,6B,yCCQGI,MAnBf,SAAqBC,GAEjB,IAAMpB,EAAOC,IAASD,OACtB,EAAgCoB,EAAMC,QAA9BC,EAAR,EAAQA,KAAMC,EAAd,EAAcA,IAAKC,EAAnB,EAAmBA,SACnB,EAAuBJ,EAAMK,UAArBC,EAAR,EAAQA,KAAMC,EAAd,EAAcA,KAGRC,EAAcD,GAAYA,EAAKJ,MAAQA,EAAb,SAAb,GACbM,EAAeH,GAAYA,EAAKH,MAAQA,EAAb,OAAb,GACdO,EAAeP,IAAQvB,EAAKE,YAAYqB,IAAM,OAAS,WAE7D,OAAQ,mCACJ,sBAAKpB,UAAS,kBAAa2B,EAAb,YAA6BD,GAA3C,UACI,qBAAKf,IAAKU,EAAUrB,UAAWyB,EAAYb,IAAI,gBAC/C,4BAAIO,UCuDDS,MA3Df,WAEI,IAAM/B,EAAOC,IAASD,OAChBgC,EAAY/B,IAAS+B,YAErBC,EAAQC,mBACRC,EAAcH,EAAUI,WAAW,YACnCC,EAAQF,EAAYG,QAAQ,aAClC,EAAmBC,YAAkBF,EAAO,CAAEG,QAAS,OAAhDC,EAAP,oBACA,EAAkCC,mBAAS,IAA3C,mBAAOC,EAAP,KAAkBC,EAAlB,KAEMC,EAAiB,WAAM,IAAD,EACxB,UAAAZ,EAAMa,eAAN,SAAeC,eAAe,CAACC,SAAU,YAG7CC,qBAAU,WACNJ,OAGJ,IAAMK,EAAW,uCAAG,WAAOC,GAAP,mBAAAC,EAAA,6DAChBD,EAAEE,iBADc,EAGUrD,EAAKE,YAAvBqB,EAHQ,EAGRA,IAAKC,EAHG,EAGHA,SAHG,SAKVW,EAAYmB,IAAI,CAClBhC,KAAMqB,EACNY,UAAWtD,IAAS+B,UAAUwB,WAAWC,kBACzClC,MACAC,aATY,OAYhBoB,EAAa,IACbC,IAbgB,2CAAH,sDAgBjB,OAAQ,qCACJ,iCAEKJ,GAAYA,EAASiB,KAAI,SAACC,EAAKC,EAAOC,GACrC,IAAMlC,EAAOkC,EAAKD,EAAM,GAClBlC,EAAOmC,EAAKD,EAAM,GACxB,OAAO,cAAC,EAAD,CAA0BvC,QAASsC,EAAKlC,UAAW,CAACE,OAAMD,SAAxCiC,EAAIG,OAG/B,sBAAMC,IAAK9B,OAGf,uBAAM+B,SAAUd,EAAhB,UAEI,uBAAOe,MAAOtB,EAAWuB,SAAU,SAACf,GAAD,OAAOP,EAAaO,EAAE3C,OAAOyD,QAAQE,YAAY,mBAEpF,wBAAQhE,UAAU,sBAAsBiE,KAAK,SAASC,UAAW1B,EAAjE,SACI,cAAC,IAAD,CAAiBhC,KAAM2D,eC9CvCrE,IAASsE,cAAc,CACrBC,OAAQC,0CACRC,WAAYD,oCACZE,UAAWF,oBACXG,cAAeH,gCACfI,kBAAmBJ,eACnBK,MAAOL,4CACPM,cAAeN,iBAGjB,IAAMzE,EAAOC,IAASD,OAoBPgF,MAjBf,WAEE,MAAeC,YAAajF,GAArBkF,EAAP,oBAEA,OACE,sBAAK/E,UAAU,MAAf,UACE,cAAC,EAAD,IAEA,kCACG+E,EAAO,cAAC,EAAD,IAAe,cAAC,EAAD,UCvC/BC,IAASC,OACP,cAAC,EAAD,IACAC,SAASC,eAAe,W","file":"static/js/main.03bccb94.chunk.js","sourcesContent":["import React from 'react'\n\n//Import Firbase component\nimport firebase from 'firebase/app';\n\nfunction Signout() {\n\n    const auth = firebase.auth()\n    return auth.currentUser && (\n        <button className=\"sign-out\" onClick={() => auth.signOut()}>Sign Out</button>\n    )\n}\n\nexport default Signout\n","import React from \"react\";\n\n// Import FontAwesomeIcon component\nimport { faGithub } from \"@fortawesome/free-brands-svg-icons\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\n\n// Importing Component\nimport Signout from \"./Signout\";\n\nfunction Header() {\n  return (\n    <header>\n      <a href=\"http://chatsociety.netlify.app/\">\n        <h1>Chat Society</h1>\n      </a>\n      <a\n        href=\"https://github.com/swapnilsparsh/ChatSociety\"\n        className=\"git-icn\"\n        target=\"_blank\"\n        rel=\"noreferrer\"\n      >\n        <FontAwesomeIcon size=\"3x\" icon={faGithub} />\n      </a>\n      <Signout />\n    </header>\n  );\n}\n\nexport default Header;\n","import React from 'react'\n\n//Import Firbase component\nimport firebase from 'firebase/app';\n\nfunction Signin() {\n\n    const signInWithGoogle = () => {\n        const provider = new firebase.auth.GoogleAuthProvider();\n        auth.signInWithPopup(provider);\n    }\n    const auth = firebase.auth()\n\n    return (\n        <>\n            <img className=\"sign-in-image\" src=\"../SignIn.png\" alt=\"\" ></img>\n            <button className=\"sign-in-button\" onClick={signInWithGoogle}>\n                <img className=\"sign-in-google\" src=\"https://img.icons8.com/fluency/480/000000/google-logo.png\" alt=\"\" />\n                Sign in with Google\n            </button>\n        </>\n    )\n}\n\nexport default Signin\n","import React from 'react'\n\n//Import Firbase component\nimport firebase from 'firebase/app';\n\nfunction ChatMessage(props) {\n\n    const auth = firebase.auth()\n    const { text, uid, photoURL } = props.message;\n    const { next, prev } = props.neighbour;\n    //  Ommit profile picture if the previously sent message\n    //  was sent by the same user. Avoiding ui repetition\n    const withAvatar = !prev ? `` : prev.uid === uid ? `hidden` : ``\n    const addDistance = !next ? `` : next.uid !== uid ? `next` : ``\n    const messageClass = uid === auth.currentUser.uid ? 'sent' : 'received';\n\n    return (<>\n        <div className={`message ${messageClass} ${addDistance}`}>\n            <img src={photoURL} className={withAvatar} alt=\"Profile Pic\" />\n            <p>{text}</p>\n        </div>\n    </>)\n}\n\nexport default ChatMessage\n","import React, { useEffect, useRef, useState } from 'react';\n\n//Import Firbase component\nimport firebase from 'firebase/app';\n\n//Import FirebaseAuth component\nimport { useCollectionData } from 'react-firebase-hooks/firestore';\n\n// Import FontAwesomeIcon component\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faPaperPlane } from '@fortawesome/free-solid-svg-icons';\n\n// Importing Component\nimport ChatMessage from './ChatMessage';\n\nfunction ChatRoom() {\n\n    const auth = firebase.auth()\n    const firestore = firebase.firestore();\n\n    const dummy = useRef();\n    const messagesRef = firestore.collection('messages');\n    const query = messagesRef.orderBy('createdAt');\n    const [messages] = useCollectionData(query, { idField: 'id' });\n    const [formValue, setFormValue] = useState('');\n\n    const scrollToBottom = () =>{\n        dummy.current?.scrollIntoView({behavior: \"smooth\"})\n    }\n\n    useEffect(()=>{\n        scrollToBottom();\n    })\n\n    const sendMessage = async (e) => {\n        e.preventDefault();\n\n        const { uid, photoURL } = auth.currentUser;\n\n        await messagesRef.add({\n            text: formValue,\n            createdAt: firebase.firestore.FieldValue.serverTimestamp(),\n            uid,\n            photoURL\n        })\n        \n        setFormValue('');\n        scrollToBottom();\n    }\n\n    return (<>\n        <main>\n\n            {messages && messages.map((msg, index, pool) => {\n              const prev = pool[index-1];\n              const next = pool[index+1]\n              return <ChatMessage key={msg.id} message={msg} neighbour={{prev, next}} />\n            })}\n\n            <span ref={dummy}></span>\n        </main>\n\n        <form onSubmit={sendMessage}>\n\n            <input value={formValue} onChange={(e) => setFormValue(e.target.value)} placeholder=\"Type a message\" />\n\n            <button className=\"chat-message-button\" type=\"submit\" disabled={!formValue}>\n                <FontAwesomeIcon icon={faPaperPlane} />\n            </button>\n\n        </form>\n    </>)\n}\n\nexport default ChatRoom\n","import React from 'react';\n\n//Import Styling\nimport './App.css';\n\n\n//Import Firbase component\nimport firebase from 'firebase/app';\nimport 'firebase/firestore';\nimport 'firebase/auth';\nimport 'firebase/analytics';\n\n//Import FirebaseAuth component\nimport { useAuthState } from 'react-firebase-hooks/auth';\n\n// Importing Component\nimport Header from './components/Header';\nimport SignIn from './components/Signin';\nimport ChatRoom from './components/ChatRoom';\n\n\nfirebase.initializeApp({\n  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,\n  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,\n  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,\n  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,\n  messagingSenderId: process.env.REACT_APP_FIREBASE_MSG_SENDER_ID,\n  appId: process.env.REACT_APP_FIREBASE_APP_ID,\n  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID\n})\n\nconst auth = firebase.auth();\n\n\nfunction App() {\n\n  const [user] = useAuthState(auth);\n\n  return (\n    <div className=\"App\">\n      <Header />\n\n      <section>\n        {user ? <ChatRoom /> : <SignIn />}\n      </section>\n\n    </div>\n  );\n}\n\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\n  <App />,\n  document.getElementById('root')\n);\n"],"sourceRoot":""}