Main.jsx

require('normalize.css/normalize.css');
require('styles/App.css');
require('codemirror/lib/codemirror.css');

import React from 'react';
import Paste from './Paste';
import LanguageStore from '../stores/LanguageStore';
import Constants from '../AppConstants';
import { codemirror } from '../../cfg/base.js';

// Load the theme CSS, as specified in the base config.
let context = require.context('codemirror/theme/', false,
                              /\.css$/);
context.keys().forEach(filename => {
  if (filename == `./${codemirror.theme}.css`) {
    context(filename);
  }
});

// Include the Codemirror modes for all our supported languages
for (let mode of Object.keys(Constants.LANGUAGES)) {
  if (mode == 'nohighlight') {
    continue;
  }
  require(`codemirror/mode/${mode}/${mode}.js`);
}

class AppComponent extends React.Component {
  constructor() {
    super()
    this.state = {
      codeLang: LanguageStore.getCurrentLang(),
      code: LanguageStore.getCode()
    }
    this.handleChange = this.handleChange.bind(this);
  }

  componentWillMount() {
    LanguageStore.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    LanguageStore.removeChangeListener(this.handleChange);
  }

  handleChange() {
    this.setState({
      codeLang: LanguageStore.getCurrentLang(),
      code: LanguageStore.getCode()
    });
  }

  render() {
    return (
      <div className="index">
        <Paste code={this.state.code}
               codeLang={this.state.code}
               theme={codemirror.theme} />
      </div>
    );
  }
}

export default AppComponent;