Merge pull request #243 from lisamcho/fb_refactor

Facebook refactor with email and photo saving

src/js/actions/FacebookActions.js

@@ -0,0 +1,100 @@
+const web_app_config = require("../config");
+import Dispatcher from "../dispatcher/Dispatcher";
+import VoterActions from "../actions/VoterActions";
+import FacebookConstants from "../constants/FacebookConstants";
+const cookies = require("../utils/cookies");
+
+module.exports = {
+
+  initFacebook: function () {
+      window.fbAsyncInit = function () {
+          window.FB.init({
+            appId: web_app_config.FACEBOOK_APP_ID,
+            xfbml: true,
+            version: "v2.5"
+          });
+      };
+
+    (function (d, s, id){
+       var js, fjs = d.getElementsByTagName(s)[0];
+       if (d.getElementById(id)) {return;}
+       js = d.createElement(s); js.id = id;
+       js.src = "//connect.facebook.net/en_US/sdk.js";
+       fjs.parentNode.insertBefore(js, fjs);
+     }(document, "script", "facebook-jssdk"));
+  },
+
+  facebookSignIn: function (facebook_id, facebook_email){
+    Dispatcher.loadEndpoint("facebookSignIn", {
+      facebook_id: facebook_id,
+      facebook_email: facebook_email
+    });
+  },
+
+  facebookDisconnect: function (){
+    Dispatcher.loadEndpoint("facebookDisconnect");
+  },
+
+  appLogout: function (){
+    cookies.setItem("voter_device_id", "", -1, "/");
+    VoterActions.signOut();
+    VoterActions.retrieveVoter();
+  },
+
+  login: function () {
+    window.FB.getLoginStatus(function (response) {
+      if (response.status === "connected") {
+        Dispatcher.dispatch({
+            type: FacebookConstants.FACEBOOK_LOGGED_IN,
+            data: response
+        });
+      } else {
+        window.FB.login( (res) =>{
+          Dispatcher.dispatch({
+              type: FacebookConstants.FACEBOOK_LOGGED_IN,
+              data: res
+          });
+        }, {scope: "public_profile,email"});
+      }
+    });
+  },
+
+  logout: function () {
+      window.FB.logout((response) => {
+          Dispatcher.dispatch({
+              type: FacebookConstants.FACEBOOK_LOGGED_OUT,
+              data: response
+          });
+      });
+  },
+
+  disconnectFromFacebook: function () {
+      // Removing connection between We Vote and Facebook
+      Dispatcher.dispatch({
+          type: FacebookConstants.FACEBOOK_SIGN_IN_DISCONNECT,
+          data: true
+      });
+  },
+
+  getFacebookProfilePicture: function (userId) {
+      window.FB.api(`/${userId}/picture?type=large`, (response) => {
+          Dispatcher.dispatch({
+              type: FacebookConstants.FACEBOOK_RECEIVED_PICTURE,
+              data: response
+          });
+      });
+  },
+
+  getFacebookEmail: function (){
+    window.FB.api("/me?fields=id,email", (response) => {
+        Dispatcher.dispatch({
+            type: FacebookConstants.FACEBOOK_RECEIVED_EMAIL,
+            data: response
+        });
+    });
+  },
+
+  savePhoto: function (url){
+    Dispatcher.loadEndpoint("voterPhotoSave", { facebook_profile_image_url_https: url } );
+  },
+};

src/js/actions/VoterActions.js

