Added Passenger Splash & nav back after trip complete

ShreyeshArangath · Nov 9, 2022 · d4879ec · d4879ec
1 parent 32dd40d
commit d4879ec
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 40 deletions.
diff --git a/mobile-app/App.js b/mobile-app/App.js
@@ -44,31 +44,39 @@ const PassengerScreens = ({route, navigation}) => {
         screenOptions={{
             headerBackTitleVisible: false,
             headerMode: 'float'
-          }}>
+        }}>
+
+          <PassengerStack.Screen 
+            name="Passenger_Splash"
+            component={Passenger_Splash} 
+            options = {{
+              title: null, 
+              headerTransparent: true, 
+              headerBackVisible: true}}
+          />
 
-            <PassengerStack.Screen 
-                name="Passenger_PickLocation"
-                component={Passenger_PickLocation} 
-                initialParams={{
-                  "region": route.params.region,
-                  "position": route.params.position, 
-                  "user": dummyPassenger.KeaG7oWA9tGo067gcByO, 
-                  "color": "#E5E5E5"
-                }}
-                options = {UnterHeaderOptions}
-            />
-
-
-        <PassengerStack.Screen 
-                name="Passenger_ConfirmLocation"
-                component={Passenger_ConfirmLocation} 
-                options = {UnterHeaderOptions}
-            />
-
-        <PassengerStack.Screen 
-                  name="Passenger_Ride"
-                  component={Passenger_Ride}
-                  options = {UnterHeaderOptions}
+          <PassengerStack.Screen 
+            name="Passenger_PickLocation"
+            component={Passenger_PickLocation} 
+            initialParams={{
+              "region": route.params.region,
+              "position": route.params.position, 
+              "user": dummyPassenger.KeaG7oWA9tGo067gcByO, 
+              "color": "#E5E5E5"
+            }}
+            options = {UnterHeaderOptions}
+          />
+
+          <PassengerStack.Screen 
+            name="Passenger_ConfirmLocation"
+            component={Passenger_ConfirmLocation} 
+            options = {UnterHeaderOptions}
+          />
+
+          <PassengerStack.Screen 
+            name="Passenger_Ride"
+            component={Passenger_Ride}
+            options = {UnterHeaderOptions}
           />
         </PassengerStack.Navigator>
     )

diff --git a/mobile-app/Components/SplashHeader.js b/mobile-app/Components/SplashHeader.js
@@ -0,0 +1,36 @@
+import {
+    Text,
+    Center
+} from 'native-base';
+
+import {StyleSheet } from 'react-native';
+import React from 'react';
+import PropTypes from 'prop-types'; 
+
+function SplashHeader(props)
+{
+    const textColor = props.textColor ? props.textColor: "white"
+    const styles =  StyleSheet.create({
+        centerStyle: {
+            margin: 30,
+        },
+        text: {
+            color: textColor, 
+        }
+    })
+
+    return (
+        <Center style={styles.centerStyle}>
+            <Text fontSize="6xl" style={styles.text}>{props.title}</Text>
+            <Text fontSize="xl" style={styles.text}>{props.subtitle}</Text>
+        </Center>
+    )
+}
+SplashHeader.propTypes = {
+    title: PropTypes.string.isRequired,
+    subtitle: PropTypes.string,
+};
+
+export {
+    SplashHeader
+}
diff --git a/mobile-app/Screens/Passenger/Passenger_Ride.js b/mobile-app/Screens/Passenger/Passenger_Ride.js
@@ -5,6 +5,7 @@ import {
     ZStack, 
     Flex,
     HStack,
+    useBreakpointValue,
 } from 'native-base';
 import { Instructions } from '../../Components/Instructions';
 import { TripButton } from '../../Components/TripButton';
@@ -38,7 +39,11 @@ export const Passenger_Ride = ({route, navigation}) => {
                 setDistance(res.distance) })
     )
 
-    // Check firestore to see if we have a driver for the given trip
+    const navigate_splash = () => {
+        navigation.navigate("Passenger_Splash")
+   }   
+
+    // Check firestore to see if we have a trip alter
     useEffect(() => {
         const unsubscribe = onSnapshot(doc(fireStore, "Trips", tripId), 
         (res) => {    
@@ -49,7 +54,17 @@ export const Passenger_Ride = ({route, navigation}) => {
                 setFoundDriver(true)
             } else {
                 setFoundDriver(false)
-            }
+            } 
+            switch(tripInfo["status"]){
+                case ("completed"):
+                    //TODO: add trip raiting page
+                    navigate_splash()
+                    break;
+                default:
+                    break;
+                }
+
+
         }, (err) => {
             console.log(err)
         });

diff --git a/mobile-app/Screens/Passenger/Passenger_Splash.js b/mobile-app/Screens/Passenger/Passenger_Splash.js
@@ -1,26 +1,37 @@
 import {
     NativeBaseProvider,
-    Button
+    Button,
+    Container,
+    Center,
+    Text
 } from 'native-base';
+import { TripButton } from '../../Components/TripButton';
 import { useEffect } from 'react';
+import { SplashHeader } from '../../Components/SplashHeader';
 
 
 
 
 export const Passenger_Splash = ({ navigation, route }) => {
-   const navigate = () => {
-
-    navigation.push("Passenger_PickLocation", {
-
-        "region": route.params.region
-    })
-   }
+   const navigate_PickLocation = () => {
+        navigation.push("Passenger_PickLocation")
+   }   
+   const navigate_PastTrips = () => {
+        navigation.push("TODO_ADD_GET_ALL_TRIPS_PAGE", {
+            "region": route.params.region
+        })
+    }
 
     return (
         <NativeBaseProvider>
-            <Button title="View Past Trips" onPress={navigate}>
-             Next
-            </Button> 
-        </NativeBaseProvider>
+        <Container h="100%" w="100%" maxWidth="100%" bg="#B53838" flex={1} justifyContent='center' alignItems='center'>
+            <SplashHeader title="Unter" subtitle="Passenger" />
+            <Center style={{margin: 30}}>
+                <TripButton text="Start Your Journey" color={"white"} textColor={"black"} onPress={navigate_PickLocation} />
+
+                <TripButton text="View Past Trips" color={"white"} textColor={"black"} onPress={navigate_PastTrips} />
+            </Center>
+        </Container>
+    </NativeBaseProvider>
     )
 }
diff --git a/mobile-app/components/google_map_search.js b/mobile-app/components/google_map_search.js
@@ -13,7 +13,7 @@ export default function GoogleMapSearch(props) {
     <GooglePlacesAutocomplete
         placeholder={props.placeholder}
         textInputProps={{
-          placeholderTextColor: '#000000',
+          placeholderTextColor: '#808080',
           fontWeight: "400",
           returnKeyType: "search"
         }}

diff --git a/mobile-app/package.json b/mobile-app/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start --tunnel",
+    "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",