Merge pull request #82 from CaronaBoard/settings

Add settings screen

src/modules/settings/components/Settings.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import { RkText } from 'react-native-ui-kitten'
+import {
+  ScrollView,
+  View,
+  TouchableOpacity
+} from 'react-native'
+import PropTypes from 'prop-types'
+
+import { styles } from './styles/Settings.style'
+
+export class Settings extends React.Component {
+  static propTypes = {
+    openProfile: PropTypes.func.isRequired,
+    resetPassword: PropTypes.func.isRequired,
+    logOut: PropTypes.func.isRequired,
+    eraseUserData: PropTypes.func.isRequired
+  }
+
+  render () {
+    return (
+      <ScrollView style={styles.container}>
+        <View style={styles.section}>
+          <View style={[styles.row, styles.heading]}>
+            <RkText rkType='primary header6'>PROFILE SETTINGS</RkText>
+          </View>
+          <View style={styles.row}>
+            <TouchableOpacity
+              style={styles.rowButton}
+              onPress={() => this.props.openProfile()}
+            >
+              <RkText rkType='header6'>Edit Profile</RkText>
+            </TouchableOpacity>
+          </View>
+          <View style={styles.row}>
+            <TouchableOpacity
+              style={styles.rowButton}
+              onPress={() => this.props.resetPassword()}
+            >
+              <RkText rkType='header6'>Reset Password</RkText>
+            </TouchableOpacity>
+          </View>
+        </View>
+        <View style={styles.section}>
+          <View style={[styles.row, styles.heading]}>
+            <RkText rkType='primary header6'>USER SETTINGS</RkText>
+          </View>
+          <View style={styles.row}>
+            <TouchableOpacity
+              style={styles.rowButton}
+              onPress={() => this.props.eraseUserData()}
+            >
+              <RkText rkType='header6'>Erase User Data</RkText>
+            </TouchableOpacity>
+          </View>
+          <View style={styles.row}>
+            <TouchableOpacity
+              style={styles.rowButton}
+              onPress={() => this.props.logOut()}
+            >
+              <RkText rkType='header6'>Logout</RkText>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </ScrollView>
+    )
+  }
+}

src/modules/settings/components/styles/Settings.style.js

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native'
+import { RkStyleSheet } from 'react-native-ui-kitten'
+
+export const styles = RkStyleSheet.create(theme => ({
+  container: {
+    backgroundColor: theme.colors.screen.base
+  },
+  header: {
+    paddingVertical: 25
+  },
+  section: {
+    marginVertical: 25
+  },
+  heading: {
+    paddingBottom: 12.5
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 17.5,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.colors.border.base,
+    alignItems: 'center'
+  },
+  rowButton: {
+    flex: 1,
+    paddingVertical: 24
+  }
+}))

src/modules/settings/containers/SettingsContainer.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+
+import { Settings } from '../components/Settings'
+import { screens } from '../../../navigation/Screens'
+import { sendPasswordResetEmail, signOut } from '../../../services/firebase/Authentication'
+import { destructiveAlert } from '../../../navigation/Alert'
+
+class SettingsContainer extends Component {
+  static propTypes = {
+    navigator: PropTypes.object.isRequired,
+    user: PropTypes.object.isRequired
+  }
+
+  pushProfileScreen = () => {
+    this.props.navigator.push({
+      screen: screens.profile.id,
+      title: screens.profile.title
+    })
+  }
+
+  eraseUserData = () => {
+    destructiveAlert(
+      'If you confirm all your personal data will be erased from outr system,',
+      () => alert('Feature not implemented :P')
+    )
+  }
+
+  logOutUser = () => {
+    signOut()
+  }
+
+  resetPassword = async () => {
+    try {
+      await sendPasswordResetEmail(this.props.user.email)
+      alert('Check your email box, an email to redefine you password was sent')
+    } catch (error) {
+      alert(error)
+    }
+  }
+
+  render () {
+    return (
+      <Settings
+        openProfile={this.pushProfileScreen}
+        eraseUserData={this.eraseUserData}
+        logOut={this.logOutUser}
+        resetPassword={this.resetPassword}
+      />
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    user: state.auth.userData
+  }
+}
+
+export default connect(mapStateToProps)(SettingsContainer)

src/navigation/Alert.js

@@ -18,3 +18,22 @@ export const alert = (title: string, confirmCallback: Function) => {
     { cancelable: true }
   )
 }
+
+export const destructiveAlert = (explanation: string, confirmCallback: Function) => {
+  Alert.alert(
+    'This options has no turn back',
+    explanation,
+    [
+      {
+        text: 'Sure thing, go ahead!',
+        style: 'destructive',
+        onPress: confirmCallback
+      },
+      {
+        text: 'No, Thanks',
+        style: 'cancel'
+      }
+    ],
+    { cancelable: true }
+  )
+}

src/navigation/NavBar.js

@@ -9,6 +9,9 @@ export const profileButton = {
 export function onNavigatorEvent (event) {
   const { type, id } = event
   if (type === 'NavBarButtonPress' && id === 'profile-button') {
-    this.props.navigator.push({screen: screens.profile.id})
+    this.props.navigator.push({
+      screen: screens.settings.id,
+      title: screens.settings.title
+    })
   }
 }

src/navigation/Screens.js

@@ -7,6 +7,7 @@ import RideRequest from '../modules/rideRequest/containers/NewRideRequestContain
 import YourRideOfferList from '../modules/rideOffer/containers/YourRideOffersScreen'
 import YourRideRequestsScreen from '../modules/rideRequest/containers/YourRideRequestsScreen'
 import SignInScreen from '../modules/authentication/containers/SignInScreen'
+import Settings from '../modules/settings/containers/SettingsContainer'
 
 export const screens = {
   signIn: {
@@ -21,11 +22,6 @@ export const screens = {
     id: 'authentication.forgotPassword',
     component: ForgotPasswordScreen
   },
-  profile: {
-    id: 'user.profile',
-    component: ProfileScreen,
-    title: 'Profile'
-  },
   rideOfferList: {
     id: 'ride.list',
     component: RideList,
@@ -55,5 +51,15 @@ export const screens = {
     component: YourRideRequestsScreen,
     label: 'Your Ride Requests',
     title: 'Your Ride Requests'
+  },
+  settings: {
+    id: 'settings',
+    component: Settings,
+    title: 'Settings'
+  },
+  profile: {
+    id: 'settings.profile',
+    component: ProfileScreen,
+    title: 'Profile'
   }
 }

src/services/firebase/Authentication.js

@@ -37,10 +37,22 @@ export const checkEmailRegistration = async (email: string) => {
   return providers.length !== 0
 }
 
+export const deleteUser = async (user) => {
+  return user.delete()
+}
+
 export const sendVerificationEmail = async (user) => {
   return user.sendEmailVerification()
 }
 
 export const forgotPassword = async (email) => {
   return auth.sendPasswordResetEmail(email)
 }
+
+export const sendPasswordResetEmail = async (email: string) => {
+  return auth.sendPasswordResetEmail(email)
+}
+
+export const getCurrentUser = () => {
+  return auth.currentUser
+}