response_body.js

import React from 'react';
import Lowlight from 'react-lowlight';
import json from 'highlight.js/lib/languages/json';
import http from 'highlight.js/lib/languages/http';
import Map from './map';

Lowlight.registerLanguage('json', json);
Lowlight.registerLanguage('http', http);

export var ResponseBody = React.createClass({
  propTypes: {
    responseBody: React.PropTypes.object,
    responseStatusCode: React.PropTypes.number,
    responseStatusMessage: React.PropTypes.string,
    responseHeaders: React.PropTypes.object,
  },
  formatHeaders(headers) {
    var formattedHeaders = Object.keys(headers).sort().map((name) => `${name}: ${headers[name]}`).join('\n');
    return formattedHeaders;
  },
  getInitialState() {
    return {
      mode: 'json'
    };
  },
  hideMap() {
    this.setState({ mode: 'json' });
  },
  showMap() {
    this.setState({ mode: 'map' });
  },
  render() {
    let noResponse = !this.props.responseStatusCode;
    return  (
      <div>
      {noResponse ?
        <div>
          <div className='small round pad1 fill-light quiet space-top4'>
            <div className=''>No request has been made yet. Click on the GET button to make a request.</div>
          </div>
        </div>
        :
        <div>
          <h4 className='pad1y'>Status Code</h4>
          <Lowlight language='json' value={JSON.stringify(this.props.responseStatusCode) + ' ' + this.props.responseStatusMessage} />
          <h4 className='space-top2 space-bottom1'>Headers</h4>
          <Lowlight language='http' value={this.formatHeaders(this.props.responseHeaders)} />

          {/* --------  toggle map -------- */}
          <div className='col6'>
            <div className='small space-left0 strong small-screen-margins'>Toggle Map</div>
            <div className='space-left0 inline rounded-toggle quiet space-bottom2'>
            <a className={this.state.mode === 'json' ? 'active' : 'disabled'}
              onClick={this.hideMap}>
              JSON
            </a>
            <a className={this.state.mode === 'map' ? 'active' : 'disabled'}
              onClick={this.showMap}>
              Map
            </a>
            </div>
          </div>
          {/* --------  toggle map -------- */}

          {this.state.mode === 'map' ?

            <Map responseBody={this.props.responseBody} /> :

            (<div>
              <h4 className=' space-top2 space-bottom1'>Body</h4>
              <div style={{maxHeight: 380}} className='scroll-styled round'>
                <Lowlight language='json' value={JSON.stringify(this.props.responseBody, null, 2)} />
              </div>
            </div)
          }
        </div>
      }
      </div>
    );
  }
});