From d30e61033b3abd4a756482cb8b6c56ea0999431e Mon Sep 17 00:00:00 2001 From: Cassio Santos Date: Thu, 11 Jun 2020 09:26:12 -0300 Subject: [PATCH] new chat with material ui --- All CSS Files Used in this Project.zip | Bin 15657 -> 0 bytes backend/app.js | 2 +- backend/controllers/contact.js | 21 +- backend/controllers/message.js | 21 +- backend/controllers/session.json | 2 +- .../components/ContactsList/ContactsList.js | 2 +- .../components/MessagesInput/MessagesInput.js | 212 ++++++++++++++++-- .../components/MessagesList/MessagesList.js | 50 +++-- 8 files changed, 247 insertions(+), 63 deletions(-) delete mode 100644 All CSS Files Used in this Project.zip diff --git a/All CSS Files Used in this Project.zip b/All CSS Files Used in this Project.zip deleted file mode 100644 index 0f2a7cce322ab87b549d212d8a757042b4f00e52..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15657 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 fXj%Uhfu9ZIhY&o125mR&`=8@` { - cb(null, new Date().getTime() + "-" + file.originalname); + cb(null, new Date().getTime() + "-" + file.originalname.replace(/\s/g, "")); }, }); diff --git a/backend/controllers/contact.js b/backend/controllers/contact.js index 0f4309a..c40b590 100644 --- a/backend/controllers/contact.js +++ b/backend/controllers/contact.js @@ -5,19 +5,22 @@ const Sequelize = require("sequelize"); exports.getContacts = async (req, res) => { try { const contacts = await Contact.findAll({ - include: { model: Message, attributes: [] }, + include: { + model: Message, + attributes: ["messageBody"], + }, attributes: { include: [ [ Sequelize.literal(`( - SELECT COUNT(*) - FROM messages AS message - WHERE - message.contactId = contact.id - AND - message.read = 0 - - )`), + SELECT COUNT(*) + FROM messages AS message + WHERE + message.contactId = contact.id + AND + message.read = 0 + + )`), "unreadMessages", ], ], diff --git a/backend/controllers/message.js b/backend/controllers/message.js index 5c1e078..d1c9781 100644 --- a/backend/controllers/message.js +++ b/backend/controllers/message.js @@ -81,15 +81,7 @@ exports.getContactMessages = async (req, res, next) => { const serializedMessages = contactMessages.map(message => { return { - id: message.id, - createdAt: message.createdAt, - updatedAt: message.updatedAt, - messageBody: message.messageBody, - userId: message.userId, - ack: message.ack, - read: message.read, - mediaType: message.mediaType, - contactId: message.contactId, + ...message.dataValues, mediaUrl: `${ message.mediaUrl ? `http://localhost:8080/public/${message.mediaUrl}` @@ -117,7 +109,7 @@ exports.postCreateContactMessage = async (req, res, next) => { const contact = await Contact.findByPk(contactId); if (media) { const newMedia = MessageMedia.fromFilePath(req.file.path); - message.mediaUrl = req.file.filename; + message.mediaUrl = req.file.filename.replace(/\s/g, ""); if (newMedia.mimetype) { message.mediaType = newMedia.mimetype.split("/")[0]; } else { @@ -143,7 +135,14 @@ exports.postCreateContactMessage = async (req, res, next) => { io.to(contactId).emit("appMessage", { action: "create", - message: newMessage, + message: { + ...newMessage.dataValues, + mediaUrl: `${ + message.mediaUrl + ? `http://localhost:8080/public/${message.mediaUrl}` + : "" + }`, + }, }); await setMessagesAsRead(contactId); diff --git a/backend/controllers/session.json b/backend/controllers/session.json index 3be9c34..33e96ac 100644 --- a/backend/controllers/session.json +++ b/backend/controllers/session.json @@ -1 +1 @@ -{"WABrowserId":"\"E9dnt9Mm/JiFDCMJQHkXBw==\"","WASecretBundle":"{\"key\":\"fHTKtoDcxidboASIs5WV5JKyRrF+SfMktqHXmq/KBJU=\",\"encKey\":\"FrM3OnnEbuEr1JrtKypw5CPSc6rSD5bjbOGstv8ijk4=\",\"macKey\":\"fHTKtoDcxidboASIs5WV5JKyRrF+SfMktqHXmq/KBJU=\"}","WAToken1":"\"Q+xBrzEsm9SAVo3hRyKwC3L/kvNfieq45Jt6/pFePbw=\"","WAToken2":"\"1@WlcfjMFEzc0c9JcHHHAK5BfaDDxigchRdN+GrHmVWsix+b7Od5d9Ls21/JC5ojCqbFBwnzQ5zZ/Fbg==\""} \ No newline at end of file +{"WABrowserId":"\"E9dnt9Mm/JiFDCMJQHkXBw==\"","WASecretBundle":"{\"key\":\"fHTKtoDcxidboASIs5WV5JKyRrF+SfMktqHXmq/KBJU=\",\"encKey\":\"FrM3OnnEbuEr1JrtKypw5CPSc6rSD5bjbOGstv8ijk4=\",\"macKey\":\"fHTKtoDcxidboASIs5WV5JKyRrF+SfMktqHXmq/KBJU=\"}","WAToken1":"\"9leF1nILpG4UaO0PWCoKA48h8dSn8UdIPNYZg3bpZv4=\"","WAToken2":"\"1@6OzeSH6s5Y8ozcOu4+l2N7wfaSk6C5Aop8h2BN08xAvvuGCfcuMzctLlOMNDaSw1j2qfFNM4CGjKdA==\""} \ No newline at end of file diff --git a/frontend/src/pages/Chat-Material/components/ContactsList/ContactsList.js b/frontend/src/pages/Chat-Material/components/ContactsList/ContactsList.js index a1b9a8c..4cc9ba0 100644 --- a/frontend/src/pages/Chat-Material/components/ContactsList/ContactsList.js +++ b/frontend/src/pages/Chat-Material/components/ContactsList/ContactsList.js @@ -184,7 +184,7 @@ const ContactsList = ({ selectedContact, setSelectedContact }) => { {contact.unreadMessages > 0 && ( diff --git a/frontend/src/pages/Chat-Material/components/MessagesInput/MessagesInput.js b/frontend/src/pages/Chat-Material/components/MessagesInput/MessagesInput.js index 168a853..679292f 100644 --- a/frontend/src/pages/Chat-Material/components/MessagesInput/MessagesInput.js +++ b/frontend/src/pages/Chat-Material/components/MessagesInput/MessagesInput.js @@ -1,21 +1,23 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; +import api from "../../../../util/api"; +import { Picker } from "emoji-mart"; import { makeStyles } from "@material-ui/core/styles"; import Paper from "@material-ui/core/Paper"; import InputBase from "@material-ui/core/InputBase"; +import CircularProgress from "@material-ui/core/CircularProgress"; +import { green } from "@material-ui/core/colors"; import AttachFileIcon from "@material-ui/icons/AttachFile"; import MoodIcon from "@material-ui/icons/Mood"; import SendIcon from "@material-ui/icons/Send"; +import CancelIcon from "@material-ui/icons/Cancel"; const useStyles = makeStyles(theme => ({ - root: { - flexGrow: 1, - }, - newMessageBox: { background: "#eee", display: "flex", + position: "relative", padding: "10px 13px", borderTopLeftRadius: 0, borderTopRightRadius: 0, @@ -35,33 +37,201 @@ const useStyles = makeStyles(theme => ({ width: "80%", }, - sendMessageIcon: { - opacity: "80%", + sendMessageIcons: { + color: "grey", margin: 4, - alignSelf: "middle", cursor: "pointer", "&:hover": { opacity: "70%", }, }, + + viewMediaInputWrapper: { + display: "flex", + padding: "10px 13px", + position: "relative", + borderTopLeftRadius: 0, + borderTopRightRadius: 0, + borderBottomLeftRadius: 0, + justifyContent: "space-between", + backgroundColor: "#eee", + }, + + emojiBox: { + position: "absolute", + bottom: 50, + borderTop: "1px solid #e8e8e8", + }, + + circleLoading: { + color: green[500], + position: "absolute", + top: 0, + left: "50%", + marginTop: 6, + marginBottom: 6, + marginLeft: -12, + }, })); -const MessagesInput = () => { +const MessagesInput = ({ selectedContact }) => { const classes = useStyles(); + const contactId = selectedContact.id; + const userId = localStorage.getItem("userId"); + const username = localStorage.getItem("username"); + const token = localStorage.getItem("token"); - return ( - - - -
- { + return () => { + setInputMessage(""); + setShowEmoji(false); + setMedia({}); + }; + }, [selectedContact]); + + const handleChangeInput = e => { + setInputMessage(e.target.value); + }; + + const handleAddEmoji = e => { + let emoji = e.native; + setInputMessage(prevState => prevState + emoji); + }; + + const handleChangeMedia = e => { + if (e.target.files.length) { + setMedia({ + preview: URL.createObjectURL(e.target.files[0]), + raw: e.target.files[0], + name: e.target.files[0].name, + }); + } + }; + + const handleInputPaste = e => { + if (e.clipboardData.files[0]) { + setMedia({ + preview: URL.createObjectURL(e.clipboardData.files[0]), + raw: e.clipboardData.files[0], + name: e.clipboardData.files[0].name, + }); + } + }; + + const handleUploadMedia = async e => { + setLoading(true); + e.preventDefault(); + const formData = new FormData(); + formData.append("media", media.raw); + formData.append("userId", userId); + formData.append("messageBody", media.name); + + try { + await api.post(`/messages/${contactId}`, formData, { + headers: { Authorization: "Bearer " + token }, + }); + } catch (err) { + console.log(err); + alert(err); + } + setLoading(false); + setMedia(mediaInitialState); + }; + + const handleSendMessage = async () => { + if (inputMessage.trim() === "") return; + const message = { + read: 1, + userId: userId, + mediaUrl: "", + messageBody: `${username}: ${inputMessage.trim()}`, + }; + try { + await api.post(`/messages/${contactId}`, message, { + headers: { Authorization: "Bearer " + token }, + }); + } catch (err) { + alert(err); + } + setInputMessage(""); + setShowEmoji(false); + }; + + if (media.preview) + return ( + + setMedia(mediaInitialState)} /> -
- - - ); + + {media.name} + {/* */} + + {loading ? ( +
+ +
+ ) : null} + + + ); + else { + return ( + + setShowEmoji(prevState => !prevState)} + /> + {showEmoji ? ( +
+ +
+ ) : null} + + +
+ { + if (e.key === "Enter") { + handleSendMessage(); + } + }} + /> +
+ + + ); + } }; export default MessagesInput; diff --git a/frontend/src/pages/Chat-Material/components/MessagesList/MessagesList.js b/frontend/src/pages/Chat-Material/components/MessagesList/MessagesList.js index f7d3edb..9d5119d 100644 --- a/frontend/src/pages/Chat-Material/components/MessagesList/MessagesList.js +++ b/frontend/src/pages/Chat-Material/components/MessagesList/MessagesList.js @@ -129,6 +129,12 @@ const useStyles = makeStyles(theme => ({ boxShadow: "0 2px 2px #808888", }, + textContentItem: { + alignSelf: "middle", + overflowWrap: "break-word", + padding: "3px 80px 6px 6px", + }, + messageMedia: { objectFit: "cover", width: 250, @@ -139,11 +145,6 @@ const useStyles = makeStyles(theme => ({ borderBottomRightRadius: 8, }, - textContentItem: { - overflowWrap: "break-word", - padding: "0px 60px 10px 0px", - }, - timestamp: { fontSize: 11, position: "absolute", @@ -168,6 +169,15 @@ const useStyles = makeStyles(theme => ({ alignSelf: "center", marginLeft: "0px", }, + + ackIcons: { + fontSize: 18, + }, + + ackDoneAllIcon: { + color: green[500], + fontSize: 18, + }, })); const MessagesList = ({ selectedContact }) => { @@ -264,8 +274,9 @@ const MessagesList = ({ selectedContact }) => { setMessagesList(prevState => { let aux = [...prevState]; let messageIndex = aux.findIndex(message => message.id === id); - aux[messageIndex].ack = message.ack; - + if (messageIndex) { + aux[messageIndex].ack = message.ack; + } return aux; }); }; @@ -307,16 +318,18 @@ const MessagesList = ({ selectedContact }) => { const renderMessageAck = message => { if (message.ack === 0) { - return ; + return ; } if (message.ack === 1) { - return ; + return ; } if (message.ack === 2) { - return ; + return ; } if (message.ack === 3) { - return ; + return ( + + ); } }; @@ -372,10 +385,9 @@ const MessagesList = ({ selectedContact }) => { const renderMessages = () => { if (messagesList.length > 0) { - let viewMessagesList = []; - messagesList.forEach((message, index) => { + const viewMessagesList = messagesList.map((message, index) => { if (message.userId === 0) { - viewMessagesList.push( + return [ renderDailyTimestamps(message, index),
{message.mediaUrl && checkMessaageMedia(message)} @@ -387,10 +399,10 @@ const MessagesList = ({ selectedContact }) => { .format("HH:mm")}
- - ); + , + ]; } else { - viewMessagesList.push( + return [ renderDailyTimestamps(message, index),
{message.mediaUrl && checkMessaageMedia(message)} @@ -403,8 +415,8 @@ const MessagesList = ({ selectedContact }) => { {renderMessageAck(message)}
- - ); + , + ]; } }); return viewMessagesList;