From fcd1953c833fac402d2900a359527974ec462ef7 Mon Sep 17 00:00:00 2001
From: Chuck Carpenter <chuck.carpenter@me.com>
Date: Sun, 12 Jul 2015 11:05:11 -0400
Subject: [PATCH 1/4] adding initial React setup

---
 Gruntfile.js        |  2 +-
 README.md           | 13 +++++++++
 app/index.html      | 28 ++++--------------
 app/scripts/main.js | 71 +++++++++++++++++++++++++++++++++++++++++++++
 bower.json          |  3 +-
 package.json        |  3 ++
 6 files changed, 96 insertions(+), 24 deletions(-)
 create mode 100644 README.md

diff --git a/Gruntfile.js b/Gruntfile.js
index b5979a5..b98b0df 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -70,7 +70,7 @@ module.exports = function (grunt) {
             '<%= config.app %>/images/{,*/}*',
             '.tmp/scripts/{,*/}*.js'
           ],
-          port: 9000,
+          port: 8000,
           server: {
             baseDir: ['.tmp', config.app],
             routes: {
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0e98bd3
--- /dev/null
+++ b/README.md
@@ -0,0 +1,13 @@
+### Installation:
+
+* Install [Homebrew](http://brew.sh/): ```ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"``` you may need to run ```ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"``` and make certain that your user has administrative rights for the file system
+  - Make sure everything is running smoothly with ```brew doctor```
+* Install [Node](http://nodejs.org/): ```brew install node```
+* Install [Grunt-Cli](http://gruntjs.com/): ```npm install -g grunt-cli```
+* Install [Bower](http://bower.io/): ```npm install -g bower```
+* Install packages by running ```npm install && bower install```
+
+#### Grunt Commands
+
+* `grunt serve` - This will give you a local development instance to work from and open the site in a local server.
+* `grunt build` - This will build a deployable version of the app.
diff --git a/app/index.html b/app/index.html
index e945475..a6ffae0 100644
--- a/app/index.html
+++ b/app/index.html
@@ -57,6 +57,7 @@ <h3>Enter a search query</h3>
                 </div>
                 <button type="submit" class="btn btn-default">Submit</button>
               </form>
+          <div id="form-search" class="col-lg-6">
           </div><!-- /.col-lg-6 -->
         </div><!-- /.row -->
       </div>
@@ -92,14 +93,11 @@ <h5 class="media-heading">
             <% }) %>
           </script>
         </div>
-        <div class="col-lg-6">
-        </div>
+        <div class="col-lg-6"><div id="sl-widget"></div></div>
       </div>
 
 
-
-
-<!-- GOOGLE TRENDS -->
+    <!-- GOOGLE TRENDS -->
 	<h4> GOOGLE TRENDS </h4>
 	<div id="google_trends">
 	<script type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=digital+privacy&tz=Etc/GMT%2B4&content=1&cid=GEO_MAP_0_0&export=5&w=500&h=530"></script>
@@ -158,25 +156,9 @@ <h1>Twitter Results</h1>
           mocha.run();
         }
   </script>
-
-
-
-
-<<<<<<< HEAD
-
-
-
-
-
-
-
-
+  
       <div class="footer">
         <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
-=======
-	<div class="footer">
-        	<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
->>>>>>> 002a704f5c4963c8ed852c2071fd5793943bf2e3
       </div>
     </div>
 
@@ -186,8 +168,10 @@ <h1>Twitter Results</h1>
     <script src="/bower_components/jquery/dist/jquery.js"></script>
     <script src="/bower_components/underscore/underscore.js"></script>
     <script src="/bower_components/moment/moment.js"></script>
+    <script src="/bower_components/react/react.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
+    <script src="/bower_components/react/JSXTransformer.js"></script>
 
 
     <!-- build:js(.) scripts/plugins.js -->
diff --git a/app/scripts/main.js b/app/scripts/main.js
index 9521a1e..e103fc3 100644
--- a/app/scripts/main.js
+++ b/app/scripts/main.js
@@ -5,3 +5,74 @@ console.log('\'Allo \'Allo!');
 $(document).ready(function() {
   nyt('obamacare');
 });
+function get( src, query ) {
+    const request = new XMLHttpRequest();
+    let url;
+
+    if ( src === 'sunlight') {
+        url = 'https://congress.api.sunlightfoundation.com/documents/search?' +
+              'query=' + query + '&apikey=18a4e7908bc444e8a506f970d12f1a5a';
+    }
+
+    request.open('GET', url, true);
+    // request.withCredentials = true;
+    // request.setRequestHeader('X-APIKEY', '18a4e7908bc444e8a506f970d12f1a5a');
+
+    request.onload = ()=> {
+        if (request.status >= 200 && request.status < 400) {
+            // Success!
+            // var data = JSON.parse(request.responseText);
+            return request.responseText;
+        } else {
+            // We reached our target server, but it returned an error
+            console.warn(request.statusText);
+        }
+   };
+
+    request.onerror = ()=> {
+        // There was a connection error of some sort
+        console.error('Failed Network Connection');
+    };
+
+    request.send();
+}
+
+const SearchForm = React.createClass({
+    render () {
+        return (
+            <form>
+                <div className="form-group">
+                    <input type="text" className="form-control" id="search_terms" placeholder="Search for..." />
+                </div>
+                <div className="form-group">
+                    <input type="text" className="form-control" id="location" placeholder="Location" />
+                </div>
+                <button type="submit" className="btn btn-default">Submit</button>
+            </form>
+        )
+    }
+});
+
+const SunlightWidget = React.createClass({
+    getDefaultProps () {
+        data: {}
+    },
+    componentDidMount () {
+        this.props.data = get( 'sunlight', 'Shark Attacks' );
+    },
+    render () {
+        return (
+            <div>
+                <p>{ this.props.data }</p>
+            </div>
+        );
+    }
+});
+
+React.render(
+    <SunlightWidget />, document.getElementById('sl-widget')
+);
+
+React.render(
+    <SearchForm />, document.getElementById('form-search')
+);
diff --git a/bower.json b/bower.json
index bbc868d..cbbc0db 100644
--- a/bower.json
+++ b/bower.json
@@ -4,7 +4,8 @@
   "dependencies": {
     "bootstrap-sass": "~3.3.5",
     "underscore": "1.8.3",
-    "moment": "2.10.3"
+    "moment": "2.10.3",
+    "react": "~0.13.3"
   },
   "overrides": {
     "bootstrap-sass": {
diff --git a/package.json b/package.json
index f25bca1..74d629c 100644
--- a/package.json
+++ b/package.json
@@ -45,5 +45,8 @@
         "single"
       ]
     }
+  },
+  "dependencies": {
+    "react": "^0.13.3"
   }
 }

From d10b667328ccdef83e7e8b6632aebadbbedca25c Mon Sep 17 00:00:00 2001
From: Chuck Carpenter <chuck.carpenter@me.com>
Date: Sun, 12 Jul 2015 13:04:28 -0400
Subject: [PATCH 2/4] adding dynamic search form

---
 app/index.html      |   1 +
 app/scripts/main.js | 139 +++++++++++++++++++++++++++++++++-----------
 package.json        |   1 +
 3 files changed, 106 insertions(+), 35 deletions(-)

diff --git a/app/index.html b/app/index.html
index a6ffae0..adf1b18 100644
--- a/app/index.html
+++ b/app/index.html
@@ -172,6 +172,7 @@ <h1>Twitter Results</h1>
     <!-- endbower -->
     <!-- endbuild -->
     <script src="/bower_components/react/JSXTransformer.js"></script>
+    <scrip src="/node_modules/babel-core/browser-polyfill.js"></scrip>
 
 
     <!-- build:js(.) scripts/plugins.js -->
diff --git a/app/scripts/main.js b/app/scripts/main.js
index e103fc3..ad45f28 100644
--- a/app/scripts/main.js
+++ b/app/scripts/main.js
@@ -6,73 +6,142 @@ $(document).ready(function() {
   nyt('obamacare');
 });
 function get( src, query ) {
-    const request = new XMLHttpRequest();
-    let url;
+    return new Promise( (res, rej) => {
+        const request = new XMLHttpRequest();
+        let url;
 
-    if ( src === 'sunlight') {
-        url = 'https://congress.api.sunlightfoundation.com/documents/search?' +
-              'query=' + query + '&apikey=18a4e7908bc444e8a506f970d12f1a5a';
-    }
+        if ( src === 'sunlight') {
+            url = 'https://congress.api.sunlightfoundation.com/documents/search?' +
+                  'query=' + query + '&apikey=18a4e7908bc444e8a506f970d12f1a5a';
+        }
 
-    request.open('GET', url, true);
-    // request.withCredentials = true;
-    // request.setRequestHeader('X-APIKEY', '18a4e7908bc444e8a506f970d12f1a5a');
+        request.open('GET', url, true);
+        //TODO: Figure out why API key isn't passing and getting 200 response.
+        // request.setRequestHeader('X-APIKEY', '18a4e7908bc444e8a506f970d12f1a5a');
 
-    request.onload = ()=> {
-        if (request.status >= 200 && request.status < 400) {
-            // Success!
-            // var data = JSON.parse(request.responseText);
-            return request.responseText;
-        } else {
-            // We reached our target server, but it returned an error
-            console.warn(request.statusText);
-        }
-   };
+        request.onload = ()=> {
+            if (request.status >= 200 && request.status < 400) {
+                // Success!
+                var data = JSON.parse(request.response);
+                res( data );
+            } else {
+                // We reached our target server, but it returned an error
+                rej( console.warn(request.statusText) );
+            }
+       };
 
-    request.onerror = ()=> {
-        // There was a connection error of some sort
-        console.error('Failed Network Connection');
-    };
+        request.onerror = ()=> {
+            // There was a connection error of some sort
+            rej( console.error('Failed Network Connection') );
+        };
 
-    request.send();
+        request.send();
+    });
 }
 
+const Loader = React.createClass({
+    propTypes: {
+        showContentWhen: React.PropTypes.bool.isRequired
+    },
+    render () {
+        if ( this.props.showContentWhen ) {
+            return <div key="content">{ this.props.children }</div>;
+        } else {
+            return <div>Loading...</div>;
+        };
+    }
+});
+
 const SearchForm = React.createClass({
+    getInitialState () {
+        return {
+            submitted: false,
+            search: ''
+        };
+    },
+    handleClick: function(event) {
+        this.setState({
+            submitted: true,
+            search: ''
+        });
+    },
+    getFormData: function() {
+        let data = {
+              search: this.refs.search_terms.getDOMNode().value
+            // , geoLocation: this.refs.location.getDOMNode().value
+        }
+
+        return data
+    },
     render () {
+        // TODO: Add location based searches
+        // <div className="form-group">
+        //     <input type="text" className="form-control" id="location" placeholder="Location" />
+        // </div>
         return (
             <form>
                 <div className="form-group">
                     <input type="text" className="form-control" id="search_terms" placeholder="Search for..." />
                 </div>
-                <div className="form-group">
-                    <input type="text" className="form-control" id="location" placeholder="Location" />
-                </div>
-                <button type="submit" className="btn btn-default">Submit</button>
+                <button type="submit" onClick={ this.handleClick } className="btn btn-default">Submit</button>
             </form>
         )
     }
 });
 
 const SunlightWidget = React.createClass({
-    getDefaultProps () {
-        data: {}
+    getInitialState () {
+        return {
+            noData: true,
+            loading: true,
+            results: []
+        };
     },
     componentDidMount () {
-        this.props.data = get( 'sunlight', 'Shark Attacks' );
+        new Promise( ( resolve, reject )=> {
+            get( 'sunlight', 'Cool' ).then(
+                ( data )=> {
+                    if ( !data ) { return; }
+
+                    return resolve( data.results );
+                },
+                ( err ) => {
+                    return reject( console.error( 'Failed!', err ) );
+                }
+            );
+        }).then( ( results )=> {
+            this.setState({
+                noData: false,
+                loading: false,
+                results: results.map(
+                    (item, i)=> {
+                        return <li className="list-group-item" key={ i }><a href={ item.source_url }>{ item.title }</a></li>
+                    }
+                )
+            });
+        });
     },
     render () {
+        let defaultText = 'This widget searchs documents including the Government Accountability Office (GAO) Reports' +
+                          ' and Inspector General Reports. These government oversight documents investigate misconduct,' +
+                          ' waste and programs.'
         return (
-            <div>
-                <p>{ this.props.data }</p>
+            <div className="panel panel-default">
+                <div className="panel-heading">GAO Documents (provided by the Sunlight Foundation)</div>
+                <div className="panel-body"><p>{ defaultText }</p></div>
+                <Loader showContentWhen={ !this.state.loading }>
+                    { this.state.noData ? <p>No Results</p>
+                      : <ul className="list-group">{ this.state.results }</ul> }
+                </Loader>
             </div>
         );
     }
 });
 
 React.render(
-    <SunlightWidget />, document.getElementById('sl-widget')
+    <SearchForm />, document.getElementById('form-search')
 );
 
 React.render(
-    <SearchForm />, document.getElementById('form-search')
+    <SunlightWidget />, document.getElementById('sl-widget')
 );
diff --git a/package.json b/package.json
index 74d629c..e334fba 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     }
   },
   "dependencies": {
+    "babel-core": "^5.6.18",
     "react": "^0.13.3"
   }
 }