@@ -3,7 +3,7 @@ import Dispatcher from "../dispatcher/Dispatcher";
 module.exports = {
 
   signOut: function (){
-    Dispatcher.loadEndpoint("voterSignOut", {sign_out_all_devices: true});
+    Dispatcher.loadEndpoint("voterSignOut", {sign_out_all_devices: false});
   },
 
   retrieveVoter: function () {

src/js/components/Facebook/FacebookDisconnect.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import FacebookActionCreators from "../../actions/FacebookActionCreators";
+import FacebookActions from "../../actions/FacebookActions";
 
 class FacebookDisconnect extends React.Component {
     constructor (props) {
@@ -8,7 +8,7 @@ class FacebookDisconnect extends React.Component {
 
     didClickDisconnectFromFacebookButton (e) {
         console.log("didClickDisconnectFromFacebookButton");
-        FacebookActionCreators.disconnectFromFacebook();
+        FacebookActions.disconnectFromFacebook();
     }
 
     render () {

src/js/components/Facebook/FacebookDownloadPicture.jsx

@@ -1,6 +1,6 @@
 import React, { PropTypes } from "react";
 
-import FacebookActionCreators from "../../actions/FacebookActionCreators";
+import FacebookActions from "../../actions/FacebookActions";
 
 class FacebookDownloadPicture extends React.Component {
   static propTypes = {
@@ -19,7 +19,7 @@ class FacebookDownloadPicture extends React.Component {
     }
 
     didClickDownloadPicture () {
-        FacebookActionCreators.getFacebookProfilePicture(this.props.userId);
+        FacebookActions.getFacebookProfilePicture(this.props.userId);
     }
 }
 

src/js/components/Facebook/FacebookLogin.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import FacebookActionCreators from "../../actions/FacebookActionCreators";
+import FacebookActions from "../../actions/FacebookActions";
 
 class FacebookLogin extends React.Component {
     constructor (props) {
@@ -10,7 +10,7 @@ class FacebookLogin extends React.Component {
     }
 
     didClickFacebookLoginButton (e) {
-        FacebookActionCreators.login();
+        FacebookActions.login();
     }
 }
 

src/js/components/Facebook/FacebookLogout.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import FacebookActionCreators from "../../actions/FacebookActionCreators";
+import FacebookActions from "../../actions/FacebookActions";
 
 class FacebookLogout extends React.Component {
     constructor (props) {
@@ -10,7 +10,7 @@ class FacebookLogout extends React.Component {
     }
 
     didClickFacebookLogoutButton (e) {
-        FacebookActionCreators.logout();
+        FacebookActions.logout();
     }
 }
 

src/js/components/Facebook/FacebookPicture.jsx

@@ -4,9 +4,6 @@ import FacebookConstants from "../../constants/FacebookConstants";
 
 export default class FacebookPicture extends React.Component {
     static propTypes = {
-      history: PropTypes.object,
-      children: PropTypes.object,
-      params: PropTypes.object.isRequired,
       facebookPictureStatus: PropTypes.string,
       facebookPictureUrl: PropTypes.string
     };

src/js/components/Facebook/FacebookSignIn.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import FacebookActionCreators from "../../actions/FacebookActionCreators";
+import FacebookActions from "../../actions/FacebookActions";
 
 class FacebookSignIn extends React.Component {
   constructor (props) {
@@ -12,8 +12,7 @@ class FacebookSignIn extends React.Component {
   }
 
   didClickFacebookLoginButton () {
-    console.log("didClickFacebookLoginButton");
-    FacebookActionCreators.login(); // We call FacebookActionCreators.connectWithFacebook() within login()
+    FacebookActions.login();
   }
 }
 

src/js/components/Facebook/Main.js

@@ -1,15 +1,13 @@
 import React from "react";
-
-import FacebookActionCreators from "../../actions/FacebookActionCreators";
+import FacebookActions from "../../actions/FacebookActions";
 import FacebookStore from "../../stores/FacebookStore";
-import FacebookLogin from "../../components/Facebook/FacebookLogin";
-import FacebookLogout from "../../components/Facebook/FacebookLogout";
 import FacebookDownloadPicture from "../../components/Facebook/FacebookDownloadPicture";
 import FacebookPicture from "../../components/Facebook/FacebookPicture";
+import VoterStore from "../../stores/VoterStore";
 
 class Main extends React.Component {
     constructor (props) {
-        super();
+        super(props);
         this.state = this.getFacebookState();
     }
 
@@ -19,33 +17,34 @@ class Main extends React.Component {
             loggedIn: FacebookStore.loggedIn,
             userId: FacebookStore.userId,
             facebookPictureStatus: FacebookStore.facebookPictureStatus,
-            facebookPictureUrl: FacebookStore.facebookPictureUrl
+            facebookPictureUrl: VoterStore.getPhoto()
         };
     }
 
     componentDidMount () {
-        FacebookActionCreators.initFacebook();
-        this.changeListener = this._onFacebookChange.bind(this);
-        FacebookStore.addChangeListener(this.changeListener);
+        FacebookActions.initFacebook();
+        this.listener = FacebookStore.addListener(this._onChange.bind(this));
+        this.voterListener = VoterStore.addListener(this._onChange.bind(this));
     }
 
     componentWillUnmount () {
-        FacebookStore.removeChangeListener(this.changeListener);
-      }
+      this.listener.remove();
+      this.voterListener.remove();
+    }
 
-    _onFacebookChange () {
+    _onChange () {
         this.setState(this.getFacebookState());
     }
 
-
     render () {
         return <div>
-                {!this.state.loggedIn ? <FacebookLogin /> : null}
-                {this.state.loggedIn ? <FacebookLogout /> : null}
                 <p>Facebook logged in: {this.state.loggedIn ? "true" : "false"}</p>
                 <p>Facebook access token: {this.state.accessToken}</p>
                 <p>User ID is: {this.state.userId}</p>
-                {this.state.userId ? <FacebookDownloadPicture userId={this.state.userId} /> : null}
+                {this.state.userId ?
+                  <FacebookDownloadPicture userId={this.state.userId} /> :
+                  <div></div>
+                }
                 <FacebookPicture
                     facebookPictureStatus={this.state.facebookPictureStatus}
                     facebookPictureUrl={this.state.facebookPictureUrl} />

src/js/components/Header.jsx

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from "react";
 import { Link } from "react-router";
 import HeaderIcons from "./Navigation/HeaderIcons";
-import FacebookActionCreators from "../actions/FacebookActionCreators";
+import FacebookActions from "../actions/FacebookActions";
 
 export default class Header extends Component {
   static propTypes = {
@@ -48,7 +48,7 @@ export default class Header extends Component {
     var { visible } = this.state;
     let location = this.props.location;
     var { signed_in_personal } = this.props.voter;
-    const logOut = FacebookActionCreators.appLogout;
+    const logOut = FacebookActions.appLogout;
 
     const header =
       <header className="header row">