ErEduGilMor/screens/main/Cita.js

import React, {useState, useEffect, useRef} from 'react'
import { Button, Text, View, StyleSheet, Dimensions} from 'react-native'
import {FlatList, ListViewBase } from 'react-native'
import {TouchableOpacity} from 'react-native-gesture-handler'
import {List, Divider} from 'react-native-paper'
import Loading from './Loading'
import firebase from 'firebase';
import { styles } from "../../config/styles";
import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground} from "react-native";

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux' 
import { fetchUser } from '../../redux/actions/index'


export function Cita({route, navigation}) {
   const [threads, setThreads] = useState([]);  
   const [loading, setLoading] = useState(true);
   console.log("ID", route.params);



 useEffect(() => { 
    const fire = firebase.firestore()
    .collection('THREADS')
    .where("cita", "==", route.params.tag._id)
    .onSnapshot(querySnapshot => {
      const threads = querySnapshot.docs.map(documentSnapshot => {
        return{
          _id:documentSnapshot.id,
          name:'',
          ...documentSnapshot.data()
        };
      });

      setThreads(threads);
      console.log(threads);

      if(loading){
        setLoading(false);
      }
    });

    return () => {
      fire();
    }
  }, []);
    

  
  

  const dimensions = Dimensions.get('window');
  const screenWidth = dimensions.width;

  
  return (
      <ImageBackground style={styles.stdcontainer} source={require('../../assets/yellow-white.jpg')}>
        <FlatList style={{
             flex: 1,
             width: screenWidth,
         }}
          data={threads}
          keyExtractor = {item => item._id}
          ItemSeparatorComponent={() => <Divider />}
          renderItem = {({item}) => (
          <TouchableOpacity
            onPress={() => navigation.navigate('Room', {thread: item})}
          >
            <List.Item
              title={item.name}
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
          </TouchableOpacity>
        )}
        />
      <Button
        title ='Ver mapa'
        onPress= {() => navigation.navigate('Map')}
      />
      <Button
        title ='Logout'
        onPress= {() => firebase.auth().signOut()}
      />
        </ImageBackground>
    );
  }


const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser
})
const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch);

export default connect(mapStateToProps, mapDispatchProps)(Cita);