chuckcarpenter · chuckcarpenter · Jul 12, 2015 · Jul 12, 2015 · Jul 12, 2015 · Jul 12, 2015
diff --git 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
@@ -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
@@ -18,26 +18,23 @@
     <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;
 		}
 	</script>
 
 
 
-    <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>
@@ -47,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...">
@@ -57,16 +53,18 @@ <h3>Enter a search query</h3>
                 </div>
                 <button type="submit" class="btn btn-default">Submit</button>
               </form>
-          </div><!-- /.col-lg-6 -->
+          <!-- <div id="form-search" class="col-lg-6"></div> -->
         </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">
@@ -89,105 +87,87 @@ <h5 class="media-heading">
                 <%=story.abstract||story.snippet||story.lead_paragraph %>
                 </div>
               </div>
+              </li>
             <% }) %>
           </script>
         </div>
-        <div class="col-lg-6">
+       </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>
 
 
+<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 -->
 
-<!-- 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>
+</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>
-
-
-
-
-<<<<<<< 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>
+        <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>
     <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>
+    <scrip src="/node_modules/babel-core/browser-polyfill.js"></scrip>
 
 
     <!-- build:js(.) scripts/plugins.js -->
@@ -205,7 +185,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
@@ -1,7 +1,146 @@
-// 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();
+        let url;
+
+        if ( src === 'sunlight') {
+            url = 'https://congress.api.sunlightfoundation.com/documents/search?' +
+                  'query=' + query + '&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.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
+            rej( console.error('Failed Network Connection') );
+        };
+
+        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>
+                <button type="submit" onClick={ this.handleClick } className="btn btn-default">Submit</button>
+            </form>
+        )
+    }
+});
+
+const SunlightWidget = React.createClass({
+    getInitialState () {
+        return {
+            noData: true,
+            loading: true,
+            results: []
+        };
+    },
+    componentDidMount () {
+        new Promise( ( resolve, reject )=> {
+            get( 'sunlight', 'Digital Privacy' ).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 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(
+//     <SearchForm />, document.getElementById('form-search')
+// );
+
+React.render(
+    <SunlightWidget />, document.getElementById('sl-widget')
+);
diff --git 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": {