From 814775977bdf5493cc8b921b090d23bbf3ef0863 Mon Sep 17 00:00:00 2001
From: Berkeley Martinez <Berkeley@robotie.com>
Date: Thu, 19 Mar 2015 00:04:49 -0700
Subject: [PATCH] Hide bonfire moreInfo button when no descrition is avaiable
 closes #233

---
 common/components/bonfires/Bonfires.jsx  |  2 +-
 common/components/bonfires/SidePanel.jsx | 61 +++++++++++++++---------
 2 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/common/components/bonfires/Bonfires.jsx b/common/components/bonfires/Bonfires.jsx
index 5b872dcc8aa3eb..6b63eee41891e8 100644
--- 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
index 07f0690b8f6d04..7b3176420075d6 100644
--- 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>