browserify experiments.json instead of loading async

bin/circleci/test-frontend.sh

@@ -1,5 +1,8 @@
 #!/bin/bash
 set -ex
 
+# build experiments.json
+npm run content
+
 npm run lint
 MOCHA_FILE="$CIRCLE_TEST_REPORTS/junit/test-results.xml" npm run test:ci

frontend/src/app/actions/experiments.js

@@ -4,20 +4,16 @@ export default createActions({
 
   updateExperiment: (addonID, data) => ({ addonID, data }),
 
-  fetchExperiments: (experimentsUrl) => {
-    return fetch(experimentsUrl)
-      .then(response => response.json())
-      .then(data => ({
-        lastFetched: Date.now(),
-        experimentsLoaded: true,
-        data: data.results
-      }));
-  },
-
   fetchUserCounts: (countsUrl) => {
     return fetch(countsUrl)
       .then(
-        response => response.json(),
+        response => {
+          if (response.ok) {
+            return response.json();
+          }
+          // TODO: in this and the error case log to Sentry
+          return {};
+        },
         () => ({}))
       .then(counts => ({
         data: counts

frontend/src/app/containers/App.js

@@ -9,7 +9,7 @@ import Clipboard from 'clipboard';
 
 
 import { getInstalled, isExperimentEnabled, isAfterCompletedDate, isInstalledLoaded } from '../reducers/addon';
-import { getExperimentBySlug, isExperimentsLoaded } from '../reducers/experiments';
+import { getExperimentBySlug } from '../reducers/experiments';
 import { getChosenTest } from '../reducers/varianttests';
 import experimentSelector from '../selectors/experiment';
 import { uninstallAddon, installAddon, enableExperiment, disableExperiment, pollAddon } from '../lib/addon';
@@ -26,10 +26,7 @@ class App extends Component {
   }
 
   measurePageview() {
-    const { routing, hasAddon, installed, installedLoaded, experimentsLoaded } = this.props;
-
-    // Wait until experiments are loaded
-    if (!experimentsLoaded) { return; }
+    const { routing, hasAddon, installed, installedLoaded } = this.props;
 
     // If we have an addon, wait until the installed experiments are loaded
     if (hasAddon && !installedLoaded) { return; }
@@ -128,7 +125,6 @@ function subscribeToBasket(email, locale, callback) {
 const mapStateToProps = state => ({
   addon: state.addon,
   experiments: experimentSelector(state),
-  experimentsLoaded: isExperimentsLoaded(state.experiments),
   getExperimentBySlug: slug =>
     getExperimentBySlug(state.experiments, slug),
   hasAddon: state.addon.hasAddon,

frontend/src/app/index.js

@@ -43,8 +43,6 @@ ReactDOM.render(
 // HACK: For debugging fun
 window.store = store;
 
-store.dispatch(experimentsActions.fetchExperiments(config.experimentsURL));
-
 store.dispatch(experimentsActions.fetchUserCounts(config.usageCountsURL));
 
 setupAddonConnection(store);

frontend/src/app/reducers/experiments.js

@@ -1,8 +1,5 @@
 import { handleActions } from 'redux-actions';
 
-const fetchExperiments = (state, { payload: { lastFetched, experimentsLoaded, data } }) =>
-  ({ ...state, lastFetched, experimentsLoaded, data });
-
 const fetchUserCounts = (state, { payload: { data } }) => ({
   ...state,
   data: state.data.map(experiment =>
@@ -18,8 +15,6 @@ const updateExperiment = (state, { payload: { addonID, data } }) => ({
 
 export const getExperiments = (state) => state.data;
 
-export const getExperimentsLastFetched = (state) => state.lastFetched;
-
 export const getExperimentByID = (state, addonID) =>
   state.data.filter(e => e.addon_id === addonID)[0];
 
@@ -32,14 +27,9 @@ export const getExperimentByURL = (state, url) =>
 export const getExperimentInProgress = (state) =>
   state.data.filter(e => e.inProgress)[0];
 
-export const isExperimentsLoaded = (state) => state.experimentsLoaded;
-
 export default handleActions({
-  fetchExperiments,
   fetchUserCounts,
   updateExperiment
 }, {
-  data: [],
-  experimentsLoaded: false,
-  lastFetched: null
+  data: []
 });

frontend/src/app/store.js

@@ -10,6 +10,8 @@ import experimentsReducer from './reducers/experiments';
 import newsletterFormReducer from './reducers/newsletter-form';
 import varianttestsReducer from './reducers/varianttests';
 
+import experiments from '../../build/api/experiments.json';
+
 export const reducers = combineReducers({
   addon: addonReducer,
   browser: browserReducer,
@@ -21,6 +23,9 @@ export const reducers = combineReducers({
 
 
 export const initialState = {
+  experiments: {
+    data: experiments.results
+  },
   addon: {
     hasAddon: !!window.navigator.testpilotAddon,
     installed: {},

package.json

@@ -112,6 +112,7 @@
     "test:ci": "NODE_ENV=test nyc mocha --recursive --reporter mocha-junit-reporter --require frontend/test-setup.js frontend/test",
     "test:watch": "npm test -- --watch",
     "coverage": "NODE_ENV=test nyc mocha --recursive --require frontend/test-setup.js frontend/test",
-    "addon:locales": "gulp addon-copy-locales"
+    "addon:locales": "gulp addon-copy-locales",
+    "content": "gulp content-build"
   }
 }