Onboarding Part 1 (#41)

* create a privacy and terms screen

* add an auth stack, save user token for future sessions

* always show saved markers

* add sign out button

expo_project/components/MapWithMarkers.js

@@ -92,7 +92,7 @@ class MapWithMarkers extends React.Component {
             const key = marker.id + (selected ? "-selected" : ""); //trigger a re render when switching states, so it recenters itself
             return (
               <MapView.Marker
-                coordinate={marker.coordinate}
+                coordinate={marker.location}
                 key={key}
                 identifier={marker.id}
                 stopPropagation
@@ -122,7 +122,7 @@ class MapWithMarkers extends React.Component {
               }
             ]}
             size={CIRCULAR_PROGRESS_SIZE}
-            width={3}
+            width={5}
             tintColor={this.state.nextMarkerColor}
             backgroundColor="transparent"
             duration={CIRCULAR_PROGRESS_ANIMATION_DURATION}

expo_project/constants/Theme.js

@@ -0,0 +1,11 @@
+import { DefaultTheme } from "react-native-paper";
+
+export default {
+  ...DefaultTheme,
+  roundness: 5,
+  colors: {
+    ...DefaultTheme.colors,
+    primary: "#5B93D9",
+    accent: "#1C4442"
+  }
+};

expo_project/navigation/AppNavigator.js

@@ -1,24 +1,51 @@
-import React from "react";
-import { createStackNavigator } from "react-navigation";
+import { createStackNavigator, createSwitchNavigator } from "react-navigation";
 import colors from "../constants/Colors";
+import Theme from "../constants/Theme";
+import AuthScreen from "../screens/AuthScreen";
+import AuthLoadingScreen from "../screens/AuthLoadingScreen";
 import SurveyScreen from "../screens/SurveyScreen";
 import StudyIndexScreen from "../screens/StudyIndexScreen";
+import PrivacyScreen from "../screens/PrivacyScreen";
 
-export default createStackNavigator(
+const navigationOptions = {
+  headerStyle: {
+    backgroundColor: colors.colorPrimary
+  },
+  headerTintColor: "#fff",
+  headerTitleStyle: {
+    fontWeight: "600",
+    fontFamily: Theme.fonts.medium
+  }
+};
+
+const AppStack = createStackNavigator(
   {
-    SurveyScreen,
-    StudyIndexScreen
+    StudyIndexScreen,
+    SurveyScreen
   },
   {
     initialRouteName: "StudyIndexScreen",
-    navigationOptions: {
-      headerStyle: {
-        backgroundColor: colors.colorPrimary
-      },
-      headerTintColor: "#fff",
-      headerTitleStyle: {
-        fontWeight: "bold"
-      }
-    }
+    navigationOptions
+  }
+);
+const AuthStack = createStackNavigator(
+  {
+    AuthScreen,
+    PrivacyScreen
+  },
+  {
+    initialRouteName: "AuthScreen",
+    navigationOptions
+  }
+);
+
+export default createSwitchNavigator(
+  {
+    AuthLoading: AuthLoadingScreen,
+    App: AppStack,
+    Auth: AuthStack
+  },
+  {
+    initialRouteName: "AuthLoading"
   }
 );

expo_project/screens/AuthLoadingScreen.js

@@ -0,0 +1,37 @@
+import React from "react";
+import {
+  ActivityIndicator,
+  AsyncStorage,
+  StyleSheet,
+  View
+} from "react-native";
+
+export default class AuthLoadingScreen extends React.Component {
+  constructor(props) {
+    super(props);
+    this._bootstrapAsync();
+  }
+
+  // Fetch the token from storage then navigate to our appropriate place
+  _bootstrapAsync = async () => {
+    const userToken = await AsyncStorage.getItem("userToken");
+    this.props.navigation.navigate(userToken ? "App" : "Auth");
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <ActivityIndicator />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});

expo_project/screens/AuthScreen.js

@@ -0,0 +1,101 @@
+import React from "react";
+import { AsyncStorage, StyleSheet, View } from "react-native";
+import { withNavigation } from "react-navigation";
+import { Button, Subheading, Title } from "react-native-paper";
+import Theme from "../constants/Theme";
+import { Icon } from "expo";
+import firebase from "../lib/firebaseSingleton";
+
+class AuthScreen extends React.Component {
+  static navigationOptions = {
+    header: null
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  _signIn = async () => {
+    try {
+      console.log("start the log ing");
+      const { type, idToken } = await Expo.Google.logInAsync({
+        iosClientId:
+          "8677857213-j9dn9ebe425td60q8c9tc20gomjbojip.apps.googleusercontent.com",
+        iosStandaloneAppClientId:
+          "8677857213-s1rosh2e597b3nccpqv67dbfpmc3q53o.apps.googleusercontent.com",
+        scopes: ["profile", "email"]
+      });
+
+      if (type === "success") {
+        // Build Firebase credential with the access token.
+        const credential = firebase.auth.GoogleAuthProvider.credential(idToken);
+        console.log(`credential: ${credential}`);
+
+        // Sign in with credential from the Facebook user.
+        const firebaseSignInResult = await firebase
+          .auth()
+          .signInAndRetrieveDataWithCredential(credential);
+        console.log(`sign in result: ${firebaseSignInResult}`);
+
+        // TODO: Check whether user has access to surveys, and if not add to a waiting list
+
+        // set token for next session, then navigate to the internal app
+        await AsyncStorage.setItem("userToken", idToken);
+        this.props.navigation.navigate("App");
+      } else {
+        console.log("cancelled");
+      }
+    } catch (e) {
+      console.log("error", e);
+    }
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <Title style={styles.title}>Create an account</Title>
+        <Subheading style={styles.subheading}>
+          Once your study is complete, you can use graphs and text to explain
+          your findings
+        </Subheading>
+        <Button
+          raised
+          primary
+          dark
+          theme={{ ...Theme, roundness: 100 }}
+          onPress={this._signIn}
+          icon={({ size, color }) => (
+            <Icon.Ionicons name="logo-google" size={size} color={color} />
+          )}
+        >
+          Connect with Google
+        </Button>
+        <Button
+          primary
+          onPress={() => this.props.navigation.navigate("PrivacyScreen")}
+        >
+          Privacy & Terms
+        </Button>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "white",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  title: {
+    fontSize: 25,
+    marginHorizontal: 50
+  },
+  subheading: {
+    marginHorizontal: 50,
+    marginVertical: 30
+  }
+});
+
+export default withNavigation(AuthScreen);

expo_project/screens/PrivacyScreen.js

@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import { StyleSheet, View, WebView } from "react-native";
+import { withNavigation } from "react-navigation";
+
+import { Button, Divider, withTheme } from "react-native-paper";
+
+class PrivacyScreen extends Component {
+  static navigationOptions = {
+    title: "Privacy & Terms"
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <WebView source={{ uri: "http://www.sidewalktoronto.com/privacy" }} />
+        <Divider />
+        <View elevation={4} style={styles.footer}>
+          <Button
+            raised
+            primary
+            dark
+            theme={{ ...this.props.theme, roundness: 100 }}
+            onPress={() => this.props.navigation.goBack()}
+          >
+            Done
+          </Button>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff"
+  },
+  footer: {
+    padding: 20
+  }
+});
+
+export default withNavigation(withTheme(PrivacyScreen));

expo_project/screens/StudyIndexScreen.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { AsyncStorage, ScrollView, StyleSheet, Text, View } from "react-native";
 import { withNavigation } from "react-navigation";
-
 import studies from "../config/studies";
+import Theme from "../constants/Theme";
 import {
   Button,
   Caption,
@@ -18,10 +18,15 @@ class SurveyIndexScreen extends React.Component {
     title: "Studies"
   };
 
+  _signOut = async () => {
+    await AsyncStorage.clear();
+    this.props.navigation.navigate("Auth");
+  };
+
   render() {
     return (
       <View style={[styles.container]}>
-        <ScrollView stickyHeaderIndices={[0]}>
+        <ScrollView style={[styles.container]} stickyHeaderIndices={[0]}>
           <Caption style={styles.sectionTitle}>Your studies</Caption>
           {studies.map(study => (
             <Card elevation={3}>
@@ -59,6 +64,15 @@ class SurveyIndexScreen extends React.Component {
             </Card>
           ))}
         </ScrollView>
+        <Button
+          raised
+          primary
+          dark
+          theme={{ ...Theme, roundness: 100 }}
+          onPress={this._signOut}
+        >
+          Log Out
+        </Button>
       </View>
     );
   }