Clean up Response/Example components

Author: Brendan Abbott

jest.config.js

@@ -7,8 +7,9 @@ module.exports = {
     'node_modules'
   ],
   moduleNameMapper: {
+    'balloon-css': '<rootDir>/src/__mocks__/styleMock.js',
     '\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
-    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/__mocks__/styleMock.js'
+    '\\.(jpg|jpeg|png|gif|svg)$': '<rootDir>/src/__mocks__/fileMock.js'
   },
   moduleFileExtensions: [
     'js',
@@ -17,4 +18,4 @@ module.exports = {
   ],
   testEnvironment: 'node',
   verbose: true
-};
+}

package.json

@@ -24,10 +24,9 @@
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-addons-create-fragment": "^15.5.4",
-    "react-addons-css-transition-group": "^15.5.2",
     "react-document-title": "^2.0.2",
     "react-dom": "^15.5.4",
-    "react-json-view": "^1.7.5",
+    "react-json-view": "^1.8.2",
     "react-redux": "^5.0.3",
     "react-router": "3.0.0",
     "react-router-redux": "^4.0.8",

src/components/BodyContent/BodyContent.js

@@ -13,22 +13,22 @@ export default class BodyContent extends Component {
 
     this.renderTabs = this.renderTabs.bind(this)
     this.renderSchema = this.renderSchema.bind(this)
-    this.renderExample = this.renderExample.bind(this)
+    this.renderExamples = this.renderExamples.bind(this)
 
     this.state = {
       tab: 'schema'
     }
   }
 
   render () {
-    const { schema, example, examples } = this.props
+    const { schema, examples } = this.props
 
     const { tab } = this.state
     return (
       <div className='body-content'>
-        {schema && this.renderTabs(schema, example || examples)}
+        {schema && this.renderTabs(schema, examples)}
         {tab === 'schema' && this.renderSchema(schema)}
-        {tab === 'example' && this.renderExample(example, examples)}
+        {tab === 'example' && this.renderExamples(examples)}
       </div>
     )
   }
@@ -38,7 +38,7 @@ export default class BodyContent extends Component {
     return (
       <div className='body-content-tabs'>
         {includeSchema && this.renderSchemaTab(currentTab)}
-        {includeExample && this.renderExampleTab(currentTab)}
+        {includeExample && this.renderExamplesTab(currentTab)}
       </div>
     )
   }
@@ -57,7 +57,7 @@ export default class BodyContent extends Component {
     )
   }
 
