Merge 67a7a05 into 1adefb8

andela · Nov 5, 2018 · 71519a8 · 71519a8
2 parents 1adefb8 + 67a7a05
commit 71519a8
Show file tree

Hide file tree

Showing 17 changed files with 16,431 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,14 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
+    "dotenv-webpack": "^1.5.7",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "node-sass": "^4.9.4",
+    "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
+    "react-facebook-login": "^4.1.1",
+    "react-google-login": "^3.2.1",
+    "react-redux": "^5.1.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.0.5",
-    "react-redux": "^5.1.0",
+    "react-social-login-buttons": "^2.2.0",
+    "react-toastify": "^4.4.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0"
   },
@@ -38,6 +45,8 @@
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-react": "^7.11.1"
+    "eslint-plugin-react": "^7.11.1",
+    "jest": "^23.6.0",
+    "redux-mock-store": "^1.5.3"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <link rel="stylesheet"
           href="https://fonts.googleapis.com/css?family=Open+Sans">
@@ -25,6 +26,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     <title>Authors Haven</title>
   </head>
   <body>

diff --git a/src/actions/actionCreators.js b/src/actions/actionCreators.js
@@ -0,0 +1,13 @@
+import {
+  SOCIAL_LOGIN_INITIATED,
+  SOCIAL_LOGIN_SUCCESS,
+} from './types';
+
+export const socialLoginInitiated = () => ({
+  type: SOCIAL_LOGIN_INITIATED,
+});
+
+
+export const socialLoginSuccess = () => ({
+  type: SOCIAL_LOGIN_SUCCESS,
+});
diff --git a/src/actions/facebookActions.js b/src/actions/facebookActions.js
@@ -0,0 +1,18 @@
+import axiosInstance from '../config/axiosInstance';
+import {
+  socialLoginInitiated,
+  socialLoginSuccess,
+} from './actionCreators';
+
+const facebookLoginUser = (serviceProvider, userData) => (dispatch) => {
+  dispatch(socialLoginInitiated(true));
+  return axiosInstance.post(serviceProvider, userData)
+    .then((res) => {
+      console.log('res', res);
+      localStorage.setItem('token', res.data.user.access_token);
+      dispatch(socialLoginSuccess(res));
+    })
+    .catch((error) => error);
+};
+
+export default facebookLoginUser;
diff --git a/src/actions/types.js b/src/actions/types.js
@@ -0,0 +1,2 @@
+export const SOCIAL_LOGIN_INITIATED = 'SOCIAL_LOGIN_INITIATED';
+export const SOCIAL_LOGIN_SUCCESS = 'SOCIAL_LOGIN_SUCCESS';
diff --git a/src/actions/userActions.js b/src/actions/userActions.js
@@ -0,0 +1,24 @@
+import { toast } from 'react-toastify';
+import axiosInstance from '../config/axiosInstance';
+import {
+  socialLoginInitiated,
+  socialLoginSuccess,
+} from './actionCreators';
+
+const googleLoginUser = (serviceProvider, userData) => (dispatch) => {
+  dispatch(socialLoginInitiated(true));
+  return axiosInstance.post(serviceProvider, userData)
+    .then((res) => {
+      console.log('res', res);
+      localStorage.setItem('token', res.data.user.access_token);
+      dispatch(socialLoginSuccess(res));
+    })
+    .catch((error) => {
+      console.log(error);
+      toast.error(error, { autoClose: 3500, hideProgressBar: true }, {
+        position: toast.POSITION.TOP_CENTER,
+      });
+    });
+};
+
+export default googleLoginUser;
diff --git a/src/assets/App.css b/src/assets/App.css
@@ -98,3 +98,42 @@ header.uvp {
 .lp-intro {
   margin-top: 36px;
 }
+.icon-with-margin {
+  margin-right: 10px;
+}
+.raised-font{
+  /* margin-top: 140px !important; */
+}
+.google{
+  background-color: #d34836;
+  display: inline-block;
+  background: rgb(209, 72, 54);
+  color: rgb(255, 255, 255);
+  width: 150px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-radius: 2px;
+  border: 1px solid transparent;
+  font-size: 20px;
+  font-weight: bold;
+  font-family: Roboto;
+  transition: background-color .3s,border-color .3s;
+}
+
+.facebook{
+  font-family: Roboto;
+  font-weight: bold;
+  display: inline-block;
+  border-radius: 2px;
+  color: #fff;
+  width: 150px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  cursor: pointer;
+  font-size: 20px;
+  text-decoration: none;
+  transition: background-color .3s,border-color .3s;
+  background-color: #4c69ba;
+  display: inline-block;
+  border:solid 1px #4c69ba;
+}
diff --git a/src/components/login/Facebook.js b/src/components/login/Facebook.js
@@ -0,0 +1,67 @@
+import React, { PureComponent } from 'react';
+import { Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+import FacebookLogin from 'react-facebook-login';
+import PropTypes from 'prop-types';
+import facebookLoginUser from '../../actions/facebookActions';
+
+class Facebook extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      redirect: false,
+    };
+  }
+
+  signup = (userToken, serviceProvider) => {
+    let userData;
+    userData = {
+      user: {
+        access_token: userToken,
+      },
+    };
+    if (userData) {
+      const { facebookLoginUser } = this.props;
+      facebookLoginUser(serviceProvider, userData)
+        .catch(alert('error'));
+    }
+  }
+
+  responseFacebook = (response) => {
+    const token = response.accessToken;
+    this.signup(token, 'facebook/');
+  }
+
+  render() {
+    const value = this.state;
+    if (value.redirect) {
+      const to = { pathname: '/' };
+      return (
+        <Redirect to={to} />
+      );
+    }
+    return (
+      <FacebookLogin
+        appId="2147542838793839"
+        fields="name,email,picture"
+        callback={this.responseFacebook}
+        icon="fa fa-facebook-square icon-with-margin"
+        cssClass="facebook"
+        textButton="Facebook"
+
+      />
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  isLoggedIn: state.user.isLoggedIn,
+  loading: state.user.loading,
+});
+
+Facebook.propTypes = {
+  // isLoggedIn: PropTypes.bool.isRequired,
+  facebookLoginUser: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, { facebookLoginUser })(Facebook);
diff --git a/src/components/login/Google.js b/src/components/login/Google.js
@@ -0,0 +1,86 @@
+import React, { PureComponent } from 'react';
+import { Redirect } from 'react-router-dom';
+import { connect } from 'react-redux';
+import GoogleLogin from 'react-google-login';
+import PropTypes from 'prop-types';
+
+import googleLoginUser from '../../actions/userActions';
+
+class Googlelogin extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      redirect: false,
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.isLoggedIn) {
+      this.setState({
+        redirect: true,
+      });
+    }
+  }
+
+  signup = (userToken, serviceProvider) => {
+    let userData;
+    if (serviceProvider === 'google/') {
+      userData = {
+        user: {
+          access_token: userToken,
+        },
+      };
+    }
+
+    if (userData) {
+      const { googleLoginUser } = this.props;
+      googleLoginUser(serviceProvider, userData);
+    }
+  }
+
+  googleResponse = (response) => {
+    const token = response.tokenId;
+    this.signup(token, 'google/');
+  }
+
+  render() {
+    const value = this.state;
+    if (value.redirect) {
+      const to = { pathname: '/' };
+      return (
+        <Redirect to={to} />
+      );
+    }
+    return (
+      <div>
+        <GoogleLogin
+          clientId="1040550554735-0lfo665jrpgkprjkqdvh9njlc46mu6rg.apps.googleusercontent.com"
+          redirectUri="/"
+          onSuccess={this.googleResponse}
+          onFailure={this.googleResponse}
+          className="google"
+        >
+          <i className="fa fa-google-plus  icon-with-margin" />
+          <span className="raised-font"> Google</span>
+
+        </GoogleLogin>
+        &nbsp;
+
+      </div>
+
+    );
+  }
+}
+
+const mapStateToProps = (state) => ({
+  isLoggedIn: state.user.isLoggedIn,
+  loading: state.user.loading,
+});
+
+Googlelogin.propTypes = {
+  isLoggedIn: PropTypes.bool.isRequired,
+  googleLoginUser: PropTypes.func.isRequired,
+};
+
+export { Googlelogin as GoogleTest };
+export default connect(mapStateToProps, { googleLoginUser })(Googlelogin);
diff --git a/src/components/login/Login.js b/src/components/login/Login.js
@@ -1,5 +1,19 @@
 import React from 'react';
