Merge e09e17d into f86a279

package.json

@@ -52,9 +52,12 @@
     "react-dom": "^16.7.0",
     "react-materialize": "^2.5.0",
     "react-pure-lifecycle": "^3.0.0",
+    "react-facebook-login": "^4.1.1",
+    "react-google-login": "^5.0.2",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-toastify": "^4.5.2",
+    "react-twitter-auth": "0.0.13",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "sass-loader": "^7.1.0",

src/app/App.jsx

@@ -9,6 +9,7 @@ import Navbar from './navBar/NavbarComponent';
 import ProfileContainer from './profile';
 import { ResetPassword } from './resetPassword';
 import { NewPassword } from './newPassword';
+import SocialAuth from './login/SocialAuth';
 
 const App = () => (
   <Router>
@@ -24,6 +25,7 @@ const App = () => (
         <Route path="/resetpassword" component={ResetPassword} exact />
         <Route path="/newpassword" component={NewPassword} exact />
         <Route path="/create-article" component={CreateArticle} exact />
+        <Route path="/auth" component={SocialAuth} exact />
       </Switch>
       <Footer />
     </Fragment>

src/app/__snapshots__/app.test.js.snap

@@ -49,6 +49,11 @@ exports[`App should render App 1`] = `
       exact={true}
       path="/create-article"
     />
+    <Route
+      component={[Function]}
+      exact={true}
+      path="/auth"
+    />
   </Switch>
   <Footer />
 </BrowserRouter>

src/app/article/listArticle.test.js

@@ -270,6 +270,7 @@ describe('Connected ListArticleComponent Component Dispatches Success', () => {
 
   it('it should render the connected component', () => {
     expect(wrapper.find(ListArticleComponent).length).toEqual(1);
+    expect(wrapper.exists()).toBe(true);
   });
 
   it('it should dispatch fetchArticle action', () => {

src/app/login/LoginComponent.jsx

@@ -1,11 +1,23 @@
 import React, { Fragment } from 'react';
+import TwitterLogin from 'react-twitter-auth';
 import { Redirect, Link } from 'react-router-dom';
 import { EllipsisLoaderComponent } from '../loaders';
 import { constants } from './duck';
-import { facebook, twitter, googleplus } from '../../img';
+import { facebook, googleplus } from '../../img';
+import { googleUrl, facebookUrl } from './duck/operations';
 import './signin.scss';
 
-export const LoginComponent = ({ loginUser, loginState }) => {
+export const LoginComponent = ({ loginUser, loginState, updateLoginState }) => {
+  const onSuccess = response => {
+    response.json().then(data => {
+      updateLoginState(constants.LOGIN_SUCCESS, data);
+    });
+  };
+
+  const onFailed = error => {
+    console.log(error);
+  };
+
   const onFormSubmit = e => {
     e.preventDefault();
     const usernameOrEmail = e.target.elements.usernameOrEmail.value.trim();
@@ -22,24 +34,34 @@ export const LoginComponent = ({ loginUser, loginState }) => {
       </button>
       <p id="alternateText">Or sign in with</p>
       <div className="row">
-        <img
-          className="col s4"
-          id="auth-facebook-logo"
-          src={facebook}
-          alt="facebook logo"
-        />
-        <img
-          className="col s4"
-          id="auth-twitter-logo"
-          src={twitter}
-          alt="twitter logo"
-        />
-        <img
-          className="col s4"
-          id="auth-googleplus-logo"
-          src={googleplus}
-          alt="googleplus logo"
-        />
+        <a href={facebookUrl}>
+          <img
+            className="col s4"
+            id="auth-facebook-logo"
+            src={facebook}
+            alt="facebook logo"
+          />
+        </a>
+        <div className="col s4">
+          <TwitterLogin
+            className="twitterComponentButton"
+            loginUrl="http://localhost:3000/api/v1/users/twitter"
+            onFailure={onFailed}
+            onSuccess={onSuccess}
+            text=""
+            id="twitterComponentButton"
+            requestTokenUrl="http://localhost:3000/api/v1/users/twitter/reverse"
+          />
+        </div>
+
+        <a href={googleUrl}>
+          <img
+            className="col s4"
+            id="auth-googleplus-logo"
+            src={googleplus}
+            alt="googleplus logo"
+          />
+        </a>
       </div>
       <div id="auth-forgot-password">
         <Link to="/resetpassword">Forgot Password? </Link> |

src/app/login/LoginContainer.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doLogin } from './duck';
+import { doLogin, updateLoginState } from './duck';
 import { LoginComponent as component } from './LoginComponent';
 
 const mapStateToProps = ({ login: { loginState, errorMessage } }) => {
@@ -10,6 +10,8 @@ const mapDispatchToProps = dispatch => {
   return {
     loginUser: (usernameOrEmail, password) =>
       dispatch(doLogin(usernameOrEmail, password)),
+    updateLogin: state => dispatch(updateLoginState(state)),
+    updateLoginState: (state, data) => dispatch(updateLoginState(state, data)),
   };
 };
 const LoginContainer = connect(

src/app/login/SocialAuth.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Redirect } from 'react-router-dom';
+import { socialMediaLogin } from './duck/operations';
+import constants from './duck/constants';
+import { RingLoaderComponent } from '../loaders';
+/* eslint-disable react/prefer-stateless-function */
+class SocialAuth extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    this.props.authLogin(window.location.search);
+  }
+
+  render() {
+    const { loginState } = this.props;
+
+    return (
+      <>
+        <div className="centerDiv">
+          {loginState !== constants.LOGIN_SUCCESS && (
+            <div>
+              <RingLoaderComponent />
+              <p>Logging in...</p>
+            </div>
+          )}
+        </div>
+        <div>
+          {loginState === constants.LOGIN_SUCCESS && <Redirect to="/" />}
+        </div>
+      </>
+    );
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    authLogin: params => {
+      dispatch(socialMediaLogin(params));
+    },
+  };
+};
+
+const mapStateToProps = ({ login: { loginState, errorMessage } }) => {
+  return { loginState, errorMessage };
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(SocialAuth);

src/app/login/__snapshots__/socialAuth.test.js.snap

@@ -0,0 +1,154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SOCIAL AUTH TEST SUITE SocialAuth Component should render the Social Auth Page 1`] = `
+<ContextConsumer>
+  <Component />
+</ContextConsumer>
+`;
+
+exports[`SOCIAL AUTH TEST SUITE SocialAuth Component should render the Social Auth Page with facebook sign in 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <Connect(SocialAuth)
+    authLogin={[Function]}
+    dispatch={[Function]}
+  >
+    <SocialAuth
+      authLogin={[Function]}
+      dispatch={[Function]}
+      errorMessage=""
+      loginState=""
+    >
+      <div
+        className="centerDiv"
+      >
+        <div>
+          <RingLoaderComponent>
+            <div
+              className="lds-ring"
+            >
+              <div />
+              <div />
+              <div />
+              <div />
+              <div />
+            </div>
+          </RingLoaderComponent>
+          <p>
+            Logging in...
+          </p>
+        </div>
+      </div>
+      <div />
+    </SocialAuth>
+  </Connect(SocialAuth)>
+</Provider>
+`;
+
+exports[`SOCIAL AUTH TEST SUITE SocialAuth Component should render the Social Auth Page with google sing in 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <Connect(SocialAuth)
+    authLogin={[Function]}
+    dispatch={[Function]}
+  >
+    <SocialAuth
+      authLogin={[Function]}
+      dispatch={[Function]}
+      errorMessage=""
+      loginState=""
+    >
+      <div
+        className="centerDiv"
+      >
+        <div>
+          <RingLoaderComponent>
+            <div
+              className="lds-ring"
+            >
+              <div />
+              <div />
+              <div />
+              <div />
+              <div />
+            </div>
+          </RingLoaderComponent>
+          <p>
+            Logging in...
+          </p>
+        </div>
+      </div>
+      <div />
+    </SocialAuth>
+  </Connect(SocialAuth)>
+</Provider>
+`;
+
+exports[`SOCIAL AUTH TEST SUITE SocialAuth Component should throw exception when authentication fails 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <Connect(SocialAuth)
+    authLogin={[Function]}
+    dispatch={[Function]}
+  >
+    <SocialAuth
+      authLogin={[Function]}
+      dispatch={[Function]}
+      errorMessage=""
+      loginState=""
+    >
+      <div
+        className="centerDiv"
+      >
+        <div>
+          <RingLoaderComponent>
+            <div
+              className="lds-ring"
+            >
+              <div />
+              <div />
+              <div />
+              <div />
+              <div />
+            </div>
+          </RingLoaderComponent>
+          <p>
+            Logging in...
+          </p>
+        </div>
+      </div>
+      <div />
+    </SocialAuth>
+  </Connect(SocialAuth)>
+</Provider>
+`;

src/app/login/duck/constants.js

@@ -2,4 +2,7 @@ export default {
   LOGGING_IN: 'LOGGING_IN',
   LOGIN_ERROR: 'LOGIN_ERROR',
   LOGIN_SUCCESS: 'LOGIN_SUCCESS',
+  LOGGING_FACEBBOK: 'LOGGING_FACEBBOK',
+  LOGGING_FACEBBOK_ERROR: 'LOGGING_FACEBBOK_ERROR',
+  LOGGING_FACEBBOK_SUCCESS: 'LOGGING_FACEBBOK_SUCCESS',
 };

src/app/login/duck/index.js

@@ -1,5 +1,5 @@
 export { default as loginReducer } from './reducers';
 export { default as constants } from './constants';
-export { default as doLogin } from './operations';
+export { doLogin, updateLoginState } from './operations';
 export { default as actions } from './actions';
 export { default as types } from './types';