From 5a4f5067dfbaa6a363562b6f992a47f7c7ff4aa1 Mon Sep 17 00:00:00 2001
From: Frankie Bagnardi <f.bagnardi@gmail.com>
Date: Fri, 8 Aug 2014 18:08:25 -0700
Subject: [PATCH 1/6] add component RestrictedTextBox

---
 client/components/RestrictedTextBox.jsx | 88 +++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 client/components/RestrictedTextBox.jsx

diff --git a/client/components/RestrictedTextBox.jsx b/client/components/RestrictedTextBox.jsx
new file mode 100644
index 0000000..c798c02
--- /dev/null
+++ b/client/components/RestrictedTextBox.jsx
@@ -0,0 +1,88 @@
+/** @jsx React.DOM */
+var React = require('react');
+
+var RestrictedTextBox = React.createClass({
+  render: function(){
+    var validClassName = this.validate(this.props.value) ? 'has-success' : 'has-error';
+    
+    return (
+      <div>
+          <label>
+            <div>{this.props.children}</div>
+            <textarea 
+              className="form-control"
+              rows={Math.ceil(this.props.maxLength / 10)}
+              value={this.props.value}
+              onChange={this.props.onChange}
+              className={"form-control " + validClassName} />
+            {this.renderRemaining()}
+          </label>
+
+      </div>
+    )
+  },
+
+  renderRemaining: function(){
+    var restrictions = this.getRestrictions();
+    var className = this.validate(this.props.value) ? 'text-success' : 'text-danger';
+    
+    if (restrictions.extraRequired > 0) {
+      return (
+        <div className={className}>
+          need {restrictions.extraRequired} more {pluralize('character', restrictions.extraRequired)}
+        </div>
+      );
+    }
+
+    // valid amount
+    else if (restrictions.extraAllowed >= 0) {
+      return (
+        <div className={className}>
+          {restrictions.length}/{restrictions.maxLength} {pluralize('character', restrictions.length)}
+        </div>
+      );
+    }
+
+    // too many
+    else if (restrictions.length > restrictions.maxLength) {
+      return (
+        <div className={className}>
+          {restrictions.length}/{restrictions.maxLength} {pluralize('character', restrictions.length)}
+        </div>
+      );
+    }
+  },
+
+  // derive some data from our props
+  getRestrictions: function(value){
+    var props = this.props;
+
+    // if a .length prop is passed allow it to overried .value.length
+    var length = props.length != null ? props.length : props.value.length;
+    var minLength = props.minLength != null ? props.minLength : 0;
+    var maxLength = props.maxLength != null ? props.maxLength : Infinity;
+
+    return {
+      length: length,
+      maxLength: maxLength,
+      minLength: minLength,
+      extraAllowed: maxLength - length,
+      extraRequired: minLength - length
+    };
+  },
+
+
+  validate: function(value){
+    var restrictions = this.getRestrictions(value);
+    return restrictions.extraAllowed >= 0 && restrictions.extraRequired <= 0;
+  }
+});
+
+module.exports = RestrictedTextBox;
+
+function pluralize(str, n){
+  return n === 1 ? str : str + 's';
+}
+
+
+

From 7585f04c737e78448de54535b9edb926994b75ea Mon Sep 17 00:00:00 2001
From: Frankie Bagnardi <f.bagnardi@gmail.com>
Date: Fri, 8 Aug 2014 18:09:19 -0700
Subject: [PATCH 2/6] removed testing code

---
 client/components/RestrictedTextBox.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/RestrictedTextBox.jsx b/client/components/RestrictedTextBox.jsx
