Example of method wrapped usage of constants

video-player-excerpt.jsx

// Import the constants file

const VideoPlayerComponent = React.createClass({
  getInitialState: function() {
    return {
      // Default view - it does not matter how or when it is updated, so that is left out
      view = views.viewing
    };
  },
  render: function() {
    return // some HTML
      // We do not use a "switch" here since it is easier to work with expressions without, I find
      // Also, these checks can be done anywhere in the rendered HTML
      if (isViewStateViewing(this.view)) {
        // Render some HTML
      }
      // Maybe some more HTML?
      if (isViewStateRecording(this.view)) {
        // Render some HTML
      } else if (isViewStateEditing(this.view)) {
        // Render different HTML! Exciting.
      }
      // Yet more HTML
  }
)};

view.constants.js

// Imagine a video player with a playlist of video clips, where you can record new clips and then add metadata to them
// In this example we imagine it has a playlist viewing state, a state for creating a new clip, and a state for editing a clip

// Enum of possible viewing states
export const views = {
  viewing: 'viewing',
  recording: 'recording',
  editing: 'editing'
}

// Checks against a given view state
// These methods don't care what else is going on, just that the thing to be checked is provided as an argument
export function isViewStateViewing(view) {
  return view === views.viewing;
}

export function isViewStateRecording(view) {
  return view === views.recording;
}

export function isViewStateEditing(view) {
  return view === views.editing;
}
// There is no reason that these checks can't be more complicated, e.g. that multiple properties on state combine to give us the view
// However, passing objects does introduce a level of fragility as the object must have the necessary properties to check