split out a SectionLink component

18F · Jun 15, 2018 · 9519d0e · 9519d0e
1 parent eecf216
commit 9519d0e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 28 deletions.
diff --git a/src/components/Navigation/Section.jsx b/src/components/Navigation/Section.jsx
@@ -1,8 +1,7 @@
 import AuthenticatedView from '../../views/AuthenticatedView'
 import { connect } from 'react-redux'
-import { Link } from 'react-router-dom'
 import React from 'react'
-import { Show } from '../Form'
+import SectionLink from './SectionLink'
 import { updateSection } from '../../actions/SectionActions'
 
 class Section extends React.Component {
@@ -30,24 +29,19 @@ class Section extends React.Component {
     return (
       <div className={topCls}>
         <span className="section-title">
-          <Link to={url} className={sectionClass} onClick={onClick}>
-            <Show when={this.props.sectionNum}>
-              <span className="section-number">{this.props.sectionNum}</span>
-            </Show>
-            <span className="section-name">
-              {this.props.name}
-            </span>
-            <span className="eapp-status-icon eapp-status-icon-valid"></span>
-            <span className="eapp-status-icon eapp-status-icon-error"></span>
-          </Link>
+          <SectionLink
+            className={sectionClass}
+            name={this.props.name}
+            onClick={onClick}
+            sectionNum={this.props.sectionNum}
+            to={url} />
         </span>
       </div>
     )
   }
 }
 
 Section.defaultProps = {
-  iconCls: '',
   isSubSection: false,
   locked: false,
   sectionNum: null

diff --git a/src/components/Navigation/SectionLink.jsx b/src/components/Navigation/SectionLink.jsx
@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom'
+import React from 'react'
+import { Show } from '../Form'
+
+export default class SectionLink extends React.Component {
+  render() {
+    return (
+      <Link className={this.props.className} onClick={this.props.onClick} to={this.props.to}>
+        <Show when={this.props.sectionNum}>
+          <span className="section-number">{this.props.sectionNum}</span>
+        </Show>
+        <span className="section-name">
+          {this.props.name}
+          {this.props.children}
+        </span>
+        <span className="eapp-status-icon eapp-status-icon-valid"></span>
+        <span className="eapp-status-icon eapp-status-icon-error"></span>
+      </Link>
+    )
+  }
+}
+
+SectionLink.defaultProps = {
+  sectionNum: null
+}
diff --git a/src/components/Navigation/ToggleItem.jsx b/src/components/Navigation/ToggleItem.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Show } from '../Form'
+import SectionLink from './SectionLink'
 
 export class ToggleItem extends React.Component {
   constructor (props) {
@@ -63,22 +64,19 @@ export class ToggleItem extends React.Component {
     return (
       <div ref="item" className={`${this.props.section ? 'section' : 'subsection'} ${this.state.visible ? 'open' : 'closed'}`}>
         <span className="section-title">
-          <a href="javascript:;;;" title={this.props.title} className={this.props.className} onClick={this.toggle}>
-            <Show when={this.props.number}>
-              <span className="section-number">{this.props.number}</span>
+          <SectionLink
+            className={this.props.className}
+            name={this.props.title}
+            onClick={this.toggle}
+            sectionNum={this.props.number}
+            to="javascript:;;;">
+            <Show when={this.state.visible}>
+              <i className="fa fa-angle-up" aria-hidden="true"></i>
             </Show>
-            <span className="section-name">
-              {this.props.title}
-              <Show when={this.state.visible}>
-                <i className="fa fa-angle-up" aria-hidden="true"></i>
-              </Show>
-              <Show when={!this.state.visible}>
-                <i className="fa fa-angle-down" aria-hidden="true"></i>
-              </Show>
-            </span>
-            <span className="eapp-status-icon eapp-status-icon-valid"></span>
-            <span className="eapp-status-icon eapp-status-icon-error"></span>
-          </a>
+            <Show when={!this.state.visible}>
+              <i className="fa fa-angle-down" aria-hidden="true"></i>
+            </Show>
+          </SectionLink>
           <Show when={this.state.visible}>
             <div className="section-content">
               {this.props.children}