\n {\n icons.map(({Icon, onClick}, index) => (\n \n \n \n ))\n }\n \n \n \n
\n )\n}\n\nexport default RTC\n","import React, {useState, useRef, useEffect} from 'react';\nimport {v4} from 'uuid';\nimport EmojiPicker from 'emoji-picker-react';\nimport {Input, Box, IconButton} from \"@chakra-ui/react\";\nimport {BiWinkTongue, BiMicrophone, BiUnlink, BiSend} from 'react-icons/bi';\nimport {useToast} from '@chakra-ui/react';\nimport Wave from 'wave-visualizer';\n\nfunction Compose({onSend, uuid}) {\n\n //open emoji picker status\n const [openPicker, setOpenPicker] = useState(false);\n\n //input of type file to allow users to attach videos and images\n const fileInputRef = useRef(null);\n\n //compose input ref used to type message\n const composeInputRef = useRef(null);\n\n //messages toaster\n const toast = useToast();\n\n //current message value that is being typed\n const [message, setMessage] = useState('');\n\n //recording stream\n const recordStream = useRef(null);\n\n //media recorder\n const mediaRecorder = useRef(null);\n\n //indicates if the record shall be discarded\n const discardRecordFlag = useRef(false);\n\n //chunks recorded\n const [chunks, setChunks] = useState([]);\n\n //recording status\n const [isRecording, setIsRecording] = useState(false);\n\n //function for reading file data as base64\n const readAsB64 = (file, callback) => {\n const reader = new FileReader();\n reader.onload = (e) => callback(e.target.result.replace(/^data:.+;base64,/, ''));\n reader.onerror = () => {\n toast({\n title: \"Whoops!\",\n description: \"Failed to read the file data..\",\n status: \"error\",\n duration: 3000,\n isClosable: false\n })\n }\n reader.readAsDataURL(file);\n }\n\n //function to start recording\n const startRecord = () => {\n discardRecordFlag.current = false;\n setIsRecording(true);\n navigator.mediaDevices.getUserMedia({\n audio: true\n })\n .then((stream) => {\n recordStream.current = stream;\n mediaRecorder.current = new MediaRecorder(recordStream.current, {mimeType: 'audio/webm'});\n mediaRecorder.current.ondataavailable = (e) => {\n if (e.data.size > 0) setChunks([...chunks, e.data]);\n }\n mediaRecorder.current.start();\n let wave = new Wave();\n wave.fromStream(recordStream.current, 'record-wave-visualizer', {\n type: 'shine',\n stroke: 1,\n colors: ['white', 'white', 'white']\n });\n })\n .catch(() => setIsRecording(false))\n }\n\n //function to stop recording\n const stopRecord = () => {\n if (!mediaRecorder.current || mediaRecorder.current.state === 'inactive') return;\n mediaRecorder.current.stop();\n setIsRecording(false);\n recordStream.current.getTracks().forEach(track => track.stop());\n }\n\n //function to discard record\n const discardRecord = () => {\n discardRecordFlag.current = true;\n stopRecord();\n }\n \n useEffect(() => {\n //sending chunks in chat when ready\n if (chunks.length && !discardRecordFlag.current) {\n const blob = new Blob(chunks, {type: 'audio/webm'});\n readAsB64(blob, (result) => {\n onSend({sender: {uuid}, audio: result, hash: v4()});\n setChunks([]);\n })\n }\n }, [chunks])\n\n //function for handling media change\n const handleMedia = (e) => {\n const file = e.target.files[0];\n if (!file) return;\n const validTypes = /image|video/;\n if (file.type.match(validTypes)) {\n readAsB64(file, (result) => {\n onSend({sender: {uuid}, attachment: result, hash: v4()});\n //Reset the input\n fileInputRef.current.value = null;\n })\n }\n else {\n toast({\n title: \"Unsupported Media!\",\n description: \"Only images and videos can be attached..\",\n status: \"error\",\n duration: 3000,\n isClosable: false\n })\n }\n }\n\n //functioning icons\n const icons = [\n {Icon: BiMicrophone, onMouseDown: startRecord, onMouseUp: stopRecord, onMouseLeave: discardRecord},\n {Icon: BiUnlink, onClick: () => fileInputRef.current.click()},\n {Icon: BiWinkTongue, onClick: () => setOpenPicker(!openPicker)}\n ]\n\n //function to handle emoji click\n const handleEmojiClick = (_, emoji) => {\n const insert = composeInputRef.current.selectionStart;\n const emojifiedMessage = `${message.slice(0, insert)}${emoji.emoji}${message.slice(insert, message.length)}`;\n setMessage(emojifiedMessage);\n setOpenPicker(false);\n composeInputRef.current.focus();\n }\n\n //function to handle compose submissionc\n const handleSubmit = (e) => {\n e.preventDefault();\n //Do not compose emtpy messages\n if (!message) return;\n onSend({sender: {uuid}, text: message, hash: v4()});\n setMessage('');\n composeInputRef.current.focus();\n }\n\n return (\n \n setOpenPicker(false)} display={openPicker ? 'block' : 'none'}>\n \n \n fileInputRef.current = target} onChange={handleMedia}/>\n
\n )\n}\n\nexport default Compose\n","//Convert a base64 data string to a URL to be used with images for eg\nexport const toObjectUrl = (b64Data, contentType) => {\n const byteChars = atob(b64Data);\n const byteNums = new Array(byteChars.length)\n for (let i = 0; i < byteNums.length; i++) {\n byteNums[i] = byteChars.charCodeAt(i);\n }\n const byteArray = new Uint8Array(byteNums);\n const blob = new Blob([byteArray], {type: contentType});\n const url = URL.createObjectURL(blob);\n return url;\n}","import React, {useEffect, useRef} from 'react';\nimport Emoji from 'react-emoji-render';\nimport {FaCheckDouble} from 'react-icons/fa';\nimport {toObjectUrl} from 'utils/tools';\nimport {CircularProgress, Box} from '@chakra-ui/react';\n\nfunction MessagesWindow({messages, uuid, fetchMessages, chat}) {\n\n //messages container ref\n const containerRef = useRef(null);\n\n //first load ref\n const firstLoad = useRef(true);\n\n useEffect(() => {\n //do not do that if the user is intending to fetch older messages\n if (containerRef.current.scrollHeight > containerRef.current.clientHeight && firstLoad.current) {\n containerRef.current.scrollTop = containerRef.current.scrollHeight;\n firstLoad.current = false;\n }\n if (containerRef.current.scrollTop === 0) return;\n containerRef.current.scrollTop = containerRef.current.scrollHeight;\n }, [messages])\n\n //fetch more messages by scrolling to the very top\n const loadMoreMsgs = (e) => {\n //Fetching older messages\n if (e.target.scrollTop === 0 && !firstLoad.current) {\n fetchMessages();\n }\n }\n\n //function to get message send date\n const getMsgDate = (date) => {\n date = date || new Date();\n const msgDate = new Date(date);\n let [time, dayTime] = msgDate.toLocaleTimeString().split(' ');\n time = time.split(':').filter((_, idx, arr) => idx !== arr.length - 1).join(':');\n const localTime = `${time} ${dayTime}`;\n const past = (new Date().getTime() - msgDate.getTime()) / (1000 * 60 * 60 * 24);\n if (past < 1) return localTime;\n if (past >= 1 && past < 2) return `Yesterday at ${localTime}`;\n else return msgDate.toLocaleDateString();\n }\n\n useEffect(() => {\n firstLoad.current = true;\n }, [chat])\n\n useEffect(() => {\n containerRef.current.addEventListener('scroll', loadMoreMsgs);\n }, [])\n\n return (\n \n {\n icons.map(({Icon, onClick, onMouseDown, onMouseUp, onMouseLeave}, index) => (\n \n \n \n ))\n }\n {\n isRecording &&\n \n \n }\n
\n \n containerRef.current = target}>\n {\n messages.map((message, idx, arr) => (\n \n {\n message.text ?\n \n \n :\n 
\n )\n }\n {\n message.audio &&\n (\n message.pending ?\n \n \n :\n \n )\n }\n \n }\n {\n (!message.pending && message.sender.uuid === uuid && idx === arr.length - 1) &&\n
\n ))\n }\n \n )\n}\n\nexport default MessagesWindow\n","import React, {useContext} from 'react';\nimport {Avatar, Heading} from '@chakra-ui/react';\nimport {UUIDContext} from 'providers/UUIDProvider';\nimport RTC from './RTC';\nimport Compose from './Compose';\nimport MessagesWindow from './MessagesWindow';\n\nfunction ChatWindow({chat, messages, closeCurrent, onSend, fetchMessages, msgEvent, isCall, changeActiveChat}) {\n\n //UUID\n const {UUID} = useContext(UUIDContext);\n\n //connected user on chat\n const chatUser = chat?.users.find(user => user.uuid !== UUID);\n\n return (\n \n
\n :\n <>\n {\n message.attachment &&\n (\n message.pending ?\n \n \n {getMsgDate(message.created)}\n \n {\n message.seen ?\n \n }\n
\n }\n \n \n
\n )\n}\n\nexport default ChatWindow\n","import React, {useState, useEffect, useContext, useRef} from 'react';\nimport {getChats} from 'api/queries';\nimport Chat from './Chat';\nimport {UUIDContext} from 'providers/UUIDProvider';\nimport {useHistory} from 'react-router-dom';\nimport {HomeRoute} from 'router/routes';\nimport {getMessages} from 'api/queries';\nimport ChatWindow from './ChatWindow';\n\nfunction Messenger() {\n\n //current chats\n const [chats, setChats] = useState([]);\n\n //current active chat\n const [currentChat, setCurrentChat] = useState(null);\n\n //function to change active chat using id\n const changeActiveChat = (id) => {\n setCurrentChat(chats.find(c => c.id === id));\n }\n\n //indicate if there is a call running\n const [isCall, setIsCall] = useState(false);\n\n //connected status and uuid for user\n const {connected, UUID, event} = useContext(UUIDContext);\n\n //last date for fetching older messages\n const [fetchOld, setFetchOld] = useState(false);\n\n //active chat messages\n const [messages, setMessages] = useState([]);\n\n //temp message to send in socket\n const [tempMessage, setTempMessage] = useState({});\n\n //new received message\n const [msgEvent, setMsgEvent] = useState(null);\n\n //flag ref for fetching old messages\n const oldFlag = useRef(false);\n\n //function to fetch chats\n const fetchChats = async () => {\n const response = await getChats(UUID);\n if (Array.isArray(response)) setChats(response);\n }\n\n useEffect(() => {\n fetchChats();\n }, [])\n\n useEffect(() => {\n //Check if the current chat is deleted or still there\n if (!chats.find(chat => chat.id === currentChat?.id)) setCurrentChat(null);\n }, [chats, currentChat])\n\n //function to fetch messages\n const fetchMessages = async (lastDate = null) => {\n if (!currentChat) return;\n if (!lastDate) setMessages([]);\n let msgs = [];\n if (lastDate) msgs = [...messages]; \n const response = await getMessages(currentChat.id, lastDate);\n setFetchOld(false);\n if (Array.isArray(response)) setMessages([...response, ...msgs]);\n }\n \n //history objet\n const history = useHistory();\n\n useEffect(() => {\n //User must be connected to be on messenger\n if (!connected) history.push(HomeRoute);\n }, [connected])\n\n useEffect(() => {\n //listen to new connecting/disconnecting users\n if (event.type === 'create' || event.type === 'delete') {\n fetchChats();\n setMsgEvent(event);\n }\n }, [event])\n\n //callback for receiving messages\n const onReceive = (event) => setMsgEvent(event);\n\n //call back for sending messages\n const onSend = (message, type = 'message') => {\n setTempMessage({message, type});\n if (type === 'message') {\n const pendingMessage = {...message, pending: true};\n setMessages([...messages, pendingMessage]);\n }\n }\n\n useEffect(() => {\n //when the active chat changes fetch it's messages\n if (currentChat) {\n fetchMessages();\n }\n else setMessages([]);\n }, [currentChat])\n\n useEffect(() => {\n //Verify first that the user isn't intending to fetch more messages\n if (oldFlag.current) {\n oldFlag.current = false;\n return;\n }\n //messages should never exceed 20, show more upon scrolling up\n const max = 20;\n const len = messages.length;\n if (len > max && messages[len - 1].sender.uuid === UUID) {\n setMessages(messages.slice(len - max, len));\n }\n }, [messages])\n\n useEffect(() => {\n if (msgEvent?.type === 'read' && msgEvent.payload.sender.uuid !== UUID) {\n const newMessages = [...messages];\n newMessages.forEach(message => message.seen = true);\n setMessages(newMessages);\n }\n\n if (msgEvent?.type === 'message') {\n //Make sure it's a message in the activeChat\n if (msgEvent.payload.chat !== currentChat?.id) return;\n const newMessages = [...messages];\n const idx = newMessages.findIndex(message => message.hash === msgEvent.payload.hash);\n if (idx === -1) {\n setMessages([...newMessages, msgEvent.payload]);\n return;\n }\n newMessages[idx] = msgEvent.payload;\n setMessages(newMessages);\n }\n }, [msgEvent])\n\n useEffect(() => {\n if (fetchOld && messages[0]) {\n fetchMessages(messages[0]?.created);\n oldFlag.current = true;\n }\n }, [fetchOld, messages])\n\n return (\n \n
\n \n \n {chatUser?.username} \n
\n \n
\n )\n}\n\nexport default Messenger\n","import Home from 'views/Home/Home';\nimport Messenger from 'views/Messenger/Messenger';\n\n//Routes Literal Paths\nexport const HomeRoute = '/';\nexport const MessengerRoute = '/messenger';\n\n//Routes Objects\nconst Routes = [\n {path: HomeRoute, Component: Home},\n {path: MessengerRoute, Component: Messenger}\n]\n\nexport default Routes;","import {Route, Switch, withRouter} from 'react-router-dom';\nimport {TransitionGroup, CSSTransition} from 'react-transition-group';\nimport Routes from './routes';\n\nfunction Router({location}) {\n return (\n \n
\n \n {\n chats.map(chat => (\n setCurrentChat(chat)} onReceive={onReceive} tempMessage={tempMessage} msgEvent={msgEvent}/>\n ))\n }\n
\n \n setCurrentChat(null)} onSend={onSend} fetchMessages={() => setFetchOld(true)} msgEvent={msgEvent} isCall={setIsCall} changeActiveChat={changeActiveChat}/>\n
\n \n
\n \n \n \n \n \n \n \n
\n );\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 {extendTheme} from \"@chakra-ui/react\";\nimport {createBreakpoints} from \"@chakra-ui/theme-tools\";\n\n//responsive breakpoints\nconst breakPoints = createBreakpoints({\n sm: \"576px\",\n md: \"768px\",\n lg: \"992px\",\n xl: \"1200px\"\n})\n\n//global styles\nconst styles = {\n global: {\n h1: {\n fontSize: \"2em\"\n },\n h2: {\n fontSize: \"1.5em\"\n },\n h3: {\n fontSize: \"1.15em\"\n },\n h4: {\n fontSize: '1em'\n },\n h5: {\n fontSize: '0.85em'\n },\n h6: {\n fontSize: '0.75em'\n }\n }\n}\n\nconst theme = extendTheme({breakPoints, styles});\n\nexport default theme;","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\nimport chakraTheme from 'themes/chakraTheme';\nimport {ChakraProvider} from \"@chakra-ui/react\";\n\nReactDOM.render(\n