Vamos a empezar con cambios para nueva coleccion de chats

App.js

@@ -10,6 +10,7 @@ import { Text, View } from 'react-native';
 import { styles } from './config/styles';
 
 import HomeScreen from './screens/main/Home_page';
+import RoomScreen from './screens/main/RoomScreen'
 import { Provider} from 'react-redux'
 import { createStore, applyMiddleware } from 'redux';
 import rootReducer from './redux/reducers'
@@ -77,6 +78,7 @@ export class App extends Component {
         <NavigationContainer>
           <Stack.Navigator initialRouteName="Home">
             <Stack.Screen name="Home" component={HomeScreen} />
+            <Stack.Screen name="Room" component={RoomScreen} options={({ route }) => ({ title: route.params.thread.name })} />
           </Stack.Navigator>
         </NavigationContainer>
       </Provider>

package-lock.json

@@ -14,6 +14,7 @@
         "react": "16.13.1",
         "react-dom": "16.13.1",
         "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+        "react-native-gifted-chat": "^0.16.3",
         "react-native-paper": "^4.9.2",
         "react-native-web": "~0.13.12",
         "react-redux": "^7.2.5",
@@ -9267,6 +9268,11 @@
         "react": "16.13.1"
       }
     },
+    "node_modules/react-native-communications": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-communications/-/react-native-communications-2.2.1.tgz",
+      "integrity": "sha1-eIO1ayCgAu63kMET+GFuqGksp5U="
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz",
@@ -9295,6 +9301,77 @@
         "ua-parser-js": "^0.7.18"
       }
     },
+    "node_modules/react-native-gifted-chat": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/react-native-gifted-chat/-/react-native-gifted-chat-0.16.3.tgz",
+      "integrity": "sha512-7EJKQPzzg1yIbLFNq9n5bGJWZ7Woi2bTeT7M4EVSChmFF/qyNos+gFxEcafPkEihEeIxeOne6hBQlYNKmDABgA==",
+      "dependencies": {
+        "@expo/react-native-action-sheet": "^3.6.0",
+        "dayjs": "^1.8.26",
+        "prop-types": "^15.7.2",
+        "react-native-communications": "^2.2.1",
+        "react-native-iphone-x-helper": "^1.2.1",
+        "react-native-lightbox": "^0.8.1",
+        "react-native-parsed-text": "0.0.22",
+        "react-native-typing-animation": "^0.1.7",
+        "uuid": "3.4.0"
+      },
+      "peerDependencies": {
+        "dayjs": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-gifted-chat/node_modules/@expo/react-native-action-sheet": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/@expo/react-native-action-sheet/-/react-native-action-sheet-3.12.0.tgz",
+      "integrity": "sha512-tuc8mJmDeCc1q/U2q+IJ9pKeIZL/JJoHYBf34Vor1aabfk8m+/LSDlCCi4MVFIU1fHHwgNQyuDbGhsanYPJFRw==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-native-gifted-chat/node_modules/react-native-iphone-x-helper": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+      "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
+      "peerDependencies": {
+        "react-native": ">=0.42.0"
+      }
+    },
+    "node_modules/react-native-gifted-chat/node_modules/react-native-parsed-text": {
+      "version": "0.0.22",
+      "resolved": "https://registry.npmjs.org/react-native-parsed-text/-/react-native-parsed-text-0.0.22.tgz",
+      "integrity": "sha512-hfD83RDXZf9Fvth3DowR7j65fMnlqM9PpxZBGWkzVcUTFtqe6/yPcIoIAgrJbKn6YmtzkivmhWE2MCE4JKBXrQ==",
+      "dependencies": {
+        "prop-types": "^15.7.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-gifted-chat/node_modules/react-native-typing-animation": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/react-native-typing-animation/-/react-native-typing-animation-0.1.7.tgz",
+      "integrity": "sha512-4H3rF9M+I2yAZpYJcY0Mb29TXkn98QK12rrKSY6LZj1BQD9NNmRZuNXzwX4XHapsIz+N/J8M3p27FOQPbfzqeg==",
+      "peerDependencies": {
+        "prop-types": "*",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-lightbox": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/react-native-lightbox/-/react-native-lightbox-0.8.1.tgz",
+      "integrity": "sha512-TFZA6iKEEHpAUIXjMTRb6vx0/9rHgEKy3ZBiRAy295PwldYg5c8opwnbyURLIl522ykeqhVx9uGdXjSMIowLvA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "node_modules/react-native-paper": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.9.2.tgz",
@@ -19462,6 +19539,11 @@
         }
       }
     },
