Merge pull request temando#89 from brendo/issue-32-visualise-one-of

Handle oneOf variations in the UI. RE: temando#32

src/components/BodyContent/BodyContent.js

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import PropTypes from 'prop-types'
 
 import BodySchema from '../BodySchema/BodySchema'
+import BodySchemaSwitcher from '../BodySchemaSwitcher/BodySchemaSwitcher'
 import Example from '../Example/Example'
 
 import './BodyContent.scss'
@@ -11,19 +12,22 @@ export default class BodyContent extends Component {
   constructor (props) {
     super(props)
 
+    this.setBodySchemaIndex = this.setBodySchemaIndex.bind(this)
+
     this.state = {
-      tab: 'schema'
+      tab: 'schema',
+      index: 0
     }
   }
 
   render () {
     const { schema, examples } = this.props
+    const { tab, index } = this.state
 
-    const { tab } = this.state
     return (
       <div className='body-content'>
         {schema && this.renderTabs(schema, examples)}
-        {tab === 'schema' && this.renderSchema(schema)}
+        {tab === 'schema' && this.renderSchema(schema, index)}
         {tab === 'example' && this.renderExamples(examples)}
       </div>
     )
@@ -67,11 +71,22 @@ export default class BodyContent extends Component {
     )
   }
 
-  renderSchema (schema) {
+  renderSchema (schema, index) {
     if (!schema) {
       return null
     }
 
+    // Peek at first item of `schema` to see if it's an array of possible
+    // schemas (eg. oneOf).
+    if (Array.isArray(schema[0])) {
+      return (
+        <div className='body-content-switcher'>
+          <BodySchemaSwitcher options={schema} onChange={this.setBodySchemaIndex} />
+          <BodySchema properties={schema[index]} styleVariation='odd' />
+        </div>
+      )
+    }
+
     return (
       <BodySchema properties={schema} styleVariation='odd' />
     )
@@ -82,6 +97,14 @@ export default class BodyContent extends Component {
       <Example examples={examples} />
     )
   }
+
+  setBodySchemaIndex (bodySchemaIndex) {
+    const { index } = this.state
+
+    if (bodySchemaIndex !== index) {
+      this.setState({ index: bodySchemaIndex })
+    }
+  }
 }
 
 BodyContent.propTypes = {

src/components/BodySchema/BodySchema.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import createFragment from 'react-addons-create-fragment'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import isEqual from 'lodash/isEqual'
 
 import Property from '../Property/Property'
 
@@ -19,10 +18,6 @@ export default class BodySchema extends Component {
     }
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    return !isEqual(nextState.expandedProp, this.state.expandedProp)
-  }
-
   render () {
     const { properties, styleVariation } = this.props
 

src/components/BodySchemaSwitcher/BodySchemaSwitcher.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import './BodySchemaSwitcher.scss'
+
+export default class BodySchemaSwitcher extends Component {
+  constructor (props) {
+    super(props)
+
+    this.handleChange = this.handleChange.bind(this)
+  }
+
+  handleChange (event) {
+    if (this.props.onChange) {
+      this.props.onChange(event.target.value)
+    }
+  }
+
+  render () {
+    const { options } = this.props
+
+    return (
+      <form className='body-schema-switcher-form'>
+        <label>This schema can be fulfilled by multiple options: </label>
+        <select onChange={this.handleChange}>
+          {options.map(
+            (option, i) => <option key={i} value={i}>{`Option ${i + 1}`}</option>
+          )}
+        </select>
+      </form>
+    )
+  }
+}
+
+BodySchemaSwitcher.propTypes = {
+  options: PropTypes.array.isRequired,
+  onChange: PropTypes.func
+}

src/handlers/BaseHandler.js

@@ -20,10 +20,10 @@ class BaseHandler extends Component {
 
   render () {
     const { parsedDefinition: definition, location } = this.props
-    const specUrl = this.props.location.query.url
+    const specUrl = location.query.url
 
     return (
-      <DocumentTitle title='Open API v3 renderer'>
+      <DocumentTitle title={definition ? definition.title : 'Open API v3 renderer'}>
         <div className='main'>
           {!definition && "Welcome to Temando's new Open API Renderer. Watch this space!"}
           {definition && <Page definition={definition} location={location} specUrl={specUrl} />}