diff --git a/.env b/.env index 610c409b2..92df7e55c 100644 --- a/.env +++ b/.env @@ -1,6 +1,9 @@ NODE_ENV=development PORT=8000 API_URL=http://quran.com:3000 +ONE_QURAN_URL=http://localhost:3030 SEGMENTS_KEY= SENTRY_KEY_CLIENT= SENTRY_KEY_SERVER= +# Quran.com - development app, no need to worry! +FACEBOOK_APP_ID=1599019233731707 diff --git a/.eslintrc b/.eslintrc index a277bf4a8..2ee45a587 100644 --- a/.eslintrc +++ b/.eslintrc @@ -52,6 +52,7 @@ Raven: true, mixpanel: true, "expect": true, - "browser": true + "browser": true, + "FB": true } } diff --git a/Dockerfile b/Dockerfile index e3f6568dc..ee54035b0 100644 --- a/Dockerfile +++ b/Dockerfile @@ -4,6 +4,9 @@ ENV NODE_ENV production ENV API_URL http://api.quran.com:3000 ENV SENTRY_KEY_CLIENT https://44c105328ae544ae9928f9eb74b40061@app.getsentry.com/80639 ENV SENTRY_KEY_SERVER https://44c105328ae544ae9928f9eb74b40061:41ca814d33124e04ab450104c3938cb1@app.getsentry.com/80639 +# It's okay because it's only the APP ID +ENV FACEBOOK_APP_ID 1557596491207315 +ENV ONE_QURAN_URL https://one.quran.com ENV PORT 8000 ENV NODE_PATH "./src" diff --git a/src/client.js b/src/client.js index 6ee43334d..7af6269d0 100644 --- a/src/client.js +++ b/src/client.js @@ -40,7 +40,7 @@ window.clearCookies = () => { reactCookie.remove('isFirstTime'); }; -match({ history, routes: routes() }, (error, redirectLocation, renderProps) => { +match({ history, routes: routes(store) }, (error, redirectLocation, renderProps) => { const component = ( {}, + appId: config.facebookAppId, + textButton: 'Connect with Facebook', + icon: 'fa-facebook', + scope: 'email,public_profile,user_location', + xfbml: true, + cookie: true, + autoLoad: false, + size: 'md', + fields: 'first_name,name,picture', + cssClass: 'btn btn-facebook btn-', + version: '2.7' + }; + + componentDidMount() { + window.fbAsyncInit = () => { + FB.init({ + appId: this.props.appId, + xfbml: this.props.xfbml, + cookie: this.props.cookie, + version: `v${this.props.version}`, + }); + + if (this.props.autoLoad) { + FB.getLoginStatus(this.checkLoginState); + } + }; + + // Load the SDK asynchronously + (function(d, s, id) { // eslint-disable-line + const element = d.getElementsByTagName(s)[0]; + const fjs = element; + let js = element; + 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); + }(window.document, 'script', 'facebook-jssdk')); // eslint-disable-line + } + + responseApi = (authResponse) => { + const { callback, facebook, push } = this.props; // eslint-disable-line no-shadow + + return FB.api('/me', { fields: this.props.fields }, (me) => { + me.accessToken = authResponse.accessToken; // eslint-disable-line + callback(me); + + return facebook(authResponse.accessToken).then(action => !action.error && push('/')); + }); + }; + + checkLoginState = (response) => { + if (response.authResponse) { + this.responseApi(response.authResponse); + } else { + if (this.props.callback) { + this.props.callback({ status: response.status }); + } + } + }; + + handleClick = () => { + FB.login(this.checkLoginState, { scope: this.props.scope }); + }; + + render() { + return ( +
+ +
+
+ ); + } +} diff --git a/src/components/IndexHeader/Nav/index.js b/src/components/IndexHeader/Nav/index.js index 5954e430b..55396965c 100644 --- a/src/components/IndexHeader/Nav/index.js +++ b/src/components/IndexHeader/Nav/index.js @@ -1,48 +1,25 @@ import React, { Component, PropTypes } from 'react'; import Link from 'react-router/lib/Link'; +import { connect } from 'react-redux'; -class IndexHeaderNav extends Component { +export class IndexHeaderNav extends Component { static propTypes = { - navlink: PropTypes.bool + user: PropTypes.object }; state = { open: false }; - openNav(e) { - e.preventDefault(); + openNav(event) { + event.preventDefault(); this.setState({open: !this.state.open}); } links() { - let classNames = `links ${this.state.open ? 'open' : ''}`; - - if (this.props.navlink === false) { - return ( - - ); - } + const { user } = this.props; + const classNames = `links ${this.state.open ? 'open' : ''}`; return ( ); } @@ -82,4 +67,8 @@ class IndexHeaderNav extends Component { } } -export default IndexHeaderNav; +export default connect( + state => ({ + user: state.auth.user + }) +)(IndexHeaderNav); diff --git a/src/components/IndexHeader/index.js b/src/components/IndexHeader/index.js index 37f7fbfa2..e2baaecdb 100644 --- a/src/components/IndexHeader/index.js +++ b/src/components/IndexHeader/index.js @@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react'; import Link from 'react-router/lib/Link'; import SearchInput from '../SearchInput'; -import IndexHeaderNav from './Nav'; +import Nav from './Nav'; import debug from '../../helpers/debug'; @@ -10,8 +10,7 @@ const logo = require('../../../static/images/logo-lg-w.png'); export default class IndexHeader extends Component { static propTypes = { - noSearch: PropTypes.bool, - navlink: PropTypes.any + noSearch: PropTypes.bool }; renderSearch() { @@ -29,7 +28,7 @@ export default class IndexHeader extends Component { return (
- +