Usando o Firestore para criar um Chat com React Native | Alura Cursos Online

Usando o Firestore para criar um Chat com React Native | Alura Cursos Online

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore"; //* for Cloud Firestore
// Adicione aqui as suas credenciais do Firebase
const firebaseConfig = {
apiKey: "AIzaSyAGzPAA-cySp5C_xYdkdNZEiJ3NuB8MwzA",
authDomain: "chat--firebase-662ad.firebaseapp.com",
projectId: "chat--firebase-662ad",
storageBucket: "chat--firebase-662ad.appspot.com",
messagingSenderId: "504224726320",
appId: "1:504224726320:web:f554081115ca495bf79cf5"
};
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const database = getFirestore(app);

import { View , Text, TextInput, Button} from "react-native";
import { styles } from "./styles";
import { useState } from "react";


export default function Login({ navigation }) {
const [name, setName] = useState('');



return (
    &lt;View style={styles.container}&gt;
       
            &lt;View style={styles.boxInput}&gt;
                &lt;Text&gt;Nome de Usuário&lt;/Text&gt;
               
                &lt;TextInput
                    style={styles.input}
                    onChangeText={setName}    
                /&gt;
            &lt;/View&gt;

            &lt;Button
                title=&quot;Entrar&quot;
                onPress={() =&gt; navigation.navigate(&#39;Chat&#39;, { name: name })}
            /&gt;
        
    &lt;/View&gt;
)

import { useRoute } from "@react-navigation/native";


import { GiftedChat } from 'react-native-gifted-chat'
import { useCallback, useEffect, useState } from "react";


//importação do firebase e database
import { collection, addDoc,onSnapshot, query,orderBy } from "firebase/firestore";
import { database } from "../config/firebase";

    //função que aciona assim que envia a mensagem no aplicativo
    const mensagemEnviada = useCallback((messages = []) => {
        setMessages(previousMessages =>{
              GiftedChat.append(previousMessages, messages)
            }
        );
        const { _id, createdAt, text, user } = messages[0];

    addDoc(collection(database, &quot;chats&quot;), {
        _id,
        createdAt,
        text,
        user,
    });
}, []);

    useEffect(() => {
        async function getMessages() {
            const values = query(collection(database, 'chats'), orderBy('createdAt', 'desc'));
            onSnapshot(values, (snapshot) => setMessages(
                snapshot.docs.map(doc => ({
                    _id: doc.data()._id,
                    createdAt: doc.data().createdAt.toDate(),
                    text: doc.data().text,
                    user: doc.data().user,
                }))
            ));
        }
        getMessages();
    }, []);

import { useRoute } from "@react-navigation/native";


import { GiftedChat } from 'react-native-gifted-chat'
import { useCallback, useEffect, useState } from "react";




//importação do firebase e database
import { collection, addDoc,onSnapshot, query,orderBy } from "firebase/firestore";
import { database }  ;




   () {
 [messages, setMessages] = ([]);
 route = ();
 { name } = route.;



(() =&gt; {
      () {
         values = ((database, &#;chats&#;), (&#;createdAt&#;, &#;desc&#;));
        (values, (snapshot) =&gt; (
            snapshot..(doc =&gt; ({
                : doc.().,
                : doc.()..(),
                : doc.().,
                : doc.().,
            }))
        ));
    }
    ();
}, []);


 mensagemEnviada = ((messages = []) =&gt; {
    (previousMessages =&gt;{
          .(previousMessages, messages)
        }
    );
     { _id, createdAt, text, user } = messages[];
    ((database, &quot;chats&quot;), {
        _id,
        createdAt,
        text,
        user,
    });
}, []);

 (
    &lt;
      messages={messages}
      onSend={msg =&gt; (msg)}
      user={{
            : name,
        }}
    /&gt;
)