class Filters {

  constructor () {

    this._data = {};

  }

​

  static set data (newData) {

    this._data = _.assign({}, this._data, newData);

    this._notify();

    return this._data;

  }

  static get data () {

    return this._data;

  }

  static _notify() {

    // Publish event so other components can act on filter data changes

    // PubSub.publish('filters.change', this.data);

    console.log('filters.change', this.data);

  }

}

​

const defaultDataFilters = {

    states: [],

    metrics: []

};

class DataFilters extends Filters {

  constructor (seedData) {

    super();

    // Send seed data

    Filters.data = _.assign({}, defaultDataFilters, seedData);

  }

  // process ui changes and then write data back to Filters.data = .. 

}

​

const defaultCompetitionViewFilters = {

    competitionView: undefined

};

class CompetitionViewFilters extends Filters {

​

  constructor (seedData) {

    super();

    // Send seed data

    Filters.data = _.assign({}, defaultCompetitionViewFilters, seedData);

  }

}

​

// In app.js

// import filters, all filters use `export default [className]`

// Periods

let competitionViewFiltersSeed = { competitionView: 'Weekly Winners' };

let competitionViewFilters = new CompetitionViewFilters(competitionViewFiltersSeed);

​

// States & Metrics

let dataFilterSeed = {

  states: ['State1', 'State2'],

  metrics: ['Metric1', 'Metric2']

};

let dataFilters = new DataFilters(dataFilterSeed);

​

// At this point, I see a PubSub event published that contains:

// {

//   competitionView: 'Weekly Winners',

//   states: ['State1', 'State2'],

//   metrics: ['Metric1', 'Metric2']

// }