Max#mensagens nao lidas

src/Screens/Chat/chat.js

@@ -7,7 +7,6 @@ import {
   TranslatorConfiguration,
   TranslatorFactory
 } from "react-native-power-translator"
-
 import firebase from "react-native-firebase"
 import ChatInput from "../../Components/Chat/chatInput"
 import ChatHeader from "../../Components/Chat/chatHeader"
@@ -78,13 +77,19 @@ export default class Conversas extends Component {
             date: date.toDate(),
             source
           })
+          this.ref.get().then(conversa => {
+            if (conversa.exists) {
+              this.ref.update({ unreadMsgs: false, numUnreadMsgs: 0 })
+            }
+          })
         })
         this.setState({ messages })
       })
   }
 
   componentWillUnmount() {
     BackHandler.removeEventListener("hardwareBackPress", this.handleBackPress)
+    this.unsubscribe()
   }
 
   handleBackPress = () => {
@@ -97,65 +102,106 @@ export default class Conversas extends Component {
     this.setState({ messageText: text, isValueNull: false })
   }
 
-  sendMessage = () => {
-    const { destUser, user, userData, messageText } = this.state
-
-    this.ref.set({
-      userKey: destUser.key,
-      contactName: destUser.contactName,
-      contactPhoto: destUser.contactPhoto
-    })
-    this.refDest.set({
-      userKey: user,
-      contactName: userData.phone,
-      contactPhoto: userData.profile_img_url
-    })
-
-    const newMessage = {
-      content: messageText,
-      date: firebase.database().getServerTime(),
-      source: "1"
+  proccessLastMsg = string => {
+    let strProcs = ""
+    if (string.length >= 25) {
+      strProcs = `${string.substr(0, 25)}...`
+    } else {
+      strProcs = string
     }
+    return strProcs
+  }
 
-    this.ref
-      .collection("messages")
-      .add({
-        content: newMessage.content,
-        date: newMessage.date,
-        source: newMessage.source
+  sendMessage = () => {
+    const { destUser, user, messageText } = this.state
+    if (messageText === "") {
+      this.setState({ isValueNull: true })
+    } else {
+      const newMessage = {
+        content: messageText,
+        date: firebase.database().getServerTime(),
+        source: "1"
+      }
+
+      this.ref.get().then(doc => {
+        if (!doc.exists) {
+          this.ref.set({
+            userKey: destUser.key,
+            unreadMsgs: false,
+            numUnreadMsgs: 0,
+            lastMessage: this.proccessLastMsg(newMessage.content),
+            dateLastMessage: newMessage.date,
+            contactName: destUser.contactName,
+            contactPhoto: destUser.contactPhoto
+          })
+        } else {
+          this.ref.update({
+            lastMessage: this.proccessLastMsg(newMessage.content),
+            dateLastMessage: newMessage.date
+          })
+        }
       })
-      .then(() => true)
-      .catch(error => error)
 
-    firebase
-      .firestore()
-      .collection("users")
-      .doc(destUser.key)
-      .get()
-      .then(doc => {
-        // eslint-disable-next-line camelcase
-        const { language_code } = doc.data()
-        TranslatorConfiguration.setConfig(
-          ProviderTypes.Google,
-          "AIzaSyC0j0BsAskqVIvaX2fcdvjsaw4fqGP5ut8",
-          language_code
-        )
-        const translator = TranslatorFactory.createTranslator()
-        translator.translate(messageText, language_code).then(translated => {
-          this.refDest
-            .collection("messages")
-            .add({
-              content: newMessage.content,
-              date: newMessage.date,
-              contentTranslated: translated,
-              source: "2"
+      this.ref
+        .collection("messages")
+        .add({
+          content: newMessage.content,
+          date: newMessage.date,
+          source: newMessage.source
+        })
+        .then(() => true)
+        .catch(error => error)
+      firebase
+        .firestore()
+        .collection("users")
+        .doc(destUser.key)
+        .get()
+        .then(doc => {
+          // eslint-disable-next-line camelcase
+          const { language_code } = doc.data()
+          TranslatorConfiguration.setConfig(
+            ProviderTypes.Google,
+            "AIzaSyC0j0BsAskqVIvaX2fcdvjsaw4fqGP5ut8",
+            language_code
+          )
+          const translator = TranslatorFactory.createTranslator()
+          translator.translate(messageText, language_code).then(translated => {
+            this.refDest.get().then(conversa => {
+              if (!conversa.exists) {
+                this.refDest.set({
+                  userKey: user,
+                  unreadMsgs: true,
+                  numUnreadMsgs: 1,
+                  lastMessage: this.proccessLastMsg(translated),
+                  dateLastMessage: newMessage.date,
+                  contactName: userData.phone,
+                  contactPhoto: userData.profile_img_url
+                })
+              } else {
+                const { numUnreadMsgs } = conversa.data()
+                this.refDest.update({
+                  numUnreadMsgs: numUnreadMsgs + 1,
+                  unreadMsgs: true,
+                  lastMessage: this.proccessLastMsg(translated),
+                  dateLastMessage: newMessage.date
+                })
+              }
             })
-            .then(() => true)
-            .catch(error => error)
+            this.refDest
+              .collection("messages")
+              .add({
+                content: newMessage.content,
+                date: newMessage.date,
+                contentTranslated: translated,
+                source: "2"
+              })
+              .then(() => true)
+              .catch(error => error)
+          })
         })
-      })
 
-    this.setState({ messageText: "", isValueNull: true })
+      this.setState({ messageText: "", isValueNull: true })
+    }
   }
 
   render() {

src/Screens/Conversas/conversas.js

@@ -14,6 +14,7 @@ import { ListItem, Icon } from "react-native-elements"
 import LinearGradient from "react-native-linear-gradient"
 import firebase from "react-native-firebase"
 import AsyncStorage from "@react-native-community/async-storage"
+import getTime from "~/functions/getTime"
 
 export default class Conversas extends Component {
   constructor() {
@@ -23,7 +24,6 @@ export default class Conversas extends Component {
       myName: "",
       myPicture: null
     }
-    this.lastMessage = null
 
     this.ref = firebase
       .firestore()
@@ -44,41 +44,56 @@ export default class Conversas extends Component {
 
   componentWillUnmount() {
     BackHandler.removeEventListener("hardwareBackPress", this.handleBackPress)
+    this.unsubscribe()
   }
 
   handleBackPress = () => {
     return true
   }
 
   getData = async () => {
-    this.ref.collection("conversas").onSnapshot(querySnapshot => {
-      AsyncStorage.getItem("@contacts").then(contactsResponse => {
-        const contacts = JSON.parse(contactsResponse)
-        const conversas = []
-        querySnapshot.forEach(doc => {
-          let find = false
-          const { contactPhoto, contactName } = doc.data()
-          contacts.forEach(contact => {
-            if (contact.key === doc.id) {
+    this.unsubscribe = this.ref.collection("conversas").onSnapshot(querySnapshot => {
+    AsyncStorage.getItem("@contacts").then(contactsResponse => {
+      const contacts = JSON.parse(contactsResponse)
+          const conversas = []
+          querySnapshot.forEach(doc => {
+            let find = false
+            contacts.forEach(contact => {
+              const { contactPhoto, contactName } = doc.data()
+              if (contact.key === doc.id) {
+                const {
+                  numUnreadMsgs,
+                  unreadMsgs,
+                  lastMessage,
+                  dateLastMessage
+                } = doc.data()
+                conversas.push({
+                  contact,
+                  key: doc.id,
+                  contactPhoto,
+                  contactName: contact.contactName,
+                  unreadMsgs,
+                  numUnreadMsgs,
+                  lastMessage,
+                  dateLastMessage
+                })
+                find = true
+              }
+            })
+            if (find === false) {
               conversas.push({
-                contact,
                 key: doc.id,
                 contactPhoto,
-                contactName: contact.contactName
+                contactName,
+                unreadMsgs,
+                numUnreadMsgs,
+                lastMessage,
+                dateLastMessage
               })
-              find = true
             }
           })
-          if (find === false) {
-            conversas.push({
-              key: doc.id,
-              contactPhoto,
-              contactName
-            })
-          }
+          this.setState({ conversas })
         })
-        this.setState({ conversas })
-      })
     })
   }
 
@@ -133,6 +148,24 @@ export default class Conversas extends Component {
 
   search = () => {}
 
+  parseTime = dateNanoScds => {
+    const date = dateNanoScds.toDate()
+    const atualDate = firebase.database().getServerTime()
+    let textDate = ""
+    if (atualDate.getDate() - date.getDate() === 0) {
+      textDate = getTime(date)
+    } else if (atualDate.getDate() - date.getDate() === 1) {
+      textDate = "Ontem"
+    } else if (atualDate.getDate() - date.getDate() >= 2) {
+      textDate = `${date
+        .getDate()
+        .toString()}/${date
+        .getMonth()
+        .toString()}/${date.getFullYear().toString()}`
+    }
+    return textDate
+  }
+
   render() {
     const { conversas, myName, myPicture } = this.state
     return (
@@ -169,13 +202,19 @@ export default class Conversas extends Component {
                     <Text style={styles.name}>{item.contactName}</Text>
                     <Text style={styles.lastMsg}>{item.lastMessage}</Text>
                     <View style={styles.rightInformation}>
-                      <Text style={styles.data}>{item.lastMessage}</Text>
-                      <LinearGradient
-                        colors={["#547BF0", "#6AC3FB"]}
-                        style={styles.cont}
-                      >
-                        <Text style={styles.unread}>{item.unread}</Text>
-                      </LinearGradient>
+                      <Text style={styles.data}>
+                        {this.parseTime(item.dateLastMessage)}
+                      </Text>
+                      {item.unreadMsgs && (
+                        <LinearGradient
+                          colors={["#547BF0", "#6AC3FB"]}
+                          style={styles.cont}
+                        >
+                          <Text style={styles.unread}>
+                            {item.numUnreadMsgs}
+                          </Text>
+                        </LinearGradient>
+                      )}
                     </View>
                   </View>
                 }