{"version":3,"sources":["layout/button.jsx","layout/box.jsx","layout/spinner.jsx","global.js","components/chat/utils/SideBar.jsx","components/chat/utils/MessageItem.jsx","components/chat/utils/ScreenChat.jsx","components/chat/utils/ScreenGetNickname.jsx","components/chat/utils/ScreenSelectChatRooms.jsx","components/chat/Chat.jsx","components/chat/token.js","App.js","reportWebVitals.js","index.js"],"names":["ButtonComponent","children","onClick","className","Box","Content","Layout","style","margin","padding","SpinnerComponent","color","baseURL","process","conversationURL","participantsURL","ChatSideBarUsersList","visible","users","Sider","trigger","collapsible","collapsed","background","header","dataSource","renderItem","item","Item","border","console","log","sid","identity","Message","myselfIdentifier","author","message","ScreenChat","nickname","messages","participants","sendMessageCallback","onDisconect","deleteBody","useState","sideBarVisible","setSideBarVisible","searchText","setSearchText","isSearching","setIsSearching","Footer","Search","Header","Input","searchRef","useRef","useBeforeunload","event","axios","delete","data","then","a","useEffect","current","input","focus","MenuButton","onChange","MenuFoldOutlined","MenuUnfoldOutlined","height","title","subTitle","extra","CloseCircleTwoTone","fontSize","placeholder","value","enterButton","size","e","target","onSearch","loading","ref","ScreenGetNickname","onFinish","onFinishFailed","nicknameInputRef","Form","useForm","form","Title","Typography","level","name","autoComplete","layout","rules","required","shouldUpdate","type","htmlType","disabled","isFieldsTouched","getFieldsError","filter","errors","length","ScreenSelectChatRooms","onReturn","rooms","setRooms","error","setError","marginLeft","map","room","FriendlyName","Sid","setTimeout","get","res","Chat","setNickname","token","setToken","conversation","setConversation","setLoading","setMessages","setParticipants","participantSid","setParticipantSid","onAddMessage","m","obj","body","dateCreated","index","newMessages","push","concat","onAddParticipant","participant","onRemoveParticipant","IdentitySid","ConversationSid","sendMessage","toString","includes","participantsBody","conversationSid","post","resp","client","Client","ex","getConversationBySid","conversationObj","on","getParticipants","catch","err","nickName","AccessToken","require","jwt","chatGrant","ChatGrant","serviceSid","addGrant","toJwt","getToken","App","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","document","getElementById"],"mappings":"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","file":"static/js/main.dbccef3d.chunk.js","sourcesContent":["import React from 'react'\r\nimport { Button } from 'antd'\r\n\r\nexport default function ButtonComponent ({ children, onClick }) {\r\n  return (\r\n    <Button onClick={onClick} className='button-link'>\r\n      {children}\r\n    </Button>\r\n  )\r\n}\r\n","import React from 'react'\r\nimport { Layout } from 'antd'\r\n\r\nexport default function Box ({ children }) {\r\n  const { Content } = Layout\r\n\r\n  return (\r\n    <Layout className='layout' style={{ margin: '50px' }}>\r\n      <Content style={{ padding: '20px 50px' }}>{children}</Content>\r\n    </Layout>\r\n  )\r\n}\r\n","import React from 'react'\r\nimport { Spinner } from 'react-spinners-css'\r\n\r\nexport default function SpinnerComponent () {\r\n  return <Spinner color='#000' />\r\n}\r\n","const baseURL = process.env.REACT_APP_CHAT_SERVER_URL\r\n\r\nexport const conversationURL = `${baseURL}/conversations`\r\nexport const participantsURL = `${baseURL}/participants`\r\n","import React from 'react'\r\nimport { List, Layout } from 'antd'\r\nimport { Button } from 'layout'\r\n\r\nexport default function ChatSideBarUsersList ({ visible, users }) {\r\n  const { Sider } = Layout\r\n\r\n  if (visible) {\r\n    return (\r\n      <Sider trigger={null} collapsible collapsed={!visible} style={{ background: '#CCC', color: '#666', padding: '0px 10px' }}>\r\n        <List\r\n          header={<div>Active chat users</div>}\r\n          dataSource={users}\r\n          renderItem={item => (\r\n            <List.Item style={{ background: 'transparent', border: '0px', padding: '0px' }}>\r\n              <Button onClick={() => console.log('clicked user', item.sid)}>{item.identity}</Button>\r\n            </List.Item>\r\n          )}\r\n        />\r\n      </Sider>\r\n    )\r\n  } else {\r\n    return <></>\r\n  }\r\n}\r\n","import React from 'react'\r\n\r\nexport default function Message ({ item, myselfIdentifier }) {\r\n  if (item.author === myselfIdentifier) {\r\n    return (\r\n      <span>\r\n        <strong>{item.author}:</strong> {item.message}\r\n      </span>\r\n    )\r\n  } else {\r\n    return (\r\n      <>\r\n        {item.author}: {item.message}\r\n      </>\r\n    )\r\n  }\r\n}\r\n","import React, { useState, useEffect, useRef } from 'react'\r\nimport { useBeforeunload } from 'react-beforeunload'\r\nimport { Input, List, Layout, PageHeader, Button } from 'antd'\r\nimport { MenuUnfoldOutlined, MenuFoldOutlined, CloseCircleTwoTone } from '@ant-design/icons'\r\nimport axios from 'axios'\r\n\r\nimport SideBar from './SideBar'\r\nimport MessageItem from './MessageItem'\r\n\r\nimport { participantsURL } from 'global'\r\n\r\nexport default function ScreenChat ({ nickname, messages, participants, sendMessageCallback, onDisconect, deleteBody }) {\r\n  const [sideBarVisible, setSideBarVisible] = useState(true)\r\n  const [searchText, setSearchText] = useState('')\r\n  const [isSearching, setIsSearching] = useState(false)\r\n  const { Content, Footer, Header } = Layout\r\n  const { Search } = Input\r\n  const searchRef = useRef(null)\r\n\r\n  useBeforeunload(event => {\r\n    axios.delete(participantsURL, { data: deleteBody }).then(a => {})\r\n  })\r\n\r\n  useEffect(() => {\r\n    searchRef.current.input.focus()\r\n    return () => {\r\n      axios.delete(participantsURL, { data: deleteBody }).then(a => {})\r\n    }\r\n  }, [])\r\n\r\n  const MenuButton = ({ visible, onChange }) => {\r\n    if (visible) {\r\n      return <MenuFoldOutlined className='trigger' onClick={() => onChange(!visible)} />\r\n    } else {\r\n      return <MenuUnfoldOutlined className='trigger' onClick={() => onChange(!visible)} />\r\n    }\r\n  }\r\n\r\n  return (\r\n    <Layout className='layout' style={{ margin: '0px', height: '100vh' }}>\r\n      <SideBar visible={sideBarVisible} users={participants} />\r\n      <Layout style={{ height: '100vh' }}>\r\n        <PageHeader\r\n          title={<MenuButton visible={sideBarVisible} onChange={setSideBarVisible} />}\r\n          subTitle='ScrumbleCheat Chatting Room'\r\n          extra={[<CloseCircleTwoTone style={{ fontSize: '20px' }} onClick={() => onDisconect()} />]}\r\n        ></PageHeader>\r\n        <Layout style={{ padding: '0px 0px' }}>\r\n          <Content style={{ background: 'transparent', padding: '20px 20px' }}>\r\n            <List\r\n              dataSource={messages}\r\n              renderItem={item => (\r\n                <List.Item style={{ background: 'transparent', padding: '0px' }}>\r\n                  <MessageItem item={item} myselfIdentifier={nickname} />\r\n                </List.Item>\r\n              )}\r\n            />\r\n          </Content>\r\n          <Footer style={{ background: 'blue', padding: '0px' }}>\r\n            <Search\r\n              placeholder='Enter your message here'\r\n              value={searchText}\r\n              enterButton='Send'\r\n              size='large'\r\n              onChange={e => {\r\n                setSearchText(e.target.value)\r\n              }}\r\n              onSearch={async message => {\r\n                setIsSearching(true)\r\n                await sendMessageCallback(message)\r\n                setSearchText('')\r\n                setIsSearching(false)\r\n              }}\r\n              loading={isSearching}\r\n              ref={searchRef}\r\n            />\r\n          </Footer>\r\n        </Layout>\r\n      </Layout>\r\n    </Layout>\r\n  )\r\n}\r\n","import React, { useEffect, useRef } from 'react'\r\nimport { Form, Input, Button, Typography } from 'antd'\r\n\r\nimport { Box } from 'layout'\r\n\r\nexport default function ScreenGetNickname ({ onFinish, onFinishFailed }) {\r\n  const nicknameInputRef = useRef(null)\r\n  const [form] = Form.useForm()\r\n  const { Title } = Typography\r\n\r\n  useEffect(() => {\r\n    nicknameInputRef.current.focus()\r\n  }, [])\r\n\r\n  return (\r\n    <Box>\r\n      <Title level={5}>Inform your nickname to enter the chat for unscramble</Title>\r\n      <Form form={form} name='basic' onFinish={onFinish} onFinishFailed={onFinishFailed} autoComplete='off' layout='inline'>\r\n        <Form.Item name='nickname' rules={[{ required: true, message: 'Please input your nickname!' }]}>\r\n          <Input placeholder='Nickname' ref={nicknameInputRef} />\r\n        </Form.Item>\r\n\r\n        <Form.Item shouldUpdate>\r\n          {() => (\r\n            <Button type='primary' htmlType='submit' disabled={!form.isFieldsTouched(true) || !!form.getFieldsError().filter(({ errors }) => errors.length).length}>\r\n              Go chatting\r\n            </Button>\r\n          )}\r\n        </Form.Item>\r\n      </Form>\r\n    </Box>\r\n  )\r\n}\r\n","import React, { useState } from 'react'\r\nimport axios from 'axios'\r\nimport { Button } from 'antd'\r\nimport { Spinner } from 'react-spinners-css'\r\nimport { Box } from 'layout'\r\n\r\nimport { conversationURL } from 'global'\r\n\r\nexport default function ScreenSelectChatRooms ({ nickname, onFinish, onReturn }) {\r\n  const [rooms, setRooms] = useState()\r\n  const [error, setError] = useState(null)\r\n\r\n  console.log('conversationURL', conversationURL)\r\n  if (!rooms) {\r\n    setTimeout(async () => {\r\n      try {\r\n        const res = await axios.get(conversationURL)\r\n        setRooms(res.data)\r\n      } catch {\r\n        setError(\"Can't connect to the chat server.\")\r\n      }\r\n    })\r\n\r\n    if (error) {\r\n      return (\r\n        <Box>\r\n          <h1 style={{ marginLeft: 10 }}>Select a Chat-Room</h1>\r\n          <p>\r\n            <strong>Error:</strong> {error}\r\n          </p>\r\n          <Button onClick={() => onReturn()}>Return to last page.</Button>\r\n        </Box>\r\n      )\r\n    }\r\n\r\n    return (\r\n      <Box>\r\n        <h1 style={{ marginLeft: 10 }}>Select a Chat-Room</h1>\r\n        <Spinner color='#000' />\r\n      </Box>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <Box>\r\n      <h1 style={{ marginLeft: 10 }}>Select a Chat-Room</h1>\r\n      <ul>\r\n        {rooms.map(room => {\r\n          return (\r\n            <li key={room.Sid}>\r\n              <Button onClick={() => onFinish(room)}>{room.FriendlyName}</Button>\r\n            </li>\r\n          )\r\n        })}\r\n      </ul>\r\n    </Box>\r\n  )\r\n}\r\n","import React, { useState } from 'react'\r\nimport { Client } from '@twilio/conversations'\r\nimport axios from 'axios'\r\n\r\nimport { Box, Spinner } from 'layout'\r\n\r\nimport { participantsURL } from 'global'\r\nimport { getToken } from './token'\r\nimport { ScreenChat, ScreenSelectChatRooms, ScreenGetNickname } from './utils'\r\n\r\n// Handle all chat flow\r\nexport default function Chat () {\r\n  const [nickname, setNickname] = useState()\r\n  const [token, setToken] = useState()\r\n  const [conversation, setConversation] = useState()\r\n  const [loading, setLoading] = useState(false)\r\n  const [messages, setMessages] = useState([])\r\n  const [participants, setParticipants] = useState([])\r\n  const [participantSid, setParticipantSid] = useState(null)\r\n\r\n  console.log('conversation', conversation)\r\n\r\n  const onAddMessage = m => {\r\n    const obj = { author: m.author, message: m.body, dateCreated: m.dateCreated, index: m.index }\r\n    let newMessages = []\r\n    newMessages.push(obj)\r\n    setMessages(messages => messages.concat(newMessages))\r\n  }\r\n\r\n  const onAddParticipant = participant => {\r\n    console.log('adding participant', participant)\r\n    setParticipants(participants => participants.concat([participant]))\r\n  }\r\n\r\n  const onRemoveParticipant = participant => {\r\n    console.log('remove participant', participant)\r\n  }\r\n\r\n  const onFinishGetNickname = form => {\r\n    try {\r\n      setToken(getToken(form.nickname))\r\n      setNickname(form.nickname)\r\n    } catch (ex) {\r\n      console.log('error getting token', ex)\r\n    }\r\n  }\r\n\r\n  const onSelectChatroom = room => {\r\n    setLoading(true)\r\n    const participantsBody = {\r\n      identity: nickname,\r\n      conversationSid: room.Sid\r\n    }\r\n\r\n    axios.post(participantsURL, participantsBody).then(resp => {\r\n      let client\r\n\r\n      setParticipantSid(resp.data)\r\n\r\n      try {\r\n        client = new Client(token)\r\n      } catch (ex) {\r\n        console.log('Error trying to instanciate client with the token', token)\r\n      }\r\n\r\n      client\r\n        .getConversationBySid(room.Sid)\r\n        .then(async conversationObj => {\r\n          console.log('setting messageAdded')\r\n          conversationObj.on('messageAdded', onAddMessage)\r\n          conversationObj.on('participantJoined', onAddParticipant)\r\n          conversationObj.on('participantLeft', onRemoveParticipant)\r\n          conversationObj\r\n            .getParticipants()\r\n            .then(participants => {\r\n              setParticipants(participants)\r\n              setConversation(conversationObj)\r\n            })\r\n            .catch(e => {\r\n              console.error('conversation error', e)\r\n            })\r\n          setLoading(false)\r\n        })\r\n        .catch(err => {\r\n          console.log('getConversationByUniqueName', err)\r\n        })\r\n    })\r\n  }\r\n\r\n  if (loading) {\r\n    return (\r\n      <Box>\r\n        <Spinner />\r\n      </Box>\r\n    )\r\n  }\r\n\r\n  if (!nickname) {\r\n    return <ScreenGetNickname onFinish={onFinishGetNickname} />\r\n  }\r\n\r\n  if (!token) {\r\n    return <>Retriving token</>\r\n  }\r\n\r\n  if (!conversation) {\r\n    return <ScreenSelectChatRooms onFinish={onSelectChatroom} token={token} onReturn={() => setNickname(null)} />\r\n  }\r\n\r\n  return (\r\n    <ScreenChat\r\n      messages={messages}\r\n      deleteBody={{ IdentitySid: participantSid, ConversationSid: conversation.sid }}\r\n      onDisconect={async () => {\r\n        setNickname(null)\r\n        setConversation(null)\r\n        setToken(null)\r\n        setParticipantSid(null)\r\n        setMessages([])\r\n        setParticipants([])\r\n      }}\r\n      participants={participants}\r\n      sendMessageCallback={async message => {\r\n        if (conversation) {\r\n          try {\r\n            await conversation.sendMessage(message)\r\n          } catch (ex) {\r\n            if (ex.toString().includes('User not member of channel')) {\r\n              console.log('User not member of channel')\r\n              setNickname(null)\r\n              setConversation(null)\r\n              setToken(null)\r\n              setParticipantSid(null)\r\n              setMessages([])\r\n              setParticipants([])\r\n            }\r\n          }\r\n        }\r\n      }}\r\n    />\r\n  )\r\n}\r\n","export function getToken(nickName) {\r\n  const AccessToken = require('twilio').jwt.AccessToken\r\n  const ChatGrant = AccessToken.ChatGrant\r\n\r\n  // Used when generating any kind of tokens\r\n  const twilioAccountSid = 'ACef4b34b641dd19b7ad6d2a1c08aef295'\r\n  const twilioApiKey = 'SKee3ab3b3bf5a277799117b1f4ff1fe0f'\r\n  const twilioApiSecret = 'd4fi0PLiOYWimZsYf7R7wZxW1dcFrCkC'\r\n\r\n  // Used specifically for creating Chat tokens\r\n  const serviceSid = 'ISd0fa6ab091404aeebb2f233ba44f2ccc'\r\n  const identity = nickName\r\n\r\n  // Create a \"grant\" which enables a client to use Chat as a given user,\r\n  // on a given device\r\n  const chatGrant = new ChatGrant({\r\n    serviceSid: serviceSid\r\n  })\r\n\r\n  // Create an access token which we will sign and return to the client,\r\n  // containing the grant we just created\r\n  const token = new AccessToken(\r\n    twilioAccountSid,\r\n    twilioApiKey,\r\n    twilioApiSecret,\r\n    { identity: identity }\r\n  )\r\n\r\n  token.addGrant(chatGrant)\r\n\r\n  // Serialize the token to a JWT string\r\n  //console.log(token.toJwt())\r\n  return token.toJwt()\r\n}\r\n","import React from 'react'\n\nimport Chat from './components/chat/Chat'\n\nimport 'antd/dist/antd.css'\nimport './App.css'\n\nfunction App () {\n  return <Chat />\n}\n\nexport default App\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react'\nimport ReactDOM from 'react-dom'\nimport './index.css'\nimport App from './App'\nimport reportWebVitals from './reportWebVitals'\n\nReactDOM.render(\n  // <React.StrictMode>\n  <App />,\n  // </React.StrictMode>\n  document.getElementById('root')\n)\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals()\n"],"sourceRoot":""}