+    "react-native-communications": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-native-communications/-/react-native-communications-2.2.1.tgz",
+      "integrity": "sha1-eIO1ayCgAu63kMET+GFuqGksp5U="
+    },
     "react-native-gesture-handler": {
       "version": "1.10.3",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz",
@@ -19492,6 +19574,61 @@
         }
       }
     },
+    "react-native-gifted-chat": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/react-native-gifted-chat/-/react-native-gifted-chat-0.16.3.tgz",
+      "integrity": "sha512-7EJKQPzzg1yIbLFNq9n5bGJWZ7Woi2bTeT7M4EVSChmFF/qyNos+gFxEcafPkEihEeIxeOne6hBQlYNKmDABgA==",
+      "requires": {
+        "@expo/react-native-action-sheet": "^3.6.0",
+        "dayjs": "^1.8.26",
+        "prop-types": "^15.7.2",
+        "react-native-communications": "^2.2.1",
+        "react-native-iphone-x-helper": "^1.2.1",
+        "react-native-lightbox": "^0.8.1",
+        "react-native-parsed-text": "0.0.22",
+        "react-native-typing-animation": "^0.1.7",
+        "uuid": "3.4.0"
+      },
+      "dependencies": {
+        "@expo/react-native-action-sheet": {
+          "version": "3.12.0",
+          "resolved": "https://registry.npmjs.org/@expo/react-native-action-sheet/-/react-native-action-sheet-3.12.0.tgz",
+          "integrity": "sha512-tuc8mJmDeCc1q/U2q+IJ9pKeIZL/JJoHYBf34Vor1aabfk8m+/LSDlCCi4MVFIU1fHHwgNQyuDbGhsanYPJFRw==",
+          "requires": {
+            "@types/hoist-non-react-statics": "^3.3.1",
+            "hoist-non-react-statics": "^3.3.0"
+          }
+        },
+        "react-native-iphone-x-helper": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
+          "integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg==",
+          "requires": {}
+        },
+        "react-native-parsed-text": {
+          "version": "0.0.22",
+          "resolved": "https://registry.npmjs.org/react-native-parsed-text/-/react-native-parsed-text-0.0.22.tgz",
+          "integrity": "sha512-hfD83RDXZf9Fvth3DowR7j65fMnlqM9PpxZBGWkzVcUTFtqe6/yPcIoIAgrJbKn6YmtzkivmhWE2MCE4JKBXrQ==",
+          "requires": {
+            "prop-types": "^15.7.x"
+          }
+        },
+        "react-native-typing-animation": {
+          "version": "0.1.7",
+          "resolved": "https://registry.npmjs.org/react-native-typing-animation/-/react-native-typing-animation-0.1.7.tgz",
+          "integrity": "sha512-4H3rF9M+I2yAZpYJcY0Mb29TXkn98QK12rrKSY6LZj1BQD9NNmRZuNXzwX4XHapsIz+N/J8M3p27FOQPbfzqeg==",
+          "requires": {}
+        }
+      }
+    },
+    "react-native-lightbox": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/react-native-lightbox/-/react-native-lightbox-0.8.1.tgz",
+      "integrity": "sha512-TFZA6iKEEHpAUIXjMTRb6vx0/9rHgEKy3ZBiRAy295PwldYg5c8opwnbyURLIl522ykeqhVx9uGdXjSMIowLvA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-native-paper": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/react-native-paper/-/react-native-paper-4.9.2.tgz",

package.json

@@ -17,6 +17,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
+    "react-native-gifted-chat": "^0.16.3",
     "react-native-paper": "^4.9.2",
     "react-native-web": "~0.13.12",
     "react-redux": "^7.2.5",

screens/main/Home_page.js

