Hide bonfire moreInfo button when no descrition is avaiable

closes #233
freeCodeCamp · Mar 19, 2015 · 8147759 · 8147759
1 parent eca46c6
commit 8147759
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 24 deletions.
diff --git a/common/components/bonfires/Bonfires.jsx b/common/components/bonfires/Bonfires.jsx
@@ -32,7 +32,7 @@ var Bonfire = React.createClass({
     // create proper URI from react-router
     var path = this.context.makePath('bonfires', { bonfireName: bonfireName });
 
-    // is html5 push state exists, update URI
+    // if html5 push state exists, update URI
     // else we are using hash location and should just cause a re render
     if (his) {
       his.replaceState({ path: path }, '', path);

diff --git a/common/components/bonfires/SidePanel.jsx b/common/components/bonfires/SidePanel.jsx
@@ -17,12 +17,9 @@ var SidePanel = React.createClass({
 
   getDefaultProps: function() {
     return {
-      difficulty: 2,
-      brief: 'This is a brief description',
-      description: [
-        'a sentence',
-        'another'
-      ]
+      name: 'Welcome to Bonfires!',
+      difficulty: 5,
+      brief: 'This is a brief description'
     };
   },
 
@@ -54,22 +51,43 @@ var SidePanel = React.createClass({
     });
   },
 
-  _renderMoreInfo: function() {
+  _renderMoreInfo: function(isDescription) {
     var description = this.props.description.map((sentance, index) => {
       return <p key={ index }>{ sentance }</p>;
     });
 
-    return (
-      <Row>
-        <Col xs={ 12 }>
-          { description }
-        </Col>
-      </Row>
-    );
+    if (isDescription) {
+      return (
+        <Row>
+          <Col xs={ 12 }>
+            { description }
+          </Col>
+        </Row>
+      );
+    }
+    return null;
+  },
+
+  _renderMoreInfoButton: function(isDescription) {
+    if (isDescription) {
+      return (
+        <Button
+          onClick={ this._toggleMoreInfo }
+          bsStyle='primary'
+          block={ true }
+          className='btn-primary-ghost'>
+          <span className='ion-arrow-down-b'></span>
+          More information
+        </Button>
+      );
+    }
+    return null;
   },
 
   render: function() {
     var isMoreInfoOpen = this.state.isMoreInfoOpen;
+    var isDescription = this.props.description &&
+      this.props.description.length > 1;
 
     return (
       <Col
@@ -89,15 +107,12 @@ var SidePanel = React.createClass({
                 <div className='bonfire-instructions'>
                   <p>{ this.props.brief }</p>
                   <div>
-                    { isMoreInfoOpen ? this._renderMoreInfo() : null }
-                    <Button
-                      onClick={ this._toggleMoreInfo }
-                      bsStyle='primary'
-                      block={ true }
-                      className='btn-primary-ghost'>
-                      <span className='ion-arrow-down-b'></span>
-                      More information
-                    </Button>
+                    {
+                      isMoreInfoOpen ?
+                      this._renderMoreInfo(isDescription) :
+                      null
+                    }
+                    { this._renderMoreInfoButton(isDescription) }
                   </div>
                 </div>
               </Col>