Add switching logic for each Response Code to have its own content types

src/core/components/content-type.jsx

@@ -7,7 +7,7 @@ const noop = ()=>{}
 export default class ContentType extends React.Component {
 
   static propTypes = {
-    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set]),
+    contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]),
     value: PropTypes.string,
     onChange: PropTypes.func,
     className: PropTypes.string
@@ -21,8 +21,10 @@ export default class ContentType extends React.Component {
 
   componentDidMount() {
     // Needed to populate the form, initially
+    if(this.props.contentTypes) {
       this.props.onChange(this.props.contentTypes.first())
     }
+  }
 
   onChangeWrapper = e => this.props.onChange(e.target.value)
 

src/core/components/model-example.jsx

@@ -35,9 +35,9 @@ export default class ModelExample extends React.Component {
         <li className={ "tabitem" + ( isExecute || this.state.activeTab === "example" ? " active" : "") }>
           <a className="tablinks" data-name="example" onClick={ this.activeTab }>Example Value</a>
         </li>
-        <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
+        { schema ? <li className={ "tabitem" + ( !isExecute && this.state.activeTab === "model" ? " active" : "") }>
           <a className={ "tablinks" + ( isExecute ? " inactive" : "" )} data-name="model" onClick={ this.activeTab }>Model</a>
-        </li>
+        </li> : null }
       </ul>
       <div>
         {

src/core/components/response.jsx

@@ -1,5 +1,5 @@
 import React, { PropTypes } from "react"
-import { fromJS } from "immutable"
+import { fromJS, Seq } from "immutable"
 import { getSampleSchema } from "core/utils"
 
 const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
@@ -28,6 +28,13 @@ const getExampleComponent = ( sampleResponse, examples, HighlightCode ) => {
 }
 
 export default class Response extends React.Component {
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      responseContentType: ""
+    }
+  }
 
   static propTypes = {
     code: PropTypes.string.isRequired,
@@ -56,8 +63,8 @@ export default class Response extends React.Component {
     } = this.props
 
     let { inferSchema } = fn
+    let { isOAS3 } = specSelectors
 
-    let schema = inferSchema(response.toJS())
     let headers = response.get("headers")
     let examples = response.get("examples")
     let links = response.get("links")
@@ -66,14 +73,17 @@ export default class Response extends React.Component {
     const ModelExample = getComponent("modelExample")
     const Markdown = getComponent( "Markdown" )
     const OperationLink = getComponent("operationLink")
+    const ContentType = getComponent("contentType")
 
     var sampleResponse
 
-    if(specSelectors.isOAS3()) {
+    if(isOAS3()) {
-      let oas3SchemaForContentType = response.getIn(["content", contentType, "schema"])
+      let oas3SchemaForContentType = response.getIn(["content", this.state.responseContentType, "schema"])
-      sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType, contentType, { includeReadOnly: true }) : null
+      sampleResponse = oas3SchemaForContentType ? getSampleSchema(oas3SchemaForContentType.toJS(), this.state.responseContentType, { includeReadOnly: true }) : null
+      var schema = oas3SchemaForContentType ? inferSchema(oas3SchemaForContentType.toJS()) : null
     } else {
       sampleResponse = schema ? getSampleSchema(schema, contentType, { includeReadOnly: true }) : null
+      var schema = inferSchema(response.toJS())
     }
     let example = getExampleComponent( sampleResponse, examples, HighlightCode )
 
@@ -88,6 +98,12 @@ export default class Response extends React.Component {
             <Markdown source={ response.get( "description" ) } />
           </div>
 
+          { isOAS3 ? <ContentType
+              value={this.state.responseContentType}
+              contentTypes={ response.get("content") ? response.get("content").keySeq() : Seq() }
+              onChange={(val) => this.setState({ responseContentType: val })}
+              className="response-content-type" /> : null }
+
           { example ? (
             <ModelExample
               getComponent={ getComponent }

src/style/_layout.scss

@@ -675,6 +675,10 @@ body
   }
 }
 
+.response-content-type {
+  padding-top: 1em;
+}
+
 @keyframes blinker
 {
     50%