+import Googlelogin from './Google';
+import Faceboook from './Facebook';
 
-const Login = () => <h1>Login!</h1>;
+const Login = () => (
+  <div>
+    <h1>Login!</h1>
+    <div className="row">
+      <div className="col-md-2">
+        <Googlelogin />
+      </div>
+      <div className="col-md-2">
+        <Faceboook />
+      </div>
+    </div>
+  </div>
+);
 
 export default Login;
diff --git a/src/components/postData.js b/src/components/postData.js
@@ -0,0 +1,24 @@
+import axiosInstance from '../config/axiosInstance';
+
+// function startSocialLogin() {
+//   return {
+//     type: 'Start_Social_Login',
+//   };
+
+// function endSocialLogin (token) {
+//   return {
+//     type: 'End_Social_Login',
+//     token:token,
+//   };
+
+const postData = (serviceProvider, userData) => {
+  // dispatch(startSocialLogin);
+  return axiosInstance.post(serviceProvider, userData)
+    .then((res) => {
+      console.log('res', res);
+      // dispatch(endSocialLogin(res));
+    })
+    .catch((error) => error);
+};
+
+export default postData;
diff --git a/src/config/axiosInstance.js b/src/config/axiosInstance.js
@@ -0,0 +1,9 @@
+import axios from 'axios';
+
+const apiBaseUrl = 'http://127.0.0.1:8000/api/auth/';
+
+const axiosInstance = axios.create({
+  baseURL: apiBaseUrl,
+});
+
+export default axiosInstance;
diff --git a/src/reducers/rootReducer.js b/src/reducers/rootReducer.js
@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
+import userReducer from './userReducer';
+
 
 const rootReducer = combineReducers({
 // dummy object for reducer
-  user: () => ({}),
+  user: userReducer,
 });
 
 export default rootReducer;