1
0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 10:25:08 +01:00

Merge pull request #97 from ascribe/AD-1452-share-to-facebook-not-loaded

AD-1452 Facebook share button sometimes not loading
This commit is contained in:
Brett Sun 2016-01-19 10:19:47 +01:00
commit 0304009a9b
10 changed files with 71 additions and 32 deletions

View File

@ -0,0 +1,14 @@
'use strict';
import { altThirdParty } from '../alt';
class FacebookActions {
constructor() {
this.generateActions(
'sdkReady'
);
}
}
export default altThirdParty.createActions(FacebookActions);

View File

@ -7,9 +7,7 @@ import React from 'react';
import { Router, Redirect } from 'react-router'; import { Router, Redirect } from 'react-router';
import history from './history'; import history from './history';
/* eslint-disable */
import fetch from 'isomorphic-fetch'; import fetch from 'isomorphic-fetch';
/* eslint-enable */
import ApiUrls from './constants/api_urls'; import ApiUrls from './constants/api_urls';
@ -24,15 +22,13 @@ import { getSubdomain } from './utils/general_utils';
import EventActions from './actions/event_actions'; import EventActions from './actions/event_actions';
/* eslint-disable */
// You can comment out the modules you don't need // You can comment out the modules you don't need
// import DebugHandler from './third_party/debug'; // import DebugHandler from './third_party/debug_handler';
import GoogleAnalyticsHandler from './third_party/ga'; import FacebookHandler from './third_party/facebook_handler';
import RavenHandler from './third_party/raven'; import GoogleAnalyticsHandler from './third_party/ga_handler';
import IntercomHandler from './third_party/intercom'; import IntercomHandler from './third_party/intercom_handler';
import NotificationsHandler from './third_party/notifications'; import NotificationsHandler from './third_party/notifications_handler';
import FacebookHandler from './third_party/facebook'; import RavenHandler from './third_party/raven_handler';
/* eslint-enable */
initLogging(); initLogging();
@ -106,4 +102,3 @@ class AppGateway {
let ag = new AppGateway(); let ag = new AppGateway();
ag.start(); ag.start();

View File

@ -2,6 +2,8 @@
import React from 'react'; import React from 'react';
import FacebookHandler from '../../third_party/facebook_handler';
import AppConstants from '../../constants/application_constants'; import AppConstants from '../../constants/application_constants';
import { InjectInHeadUtils } from '../../utils/inject_utils'; import { InjectInHeadUtils } from '../../utils/inject_utils';
@ -17,24 +19,40 @@ let FacebookShareButton = React.createClass({
}; };
}, },
componentDidMount() { getInitialState() {
/** return FacebookHandler.getState();
* Ideally we would only use FB.XFBML.parse() on the component that we're
* mounting, but doing this when we first load the FB sdk causes unpredictable behaviour.
* The button sometimes doesn't get initialized, likely because FB hasn't properly
* been initialized yet.
*
* To circumvent this, we always have the sdk parse the entire DOM on the initial load
* (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later.
*/
InjectInHeadUtils
.inject(AppConstants.facebook.sdkUrl)
.then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
}, },
shouldComponentUpdate(nextProps) { componentDidMount() {
return this.props.type !== nextProps.type; FacebookHandler.listen(this.onChange);
this.loadFacebook();
},
shouldComponentUpdate(nextProps, nextState) {
// Don't update if the props haven't changed or the FB SDK loading status is still the same
return this.props.type !== nextProps.type || nextState.loaded !== this.state.loaded;
},
componentDidUpdate() {
// If the component changes, we need to reparse the share button's XFBML.
// To prevent cases where the Facebook SDK hasn't been loaded yet at this stage,
// let's make sure that it's injected before trying to reparse.
this.loadFacebook();
},
onChange(state) {
this.setState(state);
},
loadFacebook() {
InjectInHeadUtils
.inject(AppConstants.facebook.sdkUrl)
.then(() => {
if (this.state.loaded) {
FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parent)
}
});
}, },
render() { render() {

View File

@ -4,7 +4,6 @@ import { altThirdParty } from '../alt';
import EventActions from '../actions/event_actions'; import EventActions from '../actions/event_actions';
class DebugHandler { class DebugHandler {
constructor() { constructor() {
let symbols = []; let symbols = [];

View File

@ -1,13 +1,18 @@
'use strict'; 'use strict';
import { altThirdParty } from '../alt'; import { altThirdParty } from '../alt';
import EventActions from '../actions/event_actions'; import EventActions from '../actions/event_actions';
import FacebookActions from '../actions/facebook_actions';
import AppConstants from '../constants/application_constants' import AppConstants from '../constants/application_constants'
class FacebookHandler { class FacebookHandler {
constructor() { constructor() {
this.loaded = false;
this.bindActions(EventActions); this.bindActions(EventActions);
this.bindActions(FacebookActions);
} }
onApplicationWillBoot(settings) { onApplicationWillBoot(settings) {
@ -16,15 +21,19 @@ class FacebookHandler {
window.fbAsyncInit = () => { window.fbAsyncInit = () => {
FB.init({ FB.init({
appId: AppConstants.facebook.appId, appId: AppConstants.facebook.appId,
// Force FB to parse everything on first load to make sure all the XFBML components are initialized. // Don't parse anything on the first load as we will parse all XFBML components as necessary.
// If we don't do this, we can run into issues with components on the first load who are not be xfbml: false,
// initialized.
xfbml: true,
version: 'v2.5', version: 'v2.5',
cookie: false cookie: false
}); });
FacebookActions.sdkReady();
}; };
} }
onSdkReady() {
this.loaded = true;
}
} }
export default altThirdParty.createStore(FacebookHandler, 'FacebookHandler'); export default altThirdParty.createStore(FacebookHandler, 'FacebookHandler');

View File

@ -7,4 +7,8 @@
width: 56px; width: 56px;
box-sizing: content-box; /* We want to ignore padding in these calculations as we use the sdk buttons' height and width */ box-sizing: content-box; /* We want to ignore padding in these calculations as we use the sdk buttons' height and width */
padding: 1px 0; padding: 1px 0;
&:not(:first-child) {
margin-left: 1px;
}
} }