First commit. Simple login design and functionality with facebook and…

… firebase.

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["babel-preset-expo"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.expo/*
+npm-debug.*

.watchmanconfig

@@ -0,0 +1 @@
+{}

app/API/Auth.js

@@ -0,0 +1,29 @@
+import { firebaseAuth, facebookProvider, ref, appId } from '../Config/Constants';
+import Expo from "expo"
+import {Alert} from "react-native"
+
+
+function authWithToken(token){
+    return firebaseAuth.
+    signInWithCredential(facebookProvider.credential(token))
+}
+
+export function logout(){
+    firebaseAuth.logout()
+    ref.off()
+}
+
+export async function logIn(){
+    const { type, token } = await Expo.Facebook.
+    logInWithReadPermissionsAsync(appId, {
+    permissions: ['public_profile', 'user_friends'],
+    });
+    if (type === 'success') {
+        // Get the user's info using Facebook's Graph API
+        const response = await fetch("https://graph.facebook.com/me?fields=name,friends,picture&access_token=" + token)
+        let userData = await response.json()
+        //Logging in with firebase
+        await authWithToken(token)
+        return userData
+    }
+}

app/Components/Animations/flashAnimation.js

@@ -0,0 +1,63 @@
+import React, {Component} from 'react'
+import { View, Text, Animated, Dimensions, StyleSheet } from 'react-native'
+const { width } = Dimensions.get('window')
+const NOTIFICATION_WIDTH = width * 0.7
+
+export default class FlashNotification extends Component {
+  static defaultProps = {
+    permanent: false,
+    length: 1500,
+    location: 'top',
+  }
+  state = {
+    width: new Animated.Value(50),
+    opacity: new Animated.Value(1.0),
+    textOpacity: new Animated.Value(0),
+  }
+  componentDidMount () {
+    Animated.spring(this.state.width, {toValue: NOTIFICATION_WIDTH}).start()
+    Animated.timing(this.state.textOpacity, {toValue: 1, duration: 1000}).start()
+
+    if (this.props.permanent === false) {
+      setTimeout(() => {
+        Animated.timing(this.state.opacity, {toValue: 0, duration: 1000})
+          .start(this.props.onHideNotification)
+      }, this.props.length)
+    }
+  }
+
+  getStyle = () => {
+    return {
+      width: this.state.width,
+      opacity: this.state.opacity,
+      top: this.props.location === 'top' ? 60 : undefined,
+      bottom: this.props.location === 'top' ? undefined : 60,
+    }
+  }
+  render () {
+    return (
+      <Animated.View style={[styles.container, this.getStyle()]}>
+        <Animated.Text style={[styles.text, {opacity: this.state.textOpacity}]}>
+          {this.props.text}
+        </Animated.Text>
+      </Animated.View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#c0392b",
+    borderRadius: 5,
+    height: 50,
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 10,
+    left: (width - NOTIFICATION_WIDTH) / 2
+  },
+  text: {
+    color: "white",
+    fontSize: 15,
+  },
+})

app/Components/Login/Login.js

@@ -0,0 +1,76 @@
+import React, {Component} from "react"
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+} from "react-native"
+
+import {colors} from "../../Styles/Colors"
+
+
+export default function Login(props){
+    return(
+        <View style={styles.background}>
+            <View style={styles.upperContainer}>
+                <Text style={styles.title}>
+                    Sello
+                </Text>
+                <Text style={styles.underTitle}>
+                    Making student´s life cheaper
+                </Text>
+            </View>
+            <View style={styles.middleContainer}>
+
+            </View>
+            <View style={styles.bottomContainer}>
+                <TouchableOpacity style={styles.fbLoginButton}>
+                    <Text style={styles.fbLoginButtonText} onPress={props.handleFBLogin}>
+                        Login with Facebook
+                    </Text>
+                </TouchableOpacity>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    background: {
+        flex: 1,
+        backgroundColor: colors.primary,
+    },
+    upperContainer: {
+        flex: 2,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    title: {
+        color: "white",
+        fontSize: 60,
+    },
+    underTitle: {
+        color: colors.dark,
+        fontSize: 20,
+        marginTop: 5,
+    },
+    middleContainer: {
+        flex: 1,
+    },
+    bottomContainer: {
+        flex: 1,
+    },
+    fbLoginButton: {
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: 5,
+        marginRight: 15,
+        marginLeft: 15,
+        backgroundColor: colors.facebook,
+    },
+    fbLoginButtonText: {
+        color: "white",
+        fontSize: 17,
+        fontWeight: "bold",
+        margin: 7,
+    }
+})

app/Config/Constants.js

@@ -0,0 +1,22 @@
+import firebase from "firebase"
+
+firebase.initializeApp({
+  apiKey: "AIzaSyDyvgbk7jlh6zUeTC7Qrz7tiwB15l-ruDk",
+  authDomain: "sello-1f9ec.firebaseapp.com",
+  databaseURL: "https://sello-1f9ec.firebaseio.com",
+  projectId: "sello-1f9ec",
+  storageBucket: "sello-1f9ec.appspot.com",
+  messagingSenderId: "1014305452466"
+});
+
+const ref = firebase.database().ref()
+const firebaseAuth = firebase.auth()
+const facebookProvider = firebase.auth.FacebookAuthProvider
+const appId = "1244206969002228"
+
+export {
+    ref,
+    firebaseAuth,
+    facebookProvider,
+    appId,
+}

app/Containers/LoginContainer/LoginContainer.js

@@ -0,0 +1,29 @@
+import React, {Component} from "react"
+import Expo from "expo"
+import {connect} from "react-redux"
+import {
+    View,
+    Text,
+    Alert,
+} from "react-native"
+
+import Login from "../../Components/Login/Login.js"
+import {handleAuthWithFirebase} from "../../Redux/Modules/Authentication"
+
+class LoginContainer extends Component{
+
+    handleFBLogin = () => {
+        this.props.dispatch(handleAuthWithFirebase())
+    }
+
+
+    render(){
+        return(
+            <Login
+                handleFBLogin={this.handleFBLogin}
+            />
+        )
+    }
+}
+
+export default connect()(LoginContainer)

app/Redux/Modules/Authentication.js

@@ -0,0 +1,83 @@
+import {authWithToken, logout, logIn} from "../../API/Auth"
+import {updateUser} from "./UserInfo"
+
+const AUTHENTICATING = "AUTHENTICATING"
+const NOT_AUTH = "NOT_AUTH"
+const IS_AUTH = "IS_AUTH"
+const LOGGING_OUT = "LOGGING_OUT"
+
+export function authenticating(){
+    return {
+        type: AUTHENTICATING,
+    }
+}
+
+export function notAuth(){
+    return {
+        type: NOT_AUTH
+    }
+}
+
+export function isAuth(uid){
+    return {
+        type: IS_AUTH,
+        uid,
+    }
+}
+
+export function loggingOut(){
+    return {
+        type: LOGGING_OUT
+    }
+}
+
+export function handleAuthWithFirebase(){
+    return function(dispatch, getState){
+        dispatch(authenticating())
+        logIn().then((userData) => {
+            user = {
+                displayName: userData.name,
+                photoURL: userData.picture.data.url,
+                fbFriends: userData.friends.data
+            }
+            dispatch(updateUser(user))
+        }).catch((error) => console.log("Something with the login process went wrong.", error.message))
+    }
+}
+
+export function handleUnauth(){
+    return function(dispatch, getState){
+        logout()
+        dispatch(loggingOut())
+    }
+}
+
+const initialState = {
+    isAuthenticating: false,
+    isAuth: false,
+    uid: "",
+}
+
+export function Authentication(state = initialState, action){
+    switch(action.type){
+        case AUTHENTICATING:
+        return {
+            ...state,
+            isAuthenticating: true,
+        }
+        case NOT_AUTH:
+        return{
+            uid: "",
+            isAuthenticating: false,
+            isAuth: false,
+        }
+        case IS_AUTH:
+        return {
+            uid: action.uid,
+            isAuthenticating: false,
+            isAuth: true,
+        }
+        default:
+        return state
+    }
+}

app/Redux/Modules/UserInfo.js

@@ -0,0 +1,45 @@
+const UPDATE_USER = "UPDATE_USER"
+const UPDATE_FBFRIENDS = "UPDATE_FBFRIENDS"
+
+
+export function updateUser(user){
+    return {
+        type: UPDATE_USER,
+        user,
+    }
+}
+
+export function updateFBFriends(friends){
+    return {
+        type: UPDATE_FBFRIENDS,
+        friends,
+    }
+}
+
+
+
+const initialState = {
+    photoURL: "",
+    displayName: "",
+    fbFriends: [],
+}
+
+export function UserInfo(state = initialState, action){
+    switch(action.type){
+        case UPDATE_USER:
+        return {
+            photoURL: action.user.photoURL,
+            displayName: action.user.displayName,
+            fbFriends: action.user.fbFriends,
+        }
+        case UPDATE_FBFRIENDS:
+        return{
+            ...state,
+            fbFriends: action.friends
+        }
+        default:
+        return {
+            state
+        }
+    }
+}

app/Redux/index.js

@@ -0,0 +1,2 @@
+export {UserInfo} from "./Modules/UserInfo";
+export {Authentication} from "./Modules/Authentication";

app/Styles/Colors.js

@@ -0,0 +1,5 @@
+export const colors = {
+    primary: "#2ecc71",
+    dark: "#27ae60",
+    facebook: "#3b5998",
+}