Fix loading of Facebook share button

js/actions/facebook_actions.js

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

js/components/ascribe_social_share/facebook_share_button.js

@@ -2,6 +2,8 @@
 
 import React from 'react';
 
+import FacebookHandler from '../../third_party/facebook';
+
 import AppConstants from '../../constants/application_constants';
 
 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() {

js/third_party/facebook.js

@@ -1,13 +1,18 @@
 'use strict';
 
 import { altThirdParty } from '../alt';
+
 import EventActions from '../actions/event_actions';
+import FacebookActions from '../actions/facebook_actions';
 
 import AppConstants from '../constants/application_constants'
 
 class FacebookHandler {
     constructor() {
+        this.loaded = false;
+
         this.bindActions(EventActions);
+        this.bindActions(FacebookActions);
     }
 
     onApplicationWillBoot(settings) {
@@ -16,15 +21,19 @@ class FacebookHandler {
         window.fbAsyncInit = () => {
             FB.init({
                 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',
                 cookie: false
             });
+
+            FacebookActions.sdkReady();
         };
     }
+
+    onSdkReady() {
+        this.loaded = true;
+    }
 }
 
 export default altThirdParty.createStore(FacebookHandler, 'FacebookHandler');

sass/ascribe_social_share.scss

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