Merge pull request #312 from DemocracyLab/prerender_fixes

marlonkeating · web-flow · commit eecb12139beb · 2019-12-20T10:32:26.000-08:00
Prerender fixes
diff --git a/civictechprojects/templates/new_index.html b/civictechprojects/templates/new_index.html
@@ -16,6 +16,10 @@
   </head>
   <body>
     {{ googleTagsBodyScript }}
+    <script>
+      // Stop prerender.io from caching page until it loads
+      window.prerenderReady = false;
+    </script>
     <script>
       window.fbAsyncInit = function() {
         FB.init({
@@ -25,6 +29,8 @@
           version    : 'v2.10',
         });
         FB.AppEvents.logPageView();
+        window.democracyLabEvents = {'fbLoaded': true};
+        window.dispatchEvent(new Event('fbLoaded'));
       };
       (function(d, s, id){
          var js, fjs = d.getElementsByTagName(s)[0];
diff --git a/common/components/componentsBySection/FindProjects/ProjectCardsContainer.jsx b/common/components/componentsBySection/FindProjects/ProjectCardsContainer.jsx
@@ -13,6 +13,7 @@ import ProjectCard from './ProjectCard.jsx';
 import ProjectSearchStore from '../../stores/ProjectSearchStore.js';
 import ProjectSearchDispatcher from '../../stores/ProjectSearchDispatcher.js';
 import LoadingMessage from '../../chrome/LoadingMessage.jsx';
+import prerender from "../../utils/prerender.js";
 
 type State = {|
   projects: List<Project>,
@@ -28,6 +29,8 @@ class ProjectCardsContainer extends React.Component<{||}, State> {
   }
 
   static calculateState(prevState: State): State {
+    prerender.ready(!ProjectSearchStore.getProjectsLoading());
+    
     return {
       projects: ProjectSearchStore.getProjects(),
       project_pages: ProjectSearchStore.getProjectPages(),
diff --git a/common/components/controllers/AboutProjectController.jsx b/common/components/controllers/AboutProjectController.jsx
@@ -10,6 +10,7 @@ import Truncate from "../utils/truncate.js";
 import AboutProjectDisplay from "../common/projects/AboutProjectDisplay.jsx";
 import {APIError} from "../utils/api.js";
 import url from "../utils/url.js";
+import prerender from "../utils/prerender.js";
 
 
 type State = {|
@@ -37,7 +38,7 @@ class AboutProjectController extends React.PureComponent<{||}, State> {
   loadProjectDetails(project: ProjectDetailsAPIData) {
     this.setState({
       project: project
-    });
+    }, prerender.ready);
   }
 
   handleLoadProjectFailure(error: APIError) {
diff --git a/common/components/controllers/AboutUsController.jsx b/common/components/controllers/AboutUsController.jsx
@@ -10,6 +10,7 @@ import BioModal from "../componentsBySection/AboutUs/BioModal.jsx";
 import url from "../utils/url.js";
 import Section from "../enums/Section.js";
 import LoadingMessage from "../chrome/LoadingMessage.jsx";
+import prerender from "../utils/prerender.js";
 
 type State = {|
   aboutUs: ?ProjectDetailsAPIData,
@@ -42,7 +43,7 @@ class AboutUsController extends React.PureComponent<{||}, State> {
   loadProjectDetails(project: ProjectDetailsAPIData) {
     this.setState({
       aboutUs: project,
-    });
+    }, prerender.ready);
   }
 
 
diff --git a/common/components/controllers/ContactUsController.jsx b/common/components/controllers/ContactUsController.jsx
@@ -2,11 +2,14 @@
 
 import React from 'react';
 import Headers from "../common/Headers.jsx";
-import {Glyph, GlyphStyles} from "../utils/glyphs.js";
 import ContactForm from "../forms/ContactForm.jsx";
+import prerender from "../utils/prerender.js";
 
 class ContactUsController extends React.PureComponent<{||}> {
-
+  componentDidMount() {
+    prerender.ready();
+  }
+  
   _renderHeader(): React$Node {
     const title: string = "DemocracyLab | Contact Us";
     const description: string = "Contact information for DemocracyLab."
diff --git a/common/components/controllers/DonateController.jsx b/common/components/controllers/DonateController.jsx
@@ -6,6 +6,7 @@ import Headers from "../common/Headers.jsx";
 import RadioButtons from "../common/selection/RadioButtons.jsx";
 import PaypalDonationButton, {OtherAmountSelected} from "../common/integrations/PaypalDonationButton.jsx";
 import {SelectOption} from "../types/SelectOption.jsx";
+import prerender from "../utils/prerender.js";
 
 type State = {|
   donateAmount: ?string,
@@ -36,6 +37,10 @@ class DonateController extends React.Component<{||}, State> {
       donateMonthly: null
     };
   }
+  
+  componentDidMount() {
+    prerender.ready();
+  }
 
   handleFieldSelection(field: string, option: SelectOption): void {
     let state: State = this.state;
diff --git a/common/components/controllers/PartnerWithUsController.jsx b/common/components/controllers/PartnerWithUsController.jsx
@@ -6,13 +6,17 @@ import Sponsors, {SponsorMetadata} from "../utils/Sponsors.js";
 import Headers from "../common/Headers.jsx";
 import Section from "../enums/Section.js";
 import url from '../../components/utils/url.js';
-
+import prerender from "../utils/prerender.js";
 
 
 class PartnerWithUsController extends React.Component<{||}> {
   constructor(): void {
     super();
   }
+  
+  componentDidMount() {
+    prerender.ready();
+  }
 
   render(): React$Node {
     return (
diff --git a/common/components/controllers/PressController.jsx b/common/components/controllers/PressController.jsx
@@ -4,10 +4,8 @@ import _ from 'lodash';
 import React from 'react';
 import Headers from "../common/Headers.jsx";
 import cdn from "../utils/cdn.js";
-import url from "../utils/url.js";
-import Section from "../enums/Section.js";
-import ProjectAPIUtils from '../utils/ProjectAPIUtils.js';
 import LoadingMessage from '../chrome/LoadingMessage.jsx';
+import prerender from "../utils/prerender.js";
 
 
 //get press links
@@ -37,6 +35,10 @@ class PressController extends React.PureComponent<{||}, State> {
       stats: null,
     }
   }
+  
+  componentDidMount() {
+    prerender.ready();
+  }
 
   _renderHeader(): React$Node {
     const title: string = "DemocracyLab | News Feed";
diff --git a/common/components/test/utils.test.js b/common/components/test/utils.test.js
@@ -10,14 +10,23 @@ import NavigationStore from '../stores/NavigationStore.js';
 import renderer from 'react-test-renderer';
 
 describe('utils', () => {
-
-  test('async', () => {
+	
+  test('async.doWhenReady', () => {
     const readyFunc = () => true;
     const doVoidFunc = jest.fn();
-
+    
     async.doWhenReady(readyFunc, doVoidFunc, 1);
     expect(doVoidFunc).toBeCalled();
   });
+  
+  test('async.onEvent', () => {
+    const eventName = 'testEvent';
+    const doVoidFunc = jest.fn();
+    
+    async.onEvent(eventName, doVoidFunc);
+    global.dispatchEvent(new Event(eventName));
+    expect(doVoidFunc).toBeCalled();
+  });
 
   test('glyphs', () => {
   	const glyph = Glyph('fa style', ' class2', ' class3');
diff --git a/common/components/utils/async.js b/common/components/utils/async.js
@@ -28,6 +28,25 @@ class async {
       doFunc(value);
     }
   }
+  
+  /**
+   * Wait until a global(window) event has fired before performing the action.  Besides subscribing to the event,
+   * it will also check window.democracyLabEvents for the event (in case event fired before the subscription was made)
+   *
+   * @param eventName  Name of the event to wait for
+   * @param doFunc     Action to perform
+   */
+  static onEvent(eventName: string, doFunc: () => void): void {
+    // Check event list first
+    if (window.democracyLabEvents && eventName in window.democracyLabEvents) {
+      doFunc();
+    } else {
+      // Otherwise add event listener
+      window.addEventListener(eventName, () => {
+        doFunc();
+      });
+    }
+  }
 }
 
 export default async
diff --git a/common/components/utils/metrics.js b/common/components/utils/metrics.js
@@ -13,23 +13,10 @@ const tagCategoryEventMapping: { [key: string]: string } = _.fromPairs([
   [TagCategory.PROJECT_STAGE, "addProjectStageTag"]
 ]);
 
-let facebookMetrics = null;
-
 function _logEvent(eventName: string, parameters: ?{ [key: string]: string }): void {
-  if(facebookMetrics) {
-    facebookMetrics.logEvent(eventName, null, parameters);
-  } else {
-    // If Facebook metrics hasn't initialized yet, log the event once it's ready
-    Async.doWhenReady(
-      () => window.FB && window.FB.AppEvents,
-      (appEvents) => {
-        facebookMetrics = appEvents;
-        facebookMetrics.logEvent(eventName, null, parameters);
-      },
-      1000,
-      5
-    );
-  }
+  Async.onEvent('fbLoaded', () => {
+    FB.AppEvents.logEvent(eventName, null, parameters);
+  });
 }
 
 class metrics {
diff --git a/common/components/utils/prerender.js b/common/components/utils/prerender.js
@@ -0,0 +1,12 @@
+// @flow
+
+class prerender {
+
+  // Signal to prerender.io that the page has loaded all assets and is ready for caching.
+  static ready(isReady = true): void {
+    window.prerenderReady = isReady;
+  }
+  
+}
+
+export default prerender;
diff --git a/common/models/Tag_definitions.csv b/common/models/Tag_definitions.csv
@@ -256,4 +256,5 @@ fiscally-sponsored-organization,Fiscally Sponsored Organization (Formal Partners
 social-purpose-organization,Social Purpose Corporation (or B Corp),,Organization Type,,
 for-profit,"For Profit Company (Corporation, LLC, Partership, Sole Propreitorship, etc.)",,Organization Type,,
 informal,Informal (No Legal Entity Established),,Organization Type,,
-hacky-new-year-2019,Hacky New Year 2019,,Organization,,
+hacky-new-year-2019,Hacky New Year 2019,,Organization,,
+hacky-new-year-2020,Hacky New Year 2020,,Organization,,