-  renderExampleTab (currentTab) {
+  renderExamplesTab (currentTab) {
     return (
       <div
         role='button'
@@ -72,23 +72,23 @@ export default class BodyContent extends Component {
   }
 
   renderSchema (schema) {
-    if (schema) {
-      return (
-        <BodySchema properties={schema} styleVariation='odd' />
-      )
+    if (!schema) {
+      return null
     }
-    return null
+
+    return (
+      <BodySchema properties={schema} styleVariation='odd' />
+    )
   }
 
-  renderExample (example, examples) {
+  renderExamples (examples) {
     return (
-      <Example example={example} examples={examples} />
+      <Example examples={examples} />
     )
   }
 }
 
 BodyContent.propTypes = {
   schema: PropTypes.array,
-  example: PropTypes.string,
   examples: PropTypes.array
 }

src/components/Example/Example.js

@@ -13,79 +13,57 @@ export default class Example extends Component {
     super(props)
 
     this.onCopyClick = this.onCopyClick.bind(this)
-    this.updateState = this.updateState.bind(this)
-    this.renderString = this.renderString.bind(this)
-    this.renderJson = this.renderJson.bind(this)
-
-    const { example, examples } = this.props
-    let exampleToShow = example
-
-    if (!exampleToShow && examples && examples.length > 0) {
-      exampleToShow = examples[0]
-    }
 
     this.state = {
       hovered: false,
-      collapseAll: false,
-      example: exampleToShow
+      collapseAll: false
     }
   }
 
   render () {
-    const example = this.state.example
+    const { examples } = this.props
+    let example
 
-    if (example) {
-      if (typeof example === 'string') {
-        return this.renderString(example)
-      } else {
-        return this.renderJson(example)
-      }
+    // TODO: Handle multiple examples
+    if (examples && examples.length) {
+      example = examples[0]
     }
 
-    return null
-  }
-
-  renderString (example) {
-    return (
-      <div className='body-content-example'>{example}</div>
-    )
-  }
+    if (!example) {
+      return null
+    }
 
-  renderJson (example) {
     return (
       <div className='body-content-example'
-        onMouseEnter={() => this.updateState({ hovered: true })}
-        onMouseLeave={() => this.updateState({ hovered: false })}
+        onMouseEnter={() => this.setState({ hovered: true })}
+        onMouseLeave={() => this.setState({ hovered: false })}
       >
         <div className={classNames('action-buttons', {
           hovered: this.state.hovered
         })}>
           <CopyButton onCopyClick={this.onCopyClick} tooltip='Copy to Clipboard' />
-          <span onClick={() => this.updateState({ collapseAll: false })}>Expand All</span>
-          <span onClick={() => this.updateState({ collapseAll: true })}>Collapse All</span>
+          <span onClick={() => this.setState({ collapseAll: false })}>Expand All</span>
+          <span onClick={() => this.setState({ collapseAll: true })}>Collapse All</span>
         </div>
-        <ReactJson src={example} theme='chalk' displayDataTypes={false} displayObjectSize={false}
-          collapsed={this.state.collapseAll}
-          enableClipboard={false} />
+        {typeof example === 'string'
+          ? {example}
+          : <ReactJson
+            src={example}
+            theme='chalk'
+            displayDataTypes={false}
+            displayObjectSize={false}
+            collapsed={this.state.collapseAll}
+            enableClipboard={false}
+        />}
       </div>
     )
   }
 
-  /**
-   * Update internal state
-   *
-   * @param {Object} changedState
-   */
-  updateState (changedState) {
-    this.setState(Object.assign({}, this.state, changedState))
-  }
-
   onCopyClick () {
-    copy(JSON.stringify(this.state.example, null, 2))
+    copy(JSON.stringify(this.props.examples[0], null, 2))
   }
 }
 
 Example.propTypes = {
-  example: PropTypes.string,
   examples: PropTypes.array
 }

src/components/Method/Method.js

@@ -57,18 +57,18 @@ export default class Method extends Component {
   }
 
   renderRequest (request) {
-    const { schema, example, examples } = request
+    const { schema, examples } = request
 
-    if (request.schema) {
-      return (
-        <div className='method-request'>
-          <h4>Request Body</h4>
-          <BodyContent schema={schema} example={example} examples={examples} />
-        </div>
-      )
+    if (!schema) {
+      return null
     }
 
-    return ''
+    return (
+      <div className='method-request'>
+        <h4>Request Body</h4>
+        <BodyContent schema={schema} examples={examples} />
+      </div>
+    )
   }
 
   renderResponses (responses) {

src/components/NavigationMethod/NavigationMethod.js

@@ -13,7 +13,6 @@ export default class NavigationMethod extends Component {
         className={classNames('nav-method', {
           active: isActive
         })}
-        key={method.link}
         href={`#${method.link}`}
       >
         <span className='method-type'>{method.type.toUpperCase()}</span>

src/components/NavigationTag/NavigationTag.js

@@ -35,7 +35,7 @@ export default class NavigationTag extends Component {
     const isExpanded = (status === 'right')
 
     return (
-      <div key={title}>
+      <div>
         <a
           className='nav-tag'
           href={`#${title}`}

src/components/Property/Property.scss

@@ -124,6 +124,7 @@ $cell-padding: 10px;
 
 .enum,
 .default {
+  display: inline-block;
   padding: 0 5px;
   margin: 2px 3px;
   border: 1px solid grey;

src/components/PropertyConstraints/PropertyConstraints.js

@@ -61,7 +61,7 @@ export default class PropertyConstraints extends PureComponent {
 
 PropertyConstraints.propTypes = {
   type: PropTypes.arrayOf(PropTypes.string).isRequired,
-  isRequired: PropTypes.bool.isRequired,
+  isRequired: PropTypes.bool,
   constraints: PropTypes.shape({
     format: PropTypes.string,
     exclusiveMinimum: PropTypes.number,

src/components/Response/Response.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 
 import BodyContent from '../BodyContent/BodyContent'
 import Description from '../Description/Description'
@@ -13,42 +12,37 @@ export default class Response extends Component {
   constructor (props) {
     super(props)
 
+    this.onClick = this.onClick.bind(this)
+
     this.state = {
       isOpen: false
     }
   }
 
   render () {
     const { response } = this.props
-    const { code, description, schema, example, examples } = response
+    const { code, description, schema, examples } = response
     const { isOpen } = this.state
     let status
     if (isOpen) {
       status = 'open'
     }
 
-    const success = this.isSuccessCode(code)
+    const successCode = this.isSuccessCode(code)
+    const hasDetails = schema || examples
 
     return (
       <div className='response'>
         <div className={classNames('response-info', {
-          success: success,
-          error: !success
-        })} onClick={this.onClick.bind(this)}>
-          <Indicator className='property-indicator' status={status} />
+          success: successCode,
+          error: !successCode
+        })} onClick={hasDetails ? this.onClick : undefined}>
+          {hasDetails && <Indicator status={status} />}
           <span className='response-code'>{code}</span>
           {description && <Description isInline description={description} />}
         </div>
-        {isOpen &&
-          <ReactCSSTransitionGroup
-            transitionName='response-slide-toggle'
-            transitionEnterTimeout={500}
-            transitionLeaveTimeout={500}
-            transitionAppear
-            transitionAppearTimeout={500}
-          >
-            <BodyContent schema={schema} example={example} examples={examples} />
-          </ReactCSSTransitionGroup>
+        {hasDetails && isOpen &&
+          <BodyContent schema={schema} examples={examples} />
         }
       </div>
     )
@@ -68,5 +62,10 @@ export default class Response extends Component {
 }
 
 Response.propTypes = {
-  response: PropTypes.object
+  response: PropTypes.shape({
+    code: PropTypes.string,
+    description: PropTypes.string,
+    schema: PropTypes.array,
+    examples: PropTypes.array
+  })
 }