diff --git a/frontend/src/app-new/actions/experiments.js b/frontend/src/app-new/actions/experiments.js index d4be03a585..12a69180a4 100644 --- a/frontend/src/app-new/actions/experiments.js +++ b/frontend/src/app-new/actions/experiments.js @@ -10,9 +10,12 @@ export default createActions({ return fetch(countsUrl); }) .then(response => response.json()) - .then(counts => experiments.map(experiment => ({ - installation_count: counts[experiment.addon_id], - ...experiment - }))); + .then(counts => ({ + lastFetched: Date.now(), + experiments: experiments.map(experiment => ({ + ...experiment, + installation_count: counts[experiment.addon_id] + })) + })); } }); diff --git a/frontend/src/app-new/index.js b/frontend/src/app-new/index.js index 921697492a..3cb78c367f 100644 --- a/frontend/src/app-new/index.js +++ b/frontend/src/app-new/index.js @@ -31,7 +31,7 @@ import AppRouter from './lib/router'; es6Promise.polyfill(); const initialState = { - experiments: [], + experiments: { experiments: [], lastFetched: null }, browser: { isFirefox: false }, addon: { hasAddon: false, installed: [] } }; diff --git a/frontend/src/app-new/lib/addon.js b/frontend/src/app-new/lib/addon.js index e91b868c06..cf3a4d525b 100644 --- a/frontend/src/app-new/lib/addon.js +++ b/frontend/src/app-new/lib/addon.js @@ -4,7 +4,7 @@ import cookies from 'js-cookie'; import { sendToGA } from './utils'; import addonActions from '../actions/addon'; -let installStateWatcherTimer = null; +import { getExperiments, getExperimentsLastFetched } from '../reducers/experiments'; export function installAddon(eventCategory) { const downloadUrl = '/static/addon/addon.xpi'; @@ -20,13 +20,15 @@ export function installAddon(eventCategory) { export function setupAddonConnection(store) { store.dispatch(addonActions.setInstalled([])); watchForAddonInstallStateChange(store); + watchForExperimentChanges(store); window.addEventListener('from-addon-to-web', evt => messageReceived(store, evt)); sendMessage('sync-installed'); } // Periodically check window.navigator.testpilotAddon and keep store in sync -export function watchForAddonInstallStateChange(store) { +let installStateWatcherTimer = null; +function watchForAddonInstallStateChange(store) { store.dispatch(addonActions.setHasAddon(window.navigator.testpilotAddon)); if (installStateWatcherTimer) { @@ -43,6 +45,22 @@ export function watchForAddonInstallStateChange(store) { }, 1000); } +/* +let currentExperimentsFetched = null; +function watchForExperimentChanges(store) { + store.subscribe(() => { + const { experiments } = store.getState(); + const previousExperimentsFetched = currentExperimentsFetched; + currentExperimentsFetched = getExperimentsLastFetched(experiments); + + console.log('experiment changes', previousExperimentsFetched); + if (previousExperimentsFetched !== currentExperimentsFetched) { + sendMessage('loaded', getExperiments(experiments)); + } + }); +} +*/ + export function sendMessage(type, data) { console.log('TO ADDON', type, data); document.documentElement.dispatchEvent(new CustomEvent('from-web-to-addon', { diff --git a/frontend/src/app-new/reducers/experiments.js b/frontend/src/app-new/reducers/experiments.js index 14e6493b50..6265d0f598 100644 --- a/frontend/src/app-new/reducers/experiments.js +++ b/frontend/src/app-new/reducers/experiments.js @@ -1,7 +1,14 @@ import { handleActions } from 'redux-actions'; -const experimentsFetch = (state, { payload: experiments }) => experiments; +const experimentsFetch = (state, { payload: { lastFetched, experiments } }) => + ({ ...state, lastFetched, experiments }); export default handleActions({ experimentsFetch -}, []); +}, { + experiments: [], + lastFetched: null +}); + +export const getExperiments = (state) => state.experiments; +export const getExperimentsLastFetched = (state) => state.lastFetched; diff --git a/frontend/src/app-new/views/ExperimentPage.js b/frontend/src/app-new/views/ExperimentPage.js index a3be6815f8..7ede4d2be1 100644 --- a/frontend/src/app-new/views/ExperimentPage.js +++ b/frontend/src/app-new/views/ExperimentPage.js @@ -15,11 +15,13 @@ import ExperimentDisableDialog from '../components/ExperimentDisableDialog'; import ExperimentTourDialog from '../components/ExperimentTourDialog'; import MainInstallButton from '../components/MainInstallButton'; +import { getExperiments } from '../reducers/experiments'; + const CHANGE_HEADER_ON = 105; export default connect( state => ({ - experiments: state.experiments, + experiments: getExperiments(state.experiments), isFirefox: state.browser.isFirefox, hasAddon: state.addon.hasAddon, installed: state.addon.installed diff --git a/frontend/src/app-new/views/ExperimentsListPage.js b/frontend/src/app-new/views/ExperimentsListPage.js index 3f5c7ce5b1..d3b85b7753 100644 --- a/frontend/src/app-new/views/ExperimentsListPage.js +++ b/frontend/src/app-new/views/ExperimentsListPage.js @@ -7,9 +7,11 @@ import Footer from '../components/Footer'; import ExperimentRowCard from '../components/ExperimentRowCard'; import EmailDialog from '../components/EmailDialog'; +import { getExperiments } from '../reducers/experiments'; + export default connect( state => ({ - experiments: state.experiments, + experiments: getExperiments(state.experiments), isFirefox: state.browser.isFirefox, hasAddon: state.addon.hasAddon, installed: state.addon.installed diff --git a/frontend/src/app-new/views/LandingPage.js b/frontend/src/app-new/views/LandingPage.js index dd8be6af27..b47bb0f786 100644 --- a/frontend/src/app-new/views/LandingPage.js +++ b/frontend/src/app-new/views/LandingPage.js @@ -5,9 +5,11 @@ import Footer from '../components/Footer'; import ExperimentRowCard from '../components/ExperimentRowCard'; import MainInstallButton from '../components/MainInstallButton'; +import { getExperiments } from '../reducers/experiments'; + export default connect( state => ({ - experiments: state.experiments, + experiments: getExperiments(state.experiments), isFirefox: state.browser.isFirefox, hasAddon: state.addon.hasAddon, installed: state.addon.installed