@@ -117,7 +117,6 @@ export function Home_page({navigation}) {
             >
             <List.Item
               title={item.name}
-              description='Item description'
               titleNumberOfLines={1}
               titleStyle={styles.listTitle}
               descriptionStyle={styles.listDescription}

screens/main/RoomScreen.js

@@ -0,0 +1,132 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { GiftedChat } from 'react-native-gifted-chat';
+import firebase from 'firebase';
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { fetchUser } from '../../redux/actions/index'
+
+export function RoomScreen({ route }) {
+  //const { currentUser } = props;
+  const { thread } = route.params;
+  /*const [messages, setMessages] = useState([
+    /**
+     * Mock message data
+     */
+    // example of system message
+   /* {
+      _id: 0,
+      text: 'New room created.',
+      createdAt: new Date().getTime(),
+      system: true
+    },
+    // example of chat message
+    {
+      _id: 1,
+      text: 'Henlo!',
+      createdAt: new Date().getTime(),
+      user: {
+        _id: 2,
+        name: 'Test User'
+      }
+    }
+  ]);*/
+
+  const [messages, setMessages] = useState([])
+
+
+  /** the useEffect is used when we first render the component
+   *  solo va a corrar al principio.
+   */
+  useEffect(() => {
+    //readUser()
+    const unsubscribe = firebase.firestore() 
+    .collection('Users')
+    .doc(firebase.auth().currentUser.uid)
+    .collection('THREADS')
+    .doc(thread._id)
+    .collection('MESSAGES')
+    .onSnapshot(querySanpshot => {
+      const messageFirestore = querySanpshot
+        .docChanges() //para traer solo lo que haya cambiado
+        .filter(({ type }) => type == 'added') //el objeto tiene un prop added, ese es el que queremos
+        .map(({ doc }) => {
+          const message = doc.data()
+          return { ...message, createdAt: new Date().getTime() }
+        })
+        .sort((a, b) => b.createdAt - a.createdAt)
+    appendMessages(messageFirestore) //Para meter el mensaje en el estado messages
+    })
+    return () => unsubscribe()
+  }, [])
+
+
+  const appendMessages = useCallback((messages) => {
+    setMessages((previousMessages) => GiftedChat.append(previousMessages, messages))
+  }, [messages])
+
+  async function handleSend(messages) {
+    const writes = messages.map(m => firebase.firestore() 
+    .collection('Users')
+    .doc(firebase.auth().currentUser.uid)
+    .collection('THREADS')
+    .doc(thread._id)
+    .collection('MESSAGES').add(m))
+    await Promise.all(writes)
+  }
+
+  /*async function handleSend(messages, newMessage = []) {
+    const text = messages[0].text;
+    setMessages(GiftedChat.append(messages, newMessage));
+
+  //aqui podemos usar current user que no lo hemos usado, ya tenemos conectado redux
+    firebase.firestore() 
+      .collection('Users')
+      .doc(firebase.auth().currentUser.uid)
+      .collection('THREADS')
+      .doc(thread._id)
+      .collection('MESSAGES')
+      .add({
+        text,
+        createdAt: new Date().getTime(),
+      });
+
+    //Esto se ve, pero no genraliza, solo funciona desde currentUser y se graba en la otra cuenta, 
+    //pero la otra cuenta no puede responder porque pasa a ser current user. 
+    //Ademas no guarda que usuario dijo que.
+      firebase.firestore() 
+      .collection('Users')
+      .doc('HGGAJlcIfwdpUoYfcBKLZFcDude2')
+      .collection('THREADS')
+      .doc(thread._id)
+      .collection('MESSAGES')
+      .add({
+        text,
+        createdAt: new Date().getTime(),
+      });
+  }*/
+
+  // helper method that is sends a message
+  /*function handleSend(newMessage = []) {
+    setMessages(GiftedChat.append(messages, newMessage));
+  }*/
+
+  return (
+    /*<GiftedChat
+      messages={messages}
+      onSend={newMessage => handleSend(messages, newMessage)}
+      user={{ _id: 1 }}
+      showUserAvatar
+      alwaysShowSend
+      scrollToBottom
+    />*/
+
+    <GiftedChat messages={messages} user={{ _id: 1 }} onSend={handleSend} />
+  );
+}
+
+
+const mapStateToProps = (store) => ({
+  currentUser: store.userState.currentUser,
+})
+const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch);
+export default connect(mapStateToProps, mapDispatchProps)(RoomScreen);