logout(inside HomeScreen) + files; install drawer navigation

App.js

@@ -1,30 +1,32 @@
 import React, { Component } from 'react';
 import firebase from 'firebase'
+import thunk from 'redux-thunk';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
 
-import RegisterScreen from './screens/auth/RegisterScreen';
-import LoginScreen from './screens/auth/LoginScreen';
+import AvailabilityScreen from './screens/AvailabilityScreen';
+import MailScreen from './screens/MailScreen';
+import RegisterScreen from './screens/RegisterScreen';
+import LoginScreen from './screens/LoginScreen';
+import HomeScreen from './screens/HomeScreen';
+import Loading from './components/Loading';
 import { firebaseConfig } from './config/firebaseConfig';
-import { Text, View } from 'react-native';
-import { styles } from './config/styles';
-
-import HomeScreen from './screens/main/Home_page';
-import { Provider} from 'react-redux'
-import { createStore, applyMiddleware } from 'redux';
 import rootReducer from './redux/reducers'
-import thunk from 'redux-thunk'
+
 
 
 if (firebase.apps.length === 0) {
   firebase.initializeApp(firebaseConfig)
 }
 
-const store = createStore(rootReducer, applyMiddleware(thunk));
-
 const Stack = createStackNavigator();
+const Drawer = createDrawerNavigator();
+const store = createStore(rootReducer, applyMiddleware(thunk));
 
-export class App extends Component {
+export default class App extends Component {
   constructor(props){
     super(props);
     this.state = {
@@ -46,18 +48,23 @@ export class App extends Component {
           loaded: true,
         })
       }
-    })
+    });
   }
 
+  createHomeStack = () => 
+    <Stack.Navigator>
+      <Stack.Screen name={"Home"} options={{headerShown: false}} component={HomeScreen}/>
+      <Stack.Screen name={"Mail"} options={{ headerStatusBarHeight: 100, headerTransparent: true, headerBackTitle: " ", headerTitle: " "}} component={MailScreen}/>
+      <Stack.Screen name={"Availability"} options={{ headerStatusBarHeight: 100, headerTransparent: true, headerBackTitle: " ", headerTitle: " "}} component={AvailabilityScreen}/>
+    </Stack.Navigator>
+  
   render() {
 
     const { loggedIn, loaded } = this.state
 
     if(!loaded){
       return(
-        <View style={styles.regcontainer}>
-          <Text>Hopper</Text>
-        </View>
+        <Loading/>
       );
     }
 
@@ -75,13 +82,11 @@ export class App extends Component {
     return(
       <Provider store={store}>
         <NavigationContainer>
-          <Stack.Navigator initialRouteName="Home">
-            <Stack.Screen name="Home" component={HomeScreen} />
-          </Stack.Navigator>
+          <Drawer.Navigator>
+            <Drawer.Screen name={" "} options={{drawerLabel: "Home", headerTransparent: true}} children={this.createHomeStack}/>
+          </Drawer.Navigator>
         </NavigationContainer>
       </Provider>
     );
   }
-}
-
-export default App
+}

screens/AvailabilityScreen.js

@@ -0,0 +1,45 @@
+import React, { Component } from "react";
+import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground, Image, View } from "react-native";
+import firebase from "firebase";
+import { Picker } from "@react-native-picker/picker";
+
+import { styles } from "../config/styles";
+import CustomButton from "../components/CustomButton";
+
+
+export default class AvailabilityScreen extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            face_to_face: false,
+            online: false,
+            multiple: false,
+            one_on_one: false,
+            spanish: false,
+            english: false,
+            language: 0,
+        };
+    };
+
+    render() {  
+        return (
+            <View style={styles.regcontainer}>
+                <Picker style={styles.picker} selectedValue={this.state.language} onValueChange={(itemValue,itemIndex) => {
+                    this.setState({language: itemValue})
+                    if(itemValue === 0){
+                        this.setState({english: true, spanish: false});
+                    }
+                    else if(itemValue === 1){
+                        this.setState({english: false, spanish: true});
+                    }
+                    else{
+                        this.setState({english: true, spanish: true});
+                    }}}>
+                        <Picker.Item label="English" value={0}/>
+                        <Picker.Item label="Spanish" value={1}/>
+                        <Picker.Item label="Both" value={2}/>
+                    </Picker>
+            </View>
+        );
+    }
+}

