Homepage updates without redirect

Author: ayush000

src/App.js

@@ -1,14 +1,31 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { browserHistory } from 'react-router';
+
+import { initializeSdk } from './facebook';
 import './App.css';
 
-class App extends Component {
+export default class extends React.Component {
+
+  componentDidMount() {
+    initializeSdk(function () {
+
+      // eslint-disable-next-line no-undef
+      FB.Event.subscribe('auth.statusChange', function (response) {
+        if (response.status === 'connected') {
+          browserHistory.replace('/Home');
+        } else {
+          console.log('not connected');
+          browserHistory.push('/');
+        }
+      });
+    });
+  }
   render() {
     return (
       <div className="App">
-      Hello!
+        {this.props.children}
       </div>
     );
   }
 }
 
-export default App;

src/Home.js

@@ -0,0 +1,55 @@
+import { getUserImage, getUser, logout } from './facebook';
+import React from 'react';
+
+export default class extends React.Component {
+    constructor() {
+
+        super();
+        this.state = {
+            imgUrl: '',
+            userName: '',
+        };
+    }
+
+    componentWillUpdate() {
+        console.log('Home component will update');
+
+        if (typeof FB !== 'undefined' && this.state.userName === '') {
+            getUser((err, user) => {
+                if (err) return console.log(err);
+                console.log(user);
+                this.setState({ userName: user.name });
+                getUserImage(user.id, (err, imgUrl) => {
+                    if (err) return console.log(err);
+                    this.setState({ imgUrl: imgUrl });
+                });
+            });
+        }
+    }
+    componentDidMount() {
+        console.log('Home component will mount');
+        if (typeof FB !== 'undefined') {
+            getUser((err, user) => {
+                if (err) return console.log(err);
+                console.log(user);
+                this.setState({ userName: user.name });
+                getUserImage(user.id, (err, imgUrl) => {
+                    if (err) return console.log(err);
+                    this.setState({ imgUrl: imgUrl });
+                });
+            });
+        }
+    }
+    handleButtonClick = () => {
+        logout();
+    }
+    render() {
+        return (
+            <div>
+                <button classID="logOut" onClick={this.handleButtonClick}>Log out</button>
+                <h2>{this.state.userName}</h2>
+                <img src={this.state.imgUrl} alt="Profile" />
+            </div>
+        );
+    }
+}

src/Login.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { login } from './facebook';
+export default class extends React.Component {
+
+    handleClick = () => {
+
+        login((err) => {
+            if (err) console.log(err);
+        });
+    }
+
+    render() {
+        return (
+            <div className="App">
+                <a href="#" onClick={this.handleClick}>Login using facebook</a>
+            </div>
+        );
+    }
+};

src/facebook.js

@@ -0,0 +1,72 @@
+function initializeSdk(callback) {
+    (function (d, s, id) {
+        var js, fjs = d.getElementsByTagName(s)[0];
+
+        if (d.getElementById(id)) {
+            console.log('if statement got called');
+            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'));
+
+
+    // sdk callback function
+    window.fbAsyncInit = () => {
+        console.log('fbAsyncInit called');
+        // eslint-disable-next-line no-undef
+        FB.init({
+            appId: '355696044788303',
+            status: true,
+            xfbml: true,
+            version: 'v2.8',
+            cookie: true,
+        });
+        callback();
+    };
+}
+
+function login(callback) {
+    // eslint-disable-next-line no-undef
+    FB.login((response) => {
+        // console.log('login response');
+        // console.log(response);
+        if (response && !response.error) {
+            return callback(null, response);
+        }
+        callback({ message: 'Unable to log in', response: response });
+    });
+}
+function logout() {
+    // eslint-disable-next-line no-undef
+    console.log(FB);
+    // eslint-disable-next-line no-undef
+    FB.logout();
+}
+
+function getUserImage(user_id, callback) {
+
+    // eslint-disable-next-line no-undef
+    FB.api(`${user_id}/picture?type=large`, (response) => {
+        if (response && response.data && response.data.url) {
+            return callback(null, response.data.url);
+        }
+        // console.log(response);
+        callback({ message: 'No image found' });
+    });
+}
+
+function getUser(callback) {
+    // eslint-disable-next-line no-undef
+    FB.api('/me', function (response) {
+        // console.log('Successful login for: ' + response.name);
+        if (response && response.name) {
+            console.log(response);
+            return callback(null, response);
+        }
+        callback({ message: 'No such user found' });
+    });
+}
+
+export { initializeSdk, login, logout, getUser, getUserImage };

src/index.js

@@ -1,12 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import Login from './Login';
+import Home from './Home';
 import { Router, Route, browserHistory, IndexRoute } from 'react-router';
 import './index.css';
 
 ReactDOM.render(
   <Router history={browserHistory}>
     <Route path="/" component={App}>
+      <IndexRoute component={Login} />
+      <Route path="/home" component={Home} />
     </Route>
   </Router>,
   document.getElementById('root')