ScreenSizeStore.js

'use strict';

var AppDispatcher = require('../dispatcher/AppDispatcher'),
    ActionTypes = require('../constants/ActionTypes'),
    ScreenSizes = require('../constants/ScreenSizes'),
    { createStore } = require('../utils/StoreUtils');

function getScreenSize() {
  if (window.matchMedia('(min-width: 100em)').matches) {
    return ScreenSizes.EXTRA_LARGE;
  } else if (window.matchMedia('(min-width: 75em)').matches) {
    return ScreenSizes.LARGE;
  } else if (window.matchMedia('(min-width: 62em)').matches) {
    return ScreenSizes.MEDIUM;
  } else if (window.matchMedia('(min-width: 40em)').matches) {
    return ScreenSizes.SMALL;
  } else {
    return ScreenSizes.EXTRA_SMALL;
  }
}

var MobileSizes = [ScreenSizes.EXTRA_SMALL],
    TabletSizes = [ScreenSizes.SMALL],
    DesktopSizes = [ScreenSizes.MEDIUM, ScreenSizes.LARGE, ScreenSizes.EXTRA_LARGE];

var _screenSize = getScreenSize();

var ScreenSizeStore = createStore({
  getScreenSize() {
    return _screenSize;
  },

  isMobile() {
    return MobileSizes.indexOf(_screenSize) > -1;
  },

  isTablet() {
    return TabletSizes.indexOf(_screenSize) > -1;
  },

  isDesktop() {
    return DesktopSizes.indexOf(_screenSize) > -1;
  }
});

ScreenSizeStore.dispatchToken = AppDispatcher.register(function (payload) {
  var { action } = payload;

  switch (action.type) {
  case ActionTypes.RESIZE_WINDOW:
    var screenSize = getScreenSize();
    if (screenSize !== _screenSize) {
      _screenSize = screenSize;
      ScreenSizeStore.emitChange();
    }
    break;
  }
});

module.exports = ScreenSizeStore;