text: import React, { Component, PropTypes, createClass } from 'react';
  import { findDOMNode } from 'react-dom';
  import { get } from 'axios';
  import { camelizeKeys } from 'humps';
  import moment from 'moment';
  
  /**
   * @method propTypes
   * @type {Object}
   */
  const propTypes = {
      unit: PropTypes.string.isRequired
  };
  
  /**
   * @method getInitialState
   * @return {Object}
   */
  const getInitialState = function getInitialState() {
      return { weather: {} };
  };
  
  /**
   * @method getDefaultProps
   * @return {Object}
   */
  const getDefaultProps = function getDefaultProps() {
      return { unit: 'F' };
  };
  
  /**
   * @method componentWillMount
   * @return {void}
   */
  const componentWillMount = function componentWillMount() {
  
      get('/weather').then(response => {
          this.setState({ weather: camelizeKeys(response.data).report });
      });
  
  };
  
  /**
   * @method render
   * @return {XML}
   */
  const render = function render() {
  
      const { weather } = this.state;
      const unitProps = this.props.unit === 'F' ? ['minTempFahrenheit', 'maxTempFahrenheit'] : ['minTemp', 'maxTemp'];
      const temperature = (weather[unitProps[0]] + weather[unitProps[1]]) / 2;
  
      /**
       * @method sendChangeEvent
       * @param {String} unit
       * @return {void}
       */
      const sendChangeEvent = unit => {
  
          findDOMNode(this).dispatchEvent(new CustomEvent('unitChanged', {
              bubbles: true,
              detail: { unit }
          }));
  
      };
  
      return (
          <section>
  
              <ul className="units">
                  <li>Temperature:</li>
                  <li>
                      <a onClick={() => sendChangeEvent('C')}>
                          Celsius
                      </a>
                  </li>
                  <li>
                      <a onClick={() => sendChangeEvent('F')}>
                          Fahrenheit
                      </a>
                  </li>
              </ul>
  
              <var>{temperature ? Number(temperature).toFixed(1) : String.fromCharCode(8212)}&deg;{this.props.unit}</var>
              <label>is the current weather on Mars</label>
  
              {weather.atmoOpacity && (
  
                  <ul className="other">
                      <li>Weather: {weather.atmoOpacity}</li>
                      <li>Sunrise: {moment(weather.sunrise).format('LT')}</li>
                      <li>Sunset: {moment(weather.sunset).format('LT')}</li>
                  </ul>
  
              )}
              
          </section>
      );
  
  };
  
  export default createClass({ propTypes, getInitialState, getDefaultProps, componentWillMount, render });
  