Decouple Navigation component

Author: Brendan Abbott

src/components/BodySchema/BodySchema.js

@@ -96,8 +96,15 @@ export default class BodySchema extends Component {
     )
   }
 
+  /**
+   * Responsible for updating the state of all properties that
+   * have been expanded by the user.
+   *
+   * @param {string} propertyName
+   */
   onClick (propertyName) {
     const { expandedProp } = this.state
+
     if (expandedProp.includes(propertyName)) {
       const newExpanded = expandedProp.filter((prop) => prop !== propertyName)
       this.setState({ expandedProp: newExpanded })

src/components/Indicator/Indicator.js

@@ -11,11 +11,11 @@ export default class Indicator extends Component {
     const { status, className } = this.props
 
     return (
-      <div className={classNames('indicator', className, {
+      <span className={classNames('indicator', className, {
         [`indicator--${status}`]: status
       })}>
-        <img src={arrow} title='arrow' />
-      </div>
+        <img src={arrow} alt='' title='arrow' />
+      </span>
     )
   }
 }

src/components/Navigation/Navigation.js

@@ -1,88 +1,55 @@
 import React, { Component } from 'react'
-import classNames from 'classnames'
 import PropTypes from 'prop-types'
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 
-import Indicator from '../Indicator/Indicator'
+import NavigationTag from '../NavigationTag/NavigationTag'
 
 import './Navigation.scss'
 
 export default class Navigation extends Component {
   constructor (props) {
     super(props)
 
+    this.onClick = this.onClick.bind(this)
+
     this.state = {
       expandedTags: []
     }
   }
 
-  componentWillMount () {
-    this.props.navigation.map((tag) => {
-      tag.methods.map((method) => {
-        if (`#${method.link}` === this.props.location.hash) {
-          this.updateExpandedTags(tag.title)
-        }
-      })
-    })
-  }
-
   render () {
-    const { navigation } = this.props
+    const { navigation, location } = this.props
     const { expandedTags } = this.state
 
     return (
-      <div className='nav'>
+      <nav className='nav'>
         {navigation && navigation.map((tag) => {
           let status
-          if (expandedTags.indexOf(tag.title) === -1) {
+          if (expandedTags.includes(tag.title)) {
             status = 'right'
           }
+
           return (
-            <div key={tag.title}>
-              <a
-                className='nav-level1'
-                key={tag.title}
-                href={`#${tag.title}`}
-                onClick={this.updateExpandedTags.bind(this, tag.title)}
-              >
-                {tag.title}
-                <Indicator className='property-indicator' status={status} />
-              </a>
-              {expandedTags.indexOf(tag.title) !== -1 &&
-                <ReactCSSTransitionGroup
-                  transitionName='nav-slide-toggle'
-                  transitionEnterTimeout={500}
-                  transitionLeaveTimeout={500}
-                  transitionAppear
-                  transitionAppearTimeout={500}
-                >
-                  <div>
-                    {tag.methods.map((method) => {
-                      const isActive = (`#${method.link}` === this.props.location.hash)
-                      return (
-                        <a
-                          className={classNames('nav-level2', {
-                            active: isActive
-                          })}
-                          key={method.link}
-                          href={`#${method.link}`}
-                        >
-                          <span className='method-type'>{method.type.toUpperCase()}</span>
-                          <span className='method-title'>{method.title}</span>
-                        </a>
-                      )
-                    })}
-                  </div>
-                </ReactCSSTransitionGroup>
-              }
-            </div>
+            <NavigationTag
+              key={tag.title}
+              title={tag.title}
+              methods={tag.methods}
+              status={status}
+              onClick={this.onClick}
+              location={location}
+            />
           )
         })}
-      </div>
+      </nav>
     )
   }
 
-  updateExpandedTags (tagTitle) {
+  /**
+   * Responsible for updating the state of the navigation with all
+   * expanded tags.
+   *
+   * @param {string} tagTitle
+   */
+  onClick (tagTitle) {
     const { expandedTags } = this.state
 
     if (expandedTags.includes(tagTitle)) {

src/components/Navigation/Navigation.scss

@@ -15,49 +15,8 @@
   .indicator {
     float: right;
   }
-}
-
-.nav-level1 {
-  display: block;
-  padding: 5px 20px;
-  margin-top: 10px;
-  cursor: pointer;
-  text-transform: uppercase;
-  color: $blue;
-  font-weight: bold;
-  &.active {
-    background-color: $grey-dark;
-  }
-;
-}
 
-.nav-level2 {
-  display: flex;
-  padding: 5px 20px;
-  text-indent: 10px;
-  cursor: pointer;
-  color: black;
-  &.active {
-    background-color: $grey-dark;
+  > div {
+    padding: 10px;
   }
 }
-
-.method-type {
-}
-
-.method-title {
-  padding-left: 5px;
-  //border: 1px solid red;
-  text-indent: 0;
-}
-
-.nav-slide-toggle-appear,
-.nav-slide-toggle-enter {
-  max-height: 0;
-}
-
-.nav-slide-toggle-appear.nav-slide-toggle-appear-active,
-.nav-slide-toggle-enter.nav-slide-toggle-enter-active {
-  max-height: 1500px;
-  transition: max-height 500ms ease-in;
-}

src/components/NavigationMethod/NavigationMethod.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+import './NavigationMethod.scss'
+
+export default class NavigationMethod extends Component {
+  render () {
+    const { method, isActive } = this.props
+
+    return (
+      <a
+        className={classNames('nav-method', {
+          active: isActive
+        })}
+        key={method.link}
+        href={`#${method.link}`}
+      >
+        <span className='method-type'>{method.type.toUpperCase()}</span>
+        <span className='method-title'>{method.title}</span>
+      </a>
+    )
+  }
+}
+
+NavigationMethod.propTypes = {
+  method: PropTypes.object,
+  isActive: PropTypes.bool
+}

src/components/NavigationMethod/NavigationMethod.scss

@@ -0,0 +1,18 @@
+@import '../../base.scss';
+
+.nav-method {
+  display: block;
+  margin: 5px 0;
+  padding: 5px;
+  font-size: smaller;
+  color: black;
+
+  &.active {
+    background-color: $grey-dark;
+  }
+}
+
+.method-title {
+  padding-left: 5px;
+  text-indent: 0;
+}

src/components/NavigationTag/NavigationTag.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import Indicator from '../Indicator/Indicator'
+import NavigationMethod from '../NavigationMethod/NavigationMethod'
+
+import './NavigationTag.scss'
+
+export default class NavigationTag extends Component {
+  constructor (props) {
+    super(props)
+
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  componentWillMount () {
+    const { title, methods, location, onClick } = this.props
+
+    const method = methods.find(
+      (method) => (`#${method.link}` === location.hash)
+    )
+
+    if (method) {
+      onClick(title)
+    }
+  }
+
+  handleClick (e) {
+    this.props.onClick(this.props.title)
+  }
+
+  render () {
+    const { title, status, methods, location } = this.props
+
+    const isExpanded = (status === 'right')
+
+    return (
+      <div key={title}>
+        <a
+          className='nav-tag'
+          href={`#${title}`}
+          onClick={this.handleClick}
+        >
+          {title}
+          <Indicator status={status} />
+        </a>
+        <div className='nav-tag-methods'>
+          {isExpanded && methods && methods.map((method) => {
+            const isActive = (`#${method.link}` === location.hash)
+
+            return <NavigationMethod key={method.link} method={method} isActive={isActive} />
+          })}
+        </div>
+      </div>
+    )
+  }
+}
+
+NavigationTag.propTypes = {
+  title: PropTypes.string.isRequired,
+  methods: PropTypes.array,
+  status: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+  location: PropTypes.object
+}

src/components/NavigationTag/NavigationTag.scss

@@ -0,0 +1,12 @@
+@import '../../base.scss';
+
+.nav-tag {
+  display: block;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: $blue;
+
+  &.active {
+    background-color: $grey-dark;
+  }
+}