Max#cache de mensagens

src/Components/Chat/chatContainer.js

@@ -1,14 +1,17 @@
+/* eslint-disable react-native/no-inline-styles */
 import React from "react"
 
 import { View, FlatList } from "react-native"
 import getTime from "~/functions/getTime"
 import Message from "../mensagem"
 
 const Chat = props => {
-  const { messages, destUserUid } = props
+  const { messages, destUserUid, onLoadMore } = props
   return (
     <View>
       <FlatList
+        onEndReached={onLoadMore}
+        onEndReachedThreshold={0.1}
         data={messages}
         inverted
         keyExtractor={item => item.key}

src/Screens/Chat/chat.js

@@ -1,7 +1,14 @@
+/* eslint-disable react-native/no-inline-styles */
 /* eslint-disable camelcase */
 import React, { Component } from "react"
 
-import { View, StyleSheet, StatusBar, BackHandler } from "react-native"
+import {
+  View,
+  StyleSheet,
+  StatusBar,
+  BackHandler,
+  ActivityIndicator
+} from "react-native"
 import {
   ProviderTypes,
   TranslatorConfiguration,
@@ -29,7 +36,10 @@ export default class Conversas extends Component {
       userData: null,
       isValueNull: true,
       destUser: navigation.getParam("item"),
-      status: ""
+      status: "",
+      numMsgsRender: 20,
+      isRefreshing: false,
+      load: true
     }
     const { user, destUser } = this.state
     this.ref = firebase
@@ -69,13 +79,15 @@ export default class Conversas extends Component {
   }
 
   componentDidMount() {
+    const { numMsgsRender } = this.state
     BackHandler.addEventListener("hardwareBackPress", this.handleBackPress)
     this.unsubscribeDest = this.userDest.onSnapshot(() => {
       this.getTime()
     })
     this.unsubscribe = this.ref
       .collection("messages")
       .orderBy("date", "desc")
+      .limit(numMsgsRender)
       .onSnapshot(querySnapshot => {
         const messages = []
         querySnapshot.forEach(doc => {
@@ -103,6 +115,44 @@ export default class Conversas extends Component {
     this.unsubscribe()
   }
 
+  handleLoadMore = () => {
+    const { numMsgsRender, load } = this.state
+
+    this.ref
+      .collection("messages")
+      .get()
+      .then(doc => {
+        if (numMsgsRender >= doc.size) {
+          this.setState({ load: false })
+        } else {
+          this.setState({ load: true })
+        }
+      })
+    if (load) {
+      this.setState({ isRefreshing: true })
+      this.setState({ numMsgsRender: numMsgsRender + 30 })
+      this.ref
+        .collection("messages")
+        .orderBy("date", "desc")
+        .limit(numMsgsRender)
+        .get()
+        .then(doc => {
+          const messages = []
+          doc.forEach(msgs => {
+            const { content, contentTranslated, date, source } = msgs.data()
+            messages.push({
+              key: msgs.id,
+              content,
+              contentTranslated,
+              date: date.toDate(),
+              source
+            })
+          })
+          this.setState({ isRefreshing: false, messages })
+        })
+    }
+  }
+
   handleBackPress = () => {
     const { navigation } = this.props
     navigation.goBack()
@@ -255,7 +305,14 @@ export default class Conversas extends Component {
   }
 
   render() {
-    const { messages, messageText, isValueNull, destUser, status } = this.state
+    const {
+      messages,
+      messageText,
+      isValueNull,
+      destUser,
+      status,
+      isRefreshing
+    } = this.state
     const { navigation } = this.props
     // firebase.auth().signOut()
     return (
@@ -268,7 +325,16 @@ export default class Conversas extends Component {
           status={status}
         />
         <View style={styles.chatContainer}>
-          <ChatContainer messages={messages} destUserUid={destUser.key}/>
+          {isRefreshing && (
+            <View style={{ width: "100%" }}>
+              <ActivityIndicator size="small" color="#0000ff" />
+            </View>
+          )}
+          <ChatContainer
+            onLoadMore={this.handleLoadMore}
+            messages={messages}
+            destUserUid={destUser.key}
+          />
         </View>
         <View style={styles.input}>
           <ChatInput