Refactored files, added FB button, changed screen flow

Author: naji247

src/actions/actionTypes.js

@@ -0,0 +1,2 @@
+exports.LOGIN_SUCCESS = "LOGIN: SUCCESS";
+exports.LOGOUT_SUCCESS = "LOGOUT: SUCCESS";

src/actions/authActions.js

@@ -0,0 +1,40 @@
+import { LOGIN_SUCCESS, LOGOUT_SUCCESS } from "./actionTypes";
+import Expo from "expo";
+const getFBToken = Expo.Facebook.logInWithReadPermissionsAsync;
+
+const loginAction = user => {
+  return {
+    type: LOGIN_SUCCESS,
+    user: user
+  };
+};
+
+const logoutAction = () => {
+  return {
+    type: LOGOUT_SUCCESS
+  };
+};
+
+async function login() {
+  const { type, token } = await getFBToken("235578963603256", {
+    permissions: ["public_profile"]
+  });
+  if (type === "success") {
+    // Get the user's name using Facebook's Graph API
+    const response = await fetch(
+      `https://graph.facebook.com/me?access_token=${token}`
+    );
+    user = await response.json();
+    return loginAction(user);
+  }
+}
+
+function logout() {
+  return logoutAction();
+}
+
+module.exports = {
+  login,
+  loginAction,
+  logout
+};

src/components/AuthButton.js

@@ -0,0 +1,52 @@
+import React, { StyleSheet } from "react-native";
+
+module.exports = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+
+  FBLoginButton: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+
+    height: 30,
+    width: 175,
+    paddingLeft: 2,
+
+    backgroundColor: "rgb(66,93,174)",
+    borderRadius: 3,
+    borderWidth: 1,
+    borderColor: "rgb(66,93,174)",
+
+    shadowColor: "#000000",
+    shadowOpacity: 0.8,
+    shadowRadius: 2,
+    shadowOffset: {
+      height: 1,
+      width: 0
+    }
+  },
+  FBLoginButtonText: {
+    color: "white",
+    fontWeight: "600",
+    fontSize: 14.2
+  },
+  FBLoginButtonTextLoggedIn: {
+    marginLeft: 5
+  },
+  FBLoginButtonTextLoggedOut: {
+    marginLeft: 18
+  },
+  FBLogo: {
+    position: "absolute",
+    height: 14,
+    width: 14,
+    left: 7,
+    top: 7
+  }
+});

src/components/FBLoginButton.js

@@ -0,0 +1,49 @@
+import React, { PropTypes } from "react";
+import {
+  Button,
+  StyleSheet,
+  Text,
+  Image,
+  View,
+  TouchableHighlight
+} from "react-native";
+import { connect } from "react-redux";
+import { login, logout } from "../../actions/authActions";
+import * as styles from "./FBLoginButton.css";
+
+const FBLoginButton = ({ style, login, logout, user }) =>
+  <View style={style}>
+    <TouchableHighlight
+      style={styles.container}
+      onPress={user ? logout : login}
+    >
+      <View style={styles.FBLoginButton}>
+        <Image
+          style={styles.FBLogo}
+          source={require("./images/FB-f-Logo__white_144.png")}
+        />
+        <Text
+          style={[
+            styles.FBLoginButtonText,
+            user
+              ? styles.FBLoginButtonTextLoggedIn
+              : styles.FBLoginButtonTextLoggedOut
+          ]}
+          numberOfLines={1}
+        >
+          {user ? "Log Out" : "Login with Facebook"}
+        </Text>
+      </View>
+    </TouchableHighlight>
+  </View>;
+
+const mapStateToProps = state => ({
+  user: state.auth.user
+});
+
+const mapDispatchToProps = dispatch => ({
+  login: async () => dispatch(await login()),
+  logout: () => dispatch(logout())
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(FBLoginButton);

src/components/FBLoginButton/FBLoginButton.css.js

@@ -0,0 +1,15 @@
+import React, { StyleSheet } from "react-native";
+
+module.exports = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#F5FCFF"
+  },
+  fbLogin: {
+    flexDirection: "row",
+    marginLeft: "5%",
+    marginRight: "5%"
+  }
+});

src/components/FBLoginButton/FBLoginButton.js

@@ -0,0 +1,20 @@
+import React, { PropTypes } from "react";
+import { Button, StyleSheet, Text, View } from "react-native";
+import FBLoginButton from "../FBLoginButton/FBLoginButton";
+import { loginAction } from "../../actions/authActions";
+import * as styles from "./LoginScreen.css";
+
+const LoginScreen = ({ navigation }) =>
+  <View style={styles.container}>
+    <FBLoginButton style={styles.fbLogin} />
+  </View>;
+
+LoginScreen.propTypes = {
+  navigation: PropTypes.object.isRequired
+};
+
+LoginScreen.navigationOptions = {
+  title: "Log In"
+};
+
+export default LoginScreen;