ErEduGilMor/screens/main/Home_page.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'

import Constants from 'expo-constants';
import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});


export function Home_page({navigation}) {

  const [threads, setThreads] = useState([]);  
  const [loading, setLoading] = useState(true);
  const [appointments, setAppointments] = useState([]); 

  const[interpreter, setState] = useState();

  const [expoPushToken, setExpoPushToken] = useState('');
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();


  useEffect(() => {
    registerForPushNotificationsAsync().then(token => setExpoPushToken(token));
    notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
      setNotification(notification);
    });

    responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
      console.log(response);
      if (response.notification.request.content.body == 'Le solicitan una cita'){
        navigation.navigate('Confirm');
      } 
    });

    const fire = firebase.firestore()
    .collection('THREADS')
    .where("members", "array-contains", firebase.auth().currentUser.uid)
    .onSnapshot(querySnapshot => {
      const threads = querySnapshot.docs.map(documentSnapshot => {
        return{
          _id:documentSnapshot.id,
          name:'',
          ...documentSnapshot.data()
        };
      });

      setThreads(threads);

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

    const cita = firebase.firestore().collection('APPOINTMENTS').where("participantes", "array-contains", firebase.auth().currentUser.uid).onSnapshot(snapShot => {
      const appointments = snapShot.docs.map(docSnap => {
        return{
          _id:docSnap.id,
          new:'',
          Day:'',
          Month:'',
          Time:'',
          i_token:'',
          u_token:'',
          ...docSnap.data()
        };
      });
      setAppointments(appointments);
      console.log("appointment", appointments);
    });

      
    return () => {
      Notifications.removeNotificationSubscription(notificationListener.current);
      Notifications.removeNotificationSubscription(responseListener.current);
      fire();
      cita();
    }
  }, []);
  
  if (loading) {
    return <Loading />;
  }
   
  
  const dimensions = Dimensions.get('window');
  const screenWidth = dimensions.width;

  
  function check_user_type_INT(){

    

    firebase.firestore()
    .collection("Interprete")
    .doc(firebase.auth().currentUser.uid)
    .get()
    .then((snapshot) => {
      if(snapshot.exists){
        setState(true);
      }
      else{
        setState(false);
      }
    })

    if(loading){
      setLoading(false);
    }

  }
  
  check_user_type_INT();
  console.log(interpreter);
  if(interpreter == false){
    return (
      <ImageBackground style={styles.stdcontainer} source={require('../../assets/yellow-white.jpg')}>
      <FlatList style={{
           flex: 1,
           width: screenWidth,
       }}
        data={appointments}
        keyExtractor = {item => item._id}
        ItemSeparatorComponent={() => <Divider />}
        renderItem = {({item}) => (
        <TouchableOpacity
        onPress={async () => {
          navigation.navigate('Cita', {appointment_id: item._id})
        }}
        >
          <List.Item
            title={item.Month}
            titleNumberOfLines={1}
            titleStyle={styles.listTitle}
            descriptionStyle={styles.listDescription}
            descriptionNumberOfLines={1}
          />
          <List.Item
            title={item.Day}
            titleNumberOfLines={1}
            titleStyle={styles.listTitle}
            descriptionStyle={styles.listDescription}
            descriptionNumberOfLines={1}
          />
          <List.Item
            title={item.Time}
            titleNumberOfLines={1}
            titleStyle={styles.listTitle}
            descriptionStyle={styles.listDescription}
            descriptionNumberOfLines={1}
          />
        </TouchableOpacity>
      )}
          />
        <Button
          title ='Hacer Busqueda'
          onPress= {() => navigation.navigate('Search')}
        />
        <Button
          title ='Logout'
          onPress= {() => firebase.auth().signOut()}
        />
          </ImageBackground>
      );
    }
    else{
      return (
        <ImageBackground style={styles.stdcontainer} source={require('../../assets/yellow-white.jpg')}>
        <FlatList style={{
             flex: 1,
             width: screenWidth,
         }}
          data={appointments}
          keyExtractor = {item => item._id}
          ItemSeparatorComponent={() => <Divider />}
          renderItem = {({item}) => (
          <TouchableOpacity
          onPress={async () => {
            navigation.navigate('Cita')
          }}
          >
            <List.Item
              title={item.Month}
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
            <List.Item
              title={item.Day}
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
            <List.Item
              title={item.Time}
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
          </TouchableOpacity>
        )}
            />


            <FlatList style={{
             flex: 1,
             width: screenWidth,
         }}
          data={appointments}
          keyExtractor = {item => item._id}
          ItemSeparatorComponent={() => <Divider />}
          renderItem={({ item }) => {
            if(item.new){
            return (
              <Button
              title ='Pedir Cita'
              onPress={ async () => {
                await sendPushNotification(item.i_token);
                }
              }
            /> 
            )
          }}}
            />


          <Button
          title ='Availability'
          onPress= {() => navigation.navigate('Availability')}
        />
          <Button
            title ='Logout'
            onPress= {() => firebase.auth().signOut()}
          />
            </ImageBackground>
        );
      }
  }
// Can use this function below, OR use Expo's Push Notification Tool-> https://expo.dev/notifications
async function sendPushNotification(expoPushToken) {
  const message = {
    to: expoPushToken,
    sound: 'default',
    title: 'Freehand',
    body: 'Le solicitan una cita',
    data: { someData: 'goes here' },
  };

  await fetch('https://exp.host/--/api/v2/push/send', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Accept-encoding': 'gzip, deflate',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(message),
  });
}

async function registerForPushNotificationsAsync() {
  let token;
  if (Constants.isDevice) {
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
    console.log('Token:')
    console.log(token);
  } else {
    alert('Must use physical device for Push Notifications');
  }

  if (Platform.OS === 'android') {
    Notifications.setNotificationChannelAsync('default', {
      name: 'default',
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#FF231F7C',
    });
  }

  firebase.firestore().collection('Interprete').doc(firebase.auth().currentUser.uid).update({'push_token': token})
  firebase.firestore().collection('Users').doc(firebase.auth().currentUser.uid).update({'push_token': token})

  return token;
}

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

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