JSFiddle - React, Tailwind, and code Playground

by jannis

JavaScript

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 should've seen a PubSub event published that contains:
// {
//	 competitionView: 'Weekly Winners',
//   states: ['State1', 'State2'],
//   metrics: ['Metric1', 'Metric2']
// }