From 51080ea295d821ff92544fffc4d5f4976e90f7c6 Mon Sep 17 00:00:00 2001
From: Chuck Carpenter <chuck.carpenter@me.com>
Date: Sun, 12 Jul 2015 14:39:50 -0400
Subject: [PATCH 3/4] formatting the widgets

---
 app/index.html      | 98 ++++++++++++++++++++++-----------------------
 app/scripts/main.js | 15 ++++---
 2 files changed, 54 insertions(+), 59 deletions(-)

diff --git a/app/index.html b/app/index.html
index adf1b18..caceaaf 100644
--- a/app/index.html
+++ b/app/index.html
@@ -18,18 +18,15 @@
     <link rel="stylesheet" href="styles/main.css">
     <!-- endbuild -->
 
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
   </head>
   <body>
     <!--[if lt IE 10]>
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
 
-
-
 	<script>
 		function showInput() {
-    			var my_search = document.getElementById("search_terms").value;
+    		var my_search = document.getElementById("search_terms").value;
 			alert(my_search);
 			document.getElementById('display').innerHTML = my_search;
 		}
@@ -37,7 +34,7 @@
 
 
 
-    <div class="container">
+    <div class="container-fluid">
       <div class="header">
         <h1 class="text-muted"><span class="glyphicon glyphicon-thumbs-up"></span> Make Me Smart</h1>
       </div>