index c798c02..78846fe 100644
--- a/client/components/RestrictedTextBox.jsx
+++ b/client/components/RestrictedTextBox.jsx
@@ -4,14 +4,14 @@ var React = require('react');
 var RestrictedTextBox = React.createClass({
   render: function(){
     var validClassName = this.validate(this.props.value) ? 'has-success' : 'has-error';
-    
+
     return (
       <div>
           <label>
             <div>{this.props.children}</div>
             <textarea 
               className="form-control"
-              rows={Math.ceil(this.props.maxLength / 10)}
+              rows={5}
               value={this.props.value}
               onChange={this.props.onChange}
               className={"form-control " + validClassName} />

From 020a8090ffbcc1de7217e3355ec2964b01509e10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8jberg?= <r.hackr@gmail.com>
Date: Thu, 7 Aug 2014 21:21:12 -0400
Subject: [PATCH 3/6] Add `<MainHeader/> and `<MainNav/>`

* Add `<MainHeader/>` with logo and navigation
* Add `<MainNav/>` with nav items. Also tracks current page
* Update folder structure for /client and /test
* Add `npm run build`
---
 client/app.html                               | 12 ++--
 client/app/app.js                             | 19 ------
 client/app/components/app.js                  | 28 +++++++++
 client/app/components/main_header.js          | 22 +++++++
 client/app/components/main_nav.js             | 36 +++++++++++
 client/client.js                              |  6 +-
 package.json                                  |  1 +
 server/render/render.js                       |  4 +-
 .../client/app/components/main_header_spec.js | 32 ++++++++++
 test/client/app/components/main_nav_spec.js   | 63 +++++++++++++++++++
 10 files changed, 193 insertions(+), 30 deletions(-)
 delete mode 100644 client/app/app.js
 create mode 100644 client/app/components/app.js
 create mode 100644 client/app/components/main_header.js
 create mode 100644 client/app/components/main_nav.js
 create mode 100644 test/client/app/components/main_header_spec.js
 create mode 100644 test/client/app/components/main_nav_spec.js

diff --git a/client/app.html b/client/app.html
index 1ff625c..8fdce1e 100644
--- a/client/app.html
+++ b/client/app.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <title>Example App</title>
-</head>
-<body></body>
-<script src="/build/bundle.js" type="text/javascript" async></script>
-</html>
\ No newline at end of file
+  <head>
+    <title>Example App</title>
+  </head>
+  <body></body>
+  <script src="/build/bundle.js" type="text/javascript" async></script>
+</html>
diff --git a/client/app/app.js b/client/app/app.js
deleted file mode 100644
index f26b136..0000000
--- a/client/app/app.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/** @jsx React.DOM */
-var React = require("react");
-
-var App = React.createClass({
-  componentDidMount:function(){
-    //componentDidMount only gets called from client side - not on server rendering
-    console.log("Mounted");
-  },
-  componentWillMount:function(){
-    //componentWillMount is called from client side and server rendering
-    console.log("Going to Mount");
-  },
-  render:function(){
-    console.log("Render");
-    return <div>Hi Co-Authors!</div>
-  }
-});
-
-module.exports = App;
\ No newline at end of file
diff --git a/client/app/components/app.js b/client/app/components/app.js
new file mode 100644
index 0000000..b986aff
--- /dev/null
+++ b/client/app/components/app.js
@@ -0,0 +1,28 @@
+/** @jsx React.DOM */
+
+var React = require("react");
+
+var MainHeader = require('./main_header');
+
+var App = React.createClass({
+  componentDidMount: function () {
+    //componentDidMount only gets called from client side - not on server rendering
+    console.log("Mounted");
+  },
+  componentWillMount: function () {
+    //componentWillMount is called from client side and server rendering
+    console.log("Going to Mount");
+  },
+  render: function () {
+    return (
+      <div className='app'>
+        <MainHeader currentUri='/'/>
+        <div className='main-content'>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = App;
diff --git a/client/app/components/main_header.js b/client/app/components/main_header.js
new file mode 100644
index 0000000..ec49a03
--- /dev/null
+++ b/client/app/components/main_header.js
@@ -0,0 +1,22 @@
+/** @jsx React.DOM */
+
+var React = require("react");
+
+var MainNav = require('./main_nav');
+
+var MainHeader = React.createClass({
+  propTypes: {
+    currentUri: React.PropTypes.string.isRequired
+  },
+
+  render:function(){
+    return (
+      <div className='main-header'>
+        <h1 className='logo'>SurveyBuilder</h1>
+        <MainNav currentUri={this.props.currentUri} />
+      </div>
+    );
+  }
+});
+
+module.exports = MainHeader;
diff --git a/client/app/components/main_nav.js b/client/app/components/main_nav.js
new file mode 100644
index 0000000..ebc8011
--- /dev/null
+++ b/client/app/components/main_nav.js
@@ -0,0 +1,36 @@
+/** @jsx React.DOM */
+
+var React = require("react/addons");
+var classSet = React.addons.classSet;
+
+var NAV_ITEMS = {
+  'All Surveys': '/',
+  'Add Survey': '/add_survey'
+};
+
+var MainNav = React.createClass({
+  propTypes: {
+    currentUri: React.PropTypes.string.isRequired
+  },
+
+  render: function () {
+    var currentUri = this.props.currentUri;
+
+    var items = Object.keys(NAV_ITEMS).map(function (key, i) {
+      var uri = NAV_ITEMS[key];
+      var className = classSet({
+        'current': uri === currentUri
+      });
+
+      return <a key={i} href={uri} className={className}>{key}</a>;
+    });
+
+    return (
+      <nav className='main-nav'>
+        {items}
+      </nav>
+    );
+  }
+});
+
+module.exports = MainNav;
diff --git a/client/client.js b/client/client.js
index e5cc1a6..32a9545 100644
--- a/client/client.js
+++ b/client/client.js
@@ -1,6 +1,6 @@
 /** @jsx React.DOM */
 
-//client entry point - all components should be in separate files, 
+//client entry point - all components should be in separate files,
 //this will allow webpack to use hotmodule update later
 //and allow for server side to include just the app
 
@@ -9,9 +9,9 @@ require('es5-shim/es5-shim');
 require('es5-shim/es5-sham');
 
 var React = require('react');
-var App = require('./app/app');
+var App = require('./app/components/app');
 
 React.renderComponent(<App/>, document.body);
 
 //allow react dev tools work
-window.React = React;
\ No newline at end of file
+window.React = React;
diff --git a/package.json b/package.json
index 7dd434e..a8c918d 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "main": "server/server.js",
   "scripts": {
     "prestart": "browserify -t reactify client/client.js > public/build/bundle.js --debug",
+    "build": "browserify -t reactify client/client.js > public/build/bundle.js --debug",
     "start": "node server/server.js",
     "test": "karma start karma.conf.js"
   },
diff --git a/server/render/render.js b/server/render/render.js
index 8960b62..c2237cf 100644
--- a/server/render/render.js
+++ b/server/render/render.js
@@ -30,7 +30,7 @@ function renderToHtml(route, callback){
 
   //merge body into template
   var html = template.replace(/<\/body>/, body + "</body>");
-  
+
   process.nextTick(function(){
     callback(null, html);
   });
@@ -43,4 +43,4 @@ router.get('*', function(req, res) {
   });
 });
 
-module.exports = router;
\ No newline at end of file
+module.exports = router;
diff --git a/test/client/app/components/main_header_spec.js b/test/client/app/components/main_header_spec.js
new file mode 100644
index 0000000..73030c7
--- /dev/null
+++ b/test/client/app/components/main_header_spec.js
@@ -0,0 +1,32 @@
+/** @jsx React.DOM */
+
+var React = require("react/addons");
+var TestUtils = React.addons.TestUtils;
+
+var MainHeader = require('../../../../client/app/components/main_header');
+var MainNav = require('../../../../client/app/components/main_nav');
+
+// verifying karma-jasmine is working
+describe("components/main_nav", function (){
+  var subject;
+
+  beforeEach(function () {
+    subject = TestUtils.renderIntoDocument(
+      <MainHeader currentUri='/add_survey' />
+    );
+  });
+
+  describe('#render', function () {
+    it('has a logo', function () {
+      var logo = TestUtils.findRenderedDOMComponentWithClass(subject, 'logo');
+      expect( logo ).not.toBe( null );
+    });
+
+    it('has a <MainNav /> with currentUri', function () {
+      var mainNav = TestUtils.findRenderedComponentWithType(subject, MainNav);
+
+      expect( mainNav ).not.toBe( null );
+      expect( mainNav.props.currentUri ).toBe( '/add_survey' );
+    });
+  });
+});
diff --git a/test/client/app/components/main_nav_spec.js b/test/client/app/components/main_nav_spec.js
new file mode 100644
index 0000000..1e02ca6
--- /dev/null
+++ b/test/client/app/components/main_nav_spec.js
@@ -0,0 +1,63 @@
+/** @jsx React.DOM */
+
+var React = require("react/addons");
+var TestUtils = React.addons.TestUtils;
+
+var MainNav = require('../../../../client/app/components/main_nav');
+
+// verifying karma-jasmine is working
+describe("components/main_nav", function (){
+  var subject;
+
+  beforeEach(function () {
+    subject = TestUtils.renderIntoDocument(
+      <MainNav currentUri='/add_survey' />
+    );
+  });
+
+  describe('#render', function () {
+    it('has a "All Surveys" nav item', function () {
+      var item = TestUtils.scryRenderedDOMComponentsWithTag(subject, 'a')[0];
+      expect( item.props.href ).toBe( '/' );
+      expect( item.props.children ).toBe( 'All Surveys' );
+    });
+
+    it('has a "Add Surveys" nav item', function () {
+      var item = TestUtils.scryRenderedDOMComponentsWithTag(subject, 'a')[1];
+      expect( item.props.href ).toBe( '/add_survey' );
+      expect( item.props.children ).toBe( 'Add Survey' );
+    });
+
+    describe('when currentUri is "/"', function () {
+      beforeEach(function () {
+        subject.setProps({ currentUri: '/' });
+      });
+
+      it('marks "All Surveys" as current', function () {
+        var currentItem = TestUtils.findRenderedDOMComponentWithClass(
+          subject,
+          'current'
+        );
+
+        expect( currentItem.props.href ).toBe( '/' );
+        expect( currentItem.props.children ).toBe( 'All Surveys' );
+      });
+    });
+
+    describe('when currentUri is "/add_survey"', function () {
+      beforeEach(function () {
+        subject.setProps({ currentUri: '/add_survey' });
+      });
+
+      it('marks "Add Survey" as current', function () {
+        var currentItem = TestUtils.findRenderedDOMComponentWithClass(
+          subject,
+          'current'
+        );
+
+        expect( currentItem.props.href ).toBe( '/add_survey' );
+        expect( currentItem.props.children ).toBe( 'Add Survey' );
+      });
+    });
+  });
+});

From a3610d0ba418d441df4e53028655679a71da945b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B8jberg?= <r.hackr@gmail.com>
Date: Fri, 8 Aug 2014 19:50:04 -0400
Subject: [PATCH 4/6] Fix path to enable the app to start

---
 server/render/render.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/render/render.js b/server/render/render.js
index c2237cf..d506af5 100644
--- a/server/render/render.js
+++ b/server/render/render.js
@@ -18,7 +18,7 @@ require('node-jsx').install({harmony: true});
 
 var fs = require("fs");
 var React = require("react");
-var App = require("../../client/app/app");
+var App = require("../../client/app/components/app");
 var router = require('express').Router({caseSensitive: true, strict: true});
 
 //only read on startup

From 906363f1c2ca74ebea4d9137a7d8be4afe5248ee Mon Sep 17 00:00:00 2001
From: Frankie Bagnardi <f.bagnardi@gmail.com>
Date: Fri, 8 Aug 2014 22:17:58 -0700
Subject: [PATCH 5/6] renamed restricted_text_box.jsx to match other file names

---
 .../components/{RestrictedTextBox.jsx => restricted_text_box.jsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename client/components/{RestrictedTextBox.jsx => restricted_text_box.jsx} (100%)

diff --git a/client/components/RestrictedTextBox.jsx b/client/components/restricted_text_box.jsx
similarity index 100%
rename from client/components/RestrictedTextBox.jsx
rename to client/components/restricted_text_box.jsx

From 9b45106bd7359f9f32186b693c8c4f6dcae717ba Mon Sep 17 00:00:00 2001
From: Frankie Bagnardi <f.bagnardi@gmail.com>
Date: Fri, 8 Aug 2014 22:21:17 -0700
Subject: [PATCH 6/6] (karl) seperated restricted-text-box into two components

---
 client/components/restricted_text_box.jsx | 59 +++++++++--------------
 1 file changed, 23 insertions(+), 36 deletions(-)

diff --git a/client/components/restricted_text_box.jsx b/client/components/restricted_text_box.jsx
index 78846fe..a1b2748 100644
--- a/client/components/restricted_text_box.jsx
+++ b/client/components/restricted_text_box.jsx
@@ -1,13 +1,32 @@
 /** @jsx React.DOM */
 var React = require('react');
 
+var Remaining = React.createClass({
+  render: function(){
+    var restrictions = this.props.restrictions;
+    var className = this.props.valid ? 'text-success' : 'text-danger';
+    
+    var wording = <span>{restrictions.length}/{restrictions.maxLength} {pluralize('character', restrictions.length)}</span>;
+    
+    if (restrictions.extraRequired > 0) {
+       wording = <span>need {restrictions.extraRequired} more {pluralize('character', restrictions.extraRequired)}</span>
+    }
+
+    return (
+        <div className={className}>
+          {wording}
+        </div>
+      );
+  }
+})
+
 var RestrictedTextBox = React.createClass({
   render: function(){
     var validClassName = this.validate(this.props.value) ? 'has-success' : 'has-error';
-
+    
     return (
       <div>
-          <label>
+          <label style={{display: 'block'}} >
             <div>{this.props.children}</div>
             <textarea 
               className="form-control"
@@ -15,44 +34,13 @@ var RestrictedTextBox = React.createClass({
               value={this.props.value}
               onChange={this.props.onChange}
               className={"form-control " + validClassName} />
-            {this.renderRemaining()}
+            {<Remaining restrictions={this.getRestrictions()} valid={this.validate(this.props.value)}/>}
           </label>
 
       </div>
     )
   },
 
-  renderRemaining: function(){
-    var restrictions = this.getRestrictions();
-    var className = this.validate(this.props.value) ? 'text-success' : 'text-danger';
-    
-    if (restrictions.extraRequired > 0) {
-      return (
-        <div className={className}>
-          need {restrictions.extraRequired} more {pluralize('character', restrictions.extraRequired)}
-        </div>
-      );
-    }
-
-    // valid amount
-    else if (restrictions.extraAllowed >= 0) {
-      return (
-        <div className={className}>
-          {restrictions.length}/{restrictions.maxLength} {pluralize('character', restrictions.length)}
-        </div>
-      );
-    }
-
-    // too many
-    else if (restrictions.length > restrictions.maxLength) {
-      return (
-        <div className={className}>
-          {restrictions.length}/{restrictions.maxLength} {pluralize('character', restrictions.length)}
-        </div>
-      );
-    }
-  },
-
   // derive some data from our props
   getRestrictions: function(value){
     var props = this.props;
@@ -78,11 +66,10 @@ var RestrictedTextBox = React.createClass({
   }
 });
 
-module.exports = RestrictedTextBox;
-
 function pluralize(str, n){
   return n === 1 ? str : str + 's';
 }
 
+module.exports = RestrictedTextBox;