screens/HomeScreen.js

@@ -0,0 +1,141 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import firebase from 'firebase';
+import { Text, View, ImageBackground } from 'react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+
+import { fetchUser } from '../redux/actions/index'
+import Loading from '../components/Loading'
+import { styles } from '../config/styles'
+
+export class HomeScreen extends Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      interpreter: false,
+    };
+    this.onLogout = this.onLogout.bind(this)
+  };
+
+  componentDidMount(){
+    this.props.fetchUser();
+    firebase.firestore()
+    .collection("Interpreters")
+    .doc(firebase.auth().currentUser.uid)
+    .get()
+    .then((snapshot) => {
+      if(snapshot.exists){
+        this.setState({interpreter: true})
+      }
+    })
+  }
+
+  onLogout(){
+    firebase.auth().signOut();
+  }
+
+  render() {
+    const { currentUser } = this.props;
+
+    if(currentUser == undefined){
+      return <Loading/>
+    }
+    if(this.state.interpreter){
+      return(
+        <View style={styles.regcontainer}>
+          <ImageBackground style={styles.home} source={require("../assets/yellow-white.jpg")}>
+            <View style={styles.homeTopView}>
+              <MaterialIcons name='logout' size={30} color='dodgerblue' onPress={() => this.onLogout()}/>
+              <MaterialIcons name='event' size={30} color='dodgerblue' style={styles.homeIcon} onPress={() => this.props.navigation.navigate('Availability')}/>
+              <MaterialIcons name='mail' size={30} color='dodgerblue' onPress={() => this.props.navigation.navigate('Mail')}/>
+            </View>
+          </ImageBackground>
+          <View style={styles.regcontainer}></View>
+        </View>
+      );
+    }
+    else{
+      return(
+        <View style={styles.regcontainer}><Text>You are a user</Text></View>
+      );
+    }
+  }
+}
+
+const mapStateProps = (store) => ({currentUser: store.userState.currentUser})
+const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch)
+export default connect(mapStateProps, mapDispatchProps)(HomeScreen)
+
+/*export default function HomeScreen({navigation}) {
+  const [threads, setThreads] = useState([]);  
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+
+    const fire = firebase.firestore()
+    .collection('THREADS')
+    
+    .onSnapshot(querySnapshot => {
+      const threads = querySnapshot.docs.map(documentSnapshot => {
+        return{
+          _id:documentSnapshot.id,
+          name:'',
+          ...documentSnapshot.data()
+        };
+
+      });
+
+      setThreads(threads);
+
+      if(loading){
+        setLoading(false);
+      }
+
+    });
+
+    return () => fire();
+  }, []);
+  
+  if (loading) {
+    return <Loading />;
+  }
+  
+  return (
+      <View style={styles.container}>
+        <FlatList
+          data={threads}
+          keyExtractor = {item => item._id}
+          ItemSeparatorComponent={() => <Divider />}
+          renderItem = {({item}) => (
+
+            <TouchableOpacity
+            onPress={() => navigation.navigate('Room', {thread: item})}
+            
+            >
+            <List.Item
+              title={item.name}
+              description='Item description'
+              titleNumberOfLines={1}
+              titleStyle={styles.listTitle}
+              descriptionStyle={styles.listDescription}
+              descriptionNumberOfLines={1}
+            />
+          </TouchableOpacity>
+        )}
+      />
+
+      <Button
+        title='Add Room'
+        onPress={() => navigation.navigate('Add')}
+      />
+
+        <Button
+        title ='Room'
+        onPress= {() => navigation.navigate('Room')}
+        />
+
+      </View>
+    );
+  }
+*/

screens/MailScreen.js

@@ -0,0 +1,19 @@
+import React, { Component } from "react";
+import { View, Text } from "react-native";
+
+import { styles } from "../config/styles";
+
+export default class MailScreen extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        };
+    };
+
+    render() {
+        
+        return (
+            <View style={styles.regcontainer}><Text>This is Mail</Text></View>
+        );
+    }
+}