<file_sep>import React from 'react';
import { Alert, StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import { Facebook } from 'expo';

const FB_APP_ID = 'fb297781467791687';
//facebook links used:
//https://docs.expo.io/versions/latest/sdk/facebook/
//https://www.youtube.com/watch?v=ThcelIFSMWQ
//https://stackoverflow.com/questions/38261112/facebook-redirect-uri-set-to-ios-url-scheme

export default class FirstPage extends React.Component {

  //for facebook login
  async logIn() {
    try {
          const {
            type,
            token,
            expires,
            permissions,
            declinedPermissions,
          } = await Facebook.logInWithReadPermissionsAsync('297781467791687', {
            permissions: ['public_profile'],
          });
          if (type === 'success') {
            // Get the user's name using Facebook's Graph API
            const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`);
            Alert.alert('Logged in!', `Hi ${(await response.json()).name}!`);
            this.props.navigation.navigate('Home');
          } else {
            // type === 'cancel'
          }
        } catch ({ message }) {
          alert(`Facebook Login Error: ${message}`);
        }
      }
    render() {
      return (
        <View style={styles.container}>
          <Text style = {styles.text}>My TODO List</Text>
          <Image style = {styles.logo} source ={require('../images/logo.png')}/>
          <TouchableOpacity style = {styles.button} onPress={()=>{this.logIn()}}>
            <Text style = {styles.buttonText}>Login</Text>
          </TouchableOpacity>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex:1,
      justifyContent: 'space-evenly',
      alignItems: 'center',
      backgroundColor: 'white',
    },
    text: {
      color: '#000000',
      fontSize: 36,
      textAlign: 'center',
    },
    logo:{
      width: 200,
      height: 200,
      resizeMode: 'contain',
      justifyContent:'center',
    },
    button:{
      backgroundColor: '#F89E22',
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.8,
      shadowRadius: 2,
      elevation: 1,
      width: 150,
      height: 80,
      justifyContent: 'center'
    },
    buttonText:{
      fontSize: 25,
      textAlign: 'center',
      justifyContent: 'center'
    }
  });<file_sep>import React from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity, Image } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class HomeScreen extends React.Component {

    //https://medium.freecodecamp.org/how-to-build-a-nested-drawer-menu-with-react-native-a1c2fdcab6c9

    static navigationOptions = {
        title: 'Home',
        headerStyle: {
          backgroundColor: '#59ADFF',
        },
        headerRight: (
            <TouchableOpacity onPress={() => alert('Search something!')}>
            <Image style = {{margin: 10}} source ={require('../images/search-24px.png')}/>
        </TouchableOpacity>
        ),
        headerLeft: (
            <TouchableOpacity  onPress={() => alert('This is the menu!')}>
                <Image style = {{margin: 10}} source ={require('../images/menu-24px.png')}/>
            </TouchableOpacity>
          ),
        headerTintColor: '#000',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      };

    render() {
      return (
        <View style={styles.container}>
          <Text style = {styles.text}>Hello, !</Text>

          <View style={styles.navigationControls}>
            <TouchableOpacity style = {[styles.button, {backgroundColor: '#F89E22'}]} onPress={()=>{this.props.navigation.navigate('ViewCalendar');}}>
                <Text style = {styles.buttonText}>View Calendar</Text>
            </TouchableOpacity>

            <TouchableOpacity style = {[styles.button, {backgroundColor: '#22F885'}]} onPress={()=>{this.props.navigation.navigate('AddNewEvent');}}>
                <Text style = {styles.buttonText}>Add New Event or Task</Text>
            </TouchableOpacity>
          </View>
          
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex:1,
      justifyContent: 'space-evenly',
      marginLeft: 40,
      backgroundColor: 'white',
    },
    navigationControls:
    {
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        alignItems: 'center',
    },
    text: {
      color: '#000000',
      fontSize: 26,
      //textAlign: 'center',
    },
    logo:{
      width: 200,
      height: 200,
      resizeMode: 'contain',
      justifyContent:'center'
    },
    button:{
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        elevation: 1,
    },
    buttonText:{
        color:'#000000',
        margin: 10
    }
  });<file_sep>import * as React from 'react';
import { Text, View, StyleSheet, Image} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation'
import { Constants } from 'expo';

// You can import from local files
import FirstPage from './components/FirstPage';
import HomeScreen from './components/HomeScreen';
import ViewCalendar from './components/ViewCalendar';
import AddNewEvent from './components/AddNewEvent';

const rootStack = createStackNavigator({
  FirstPage:FirstPage,
  Home:HomeScreen,
  ViewCalendar: ViewCalendar,
  AddNewEvent: AddNewEvent,
},
{
  initialRouteName: 'FirstPage'
}
)

const AppContainer = createAppContainer(rootStack)


export default class App extends React.Component {
  constructor(props){
    super(props)
  }

  render() {
    
    return ( 
        <AppContainer />
    );
  }
};
