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:
commit
0304009a9b
14
js/actions/facebook_actions.js
Normal file
14
js/actions/facebook_actions.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import { altThirdParty } from '../alt';
|
||||||
|
|
||||||
|
|
||||||
|
class FacebookActions {
|
||||||
|
constructor() {
|
||||||
|
this.generateActions(
|
||||||
|
'sdkReady'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default altThirdParty.createActions(FacebookActions);
|
17
js/app.js
17
js/app.js
@ -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();
|
||||||
|
|
||||||
|
@ -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() {
|
||||||
|
@ -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 = [];
|
@ -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');
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user