@@ -57,17 +54,19 @@ <h3>Enter a search query</h3>
                 </div>
                 <button type="submit" class="btn btn-default">Submit</button>
               </form>
-          <div id="form-search" class="col-lg-6">
+          <!-- <div id="form-search" class="col-lg-6"></div> -->
           </div><!-- /.col-lg-6 -->
         </div><!-- /.row -->
       </div>
 
       <div class="row">
         <div class="col-lg-6">
-          <h4>NYT</h4>
-          <div id="nyt-articles"></div>
+        <div class="panel panel-default">
+          <div class="panel-heading">NYT</div>
+          <ul class="list-group" id="nyt-articles"></ul>
           <script type="text/template" id="nyt-articles-template">
             <% _.each(stories, function(story) { %>
+              <li class="list-group-item">
               <div class="media">
               <% if ( _.findWhere(story.multimedia, {type: 'image', subtype: 'thumbnail'}) ) { %>
                 <div class="media-left">
@@ -90,79 +89,77 @@ <h5 class="media-heading">
                 <%=story.abstract||story.snippet||story.lead_paragraph %>
                 </div>
               </div>
+              </li>
             <% }) %>
           </script>
         </div>
-        <div class="col-lg-6"><div id="sl-widget"></div></div>
+       </div>
+       <div class="col-lg-6">
+            <!-- GOOGLE TRENDS -->
+            <div id="google_trends" class="panel panel-default">
+               <div class="panel-heading"> GOOGLE TRENDS </div>
+
+            <script type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=digital+privacy&geo=US&tz=Etc/GMT%2B4&content=1&cid=GEO_MAP_0_0&export=5&w=650&h=530"></script>
+            <script type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=digital+privacy&geo=US&tz=Etc/GMT%2B4&content=1&cid=GEO_TABLE_0_0&export=5&w=650&h=330"></script>
+            </div>
+        </div>
       </div>
 
 
-    <!-- GOOGLE TRENDS -->
-	<h4> GOOGLE TRENDS </h4>
-	<div id="google_trends">
-	<script type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=digital+privacy&tz=Etc/GMT%2B4&content=1&cid=GEO_MAP_0_0&export=5&w=500&h=530"></script>
-	<script type="text/javascript" src="//www.google.com/trends/embed.js?hl=en-US&q=digital+privacy&tz=Etc/GMT%2B4&content=1&cid=GEO_TABLE_0_0&export=5&w=500&h=330"></script>
-	</div>
+<div class="row">
+    <div class="col-lg-6"><div id="sl-widget"></div></div>
+    <div class="col-lg-6">
 
+      <!-- Start twitter results -->
+      <div class="twitter-wrapper panel panel-default">
+        <div class="panel-heading">Twitter Results</div>
+        <ul class="twitter_result list-group">
+        </ul>
+      </div>
+      <!-- End twitter -->
 
+    </div>
+</div>
 
 
       <!-- bower:js -->
       <script src="/bower_components/jquery/dist/jquery.js"></script>
       <script src="/bower_components/underscore/underscore.js"></script>
       <script src="/bower_components/moment/moment.js"></script>
+      <script src="/bower_components/react/react.js"></script>
       <!-- endbower -->
       <!-- include source files here... -->
-      <!-- include spec files here... -->
-      <script src="spec/test.js"></script>
-
-      <!-- Start twitter results -->
-      <div class="twitter-wrapper">
-        <h1>Twitter Results</h1>
-        <ul class="twitter_result list-group">
-
-        </ul>
-      </div>
-      <!-- End twitter -->
       <script type="text/javascript">
+    //   $('#search_terms').on('keypress', function(){
+    //     var term = $('#search_terms').val();
+    //     mms_search(term);
+    //     setTimeout(function(){
+    //     }, 250);
+    //   })
+      (function mms_search(){
+        var search_url = 'http://mms-twitter-endpoint.herokuapp.com/twitter/digital+privacy';
 
-      $('#search_terms').on('keypress', function(){
-        var term = $('#search_terms').val();
-        mms_search(term);
-        setTimeout(function(){
-        }, 250);
-      })
-
-      function mms_search(term){
-        console.log('accepted ' + term);
-        var search_url = 'http://mms-twitter-endpoint.herokuapp.com/twitter/' + encodeURI(term);
         console.log('searching ' + search_url);
         $.getJSON( search_url, function( data ) {
           console.log(data.results);
           $('.twitter_result').html('');
 
           for(i = 0; i < data.results.length; i++){
+            if ( data.results[i]['user'] === undefined ) { data.results[i]['user'] = ''; }
             console.log('rendering: ' + data.results[i]['text']);
-            $('.twitter_result').append('<li class="list-group-item"><p class="tweet-text">'+data.results[i]['text']+'</p><span class="tweet-author">'+data.results[i]['user']['']+'</span></li>');
+            $('.twitter_result').append(
+                '<li class="list-group-item"><p class="tweet-text">'+data.results[i]['text']+'</p>' +
+                '<em class="tweet-author">-'+data.results[i]['user'].name +'</em></li>'
+            );
           }
         });
-      }
-
+      })();
       </script>
 
-    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
-    <script>
-        if (navigator.userAgent.indexOf('PhantomJS') === -1) {
-          mocha.run();
-        }
-  </script>
-  
-      <div class="footer">
-        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
-      </div>
+	<div class="footer">
+        <p><span class="glyphicon glyphicon-heart"></span> from the DatSciHack team</p>
     </div>
 
-
     <!-- build:js(.) scripts/vendor.js -->
     <!-- bower:js -->
     <script src="/bower_components/jquery/dist/jquery.js"></script>
@@ -190,7 +187,6 @@ <h1>Twitter Results</h1>
     <script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab.js"></script>
     <!-- endbuild -->
 
-
     <!-- build:js scripts/main.js -->
     <script src="scripts/nyt.js"></script>
     <script src="scripts/main.js"></script>
diff --git a/app/scripts/main.js b/app/scripts/main.js
index ad45f28..b5a4567 100644
--- a/app/scripts/main.js
+++ b/app/scripts/main.js
@@ -1,10 +1,9 @@
-// jshint devel:true
-console.log('\'Allo \'Allo!');
-
 // load nytimes:
 $(document).ready(function() {
-  nyt('obamacare');
+  nyt('digital privacy');
 });
+
+// React app
 function get( src, query ) {
     return new Promise( (res, rej) => {
         const request = new XMLHttpRequest();
@@ -99,7 +98,7 @@ const SunlightWidget = React.createClass({
     },
     componentDidMount () {
         new Promise( ( resolve, reject )=> {
-            get( 'sunlight', 'Cool' ).then(
+            get( 'sunlight', 'Digital Privacy' ).then(
                 ( data )=> {
                     if ( !data ) { return; }
 
@@ -138,9 +137,9 @@ const SunlightWidget = React.createClass({
     }
 });
 
-React.render(
-    <SearchForm />, document.getElementById('form-search')
-);
+// React.render(
+//     <SearchForm />, document.getElementById('form-search')
+// );
 
 React.render(
     <SunlightWidget />, document.getElementById('sl-widget')

From 3f488101dde7c200a9f6bed2c32819a00f84912e Mon Sep 17 00:00:00 2001
From: Chuck Carpenter <chuck.carpenter@me.com>
Date: Sun, 12 Jul 2015 14:49:26 -0400
Subject: [PATCH 4/4] fixing form formatting

---
 app/index.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/index.html b/app/index.html
index caceaaf..38ac497 100644
--- a/app/index.html
+++ b/app/index.html
@@ -44,7 +44,6 @@ <h3>Enter a search query</h3>
 
         <p class="lead">In order to get started, enter a term and location.</p>
         <div class="row">
-          <div class="col-lg-6">
               <form onsubmit="showInput();">
                 <div class="form-group">
                   <input type="text" class="form-control" id="search_terms" placeholder="Search for...">
@@ -55,7 +54,6 @@ <h3>Enter a search query</h3>
                 <button type="submit" class="btn btn-default">Submit</button>
               </form>
           <!-- <div id="form-search" class="col-lg-6"></div> -->
-          </div><!-- /.col-lg-6 -->
         </div><!-- /.row -->
       </div>