adding author component

Author: dtejada2

dist/scripts/bundle.js

@@ -12,12 +12,13 @@
  "bootstrap": "^3.3.5",
  "browserify": "^11.0.1",
  "flux": "^2.0.3",
- "gulp": "^3.9.0",
+ "gulp": "^3.9.1",
  "gulp-concat": "^2.6.0",
  "gulp-connect": "^2.2.0",
  "gulp-eslint": "^0.15.0",
  "gulp-open": "^1.0.0",
  "jquery": "^2.1.4",
+ "loadash": "^1.0.0",
  "react": "^0.13.3",
  "react-router": "^0.13.3",
  "reactify": "^1.1.1",

package-lock.json

@@ -0,0 +1,50 @@
+"use strict";
+
+//This file is mocking a web API by hitting hard coded data.
+var authors = require('./authorData').authors;
+var _ = require('lodash');
+
+//This would be performed on the server in a real app. Just stubbing in.
+var _generateId = function(author) {
+return author.firstName.toLowerCase() + '-' + author.lastName.toLowerCase();
+};
+
+var _clone = function(item) {
+return JSON.parse(JSON.stringify(item)); //return cloned copy so that the item is passed by value instead of by reference
+};
+
+var AuthorApi = {
+getAllAuthors: function() {
+return _clone(authors); 
+},
+
+getAuthorById: function(id) {
+var author = _.find(authors, {id: id});
+return _clone(author);
+},
+
+saveAuthor: function(author) {
+//pretend an ajax call to web api is made here
+console.log('Pretend this just saved the author to the DB via AJAX call...');
+
+if (author.id) {
+var existingAuthorIndex = _.indexOf(authors, _.find(authors, {id: author.id})); 
+authors.splice(existingAuthorIndex, 1, author);
+} else {
+//Just simulating creation here.
+//The server would generate ids for new authors in a real app.
+//Cloning so copy returned is passed by value rather than by reference.
+author.id = _generateId(author);
+authors.push(author);
+}
+
+return _clone(author);
+},
+
+deleteAuthor: function(id) {
+console.log('Pretend this just deleted the author from the DB via an AJAX call...');
+_.remove(authors, { id: id});
+}
+};
+
+module.exports = AuthorApi;

package.json

@@ -0,0 +1,20 @@
+module.exports = {
+authors: 
+[
+{
+id: 'cory-house', 
+firstName: 'Cory', 
+lastName: 'House'
+},
+{
+id: 'scott-allen', 
+firstName: 'Scott', 
+lastName: 'Allen'
+},
+{
+id: 'dan-wahlin', 
+firstName: 'Dan', 
+lastName: 'Wahlin'
+}
+]
+};

src/api/authorApi.js

@@ -0,0 +1,47 @@
+"use strict"
+
+var React = require('react');
+
+var AuthorApi = require('../../api/authorApi');
+
+var Authors = React.createClass({
+ getInitialState: function(){
+ return {
+ authors: []
+ }
+ },
+
+ componentWillMount: function(){
+ this.setState({ authors: AuthorApi.getAllAuthors()});
+ },
+
+ render: function(){
+ var createAuthorRow = function(author){
+ return (
+ <tr key={author.id}>
+ <td><a href={"/#authors" + author.id}>{author.id}</a></td>
+ <td>{author.firstName} {author.lastName}</td>
+ </tr>
+ );
+ }
+ return (
+ <div>
+ <h1>Author</h1>
+
+ <table className="table">
+ <thead>
+ <tr>
+ <th>ID</th>
+ <th>Name</th>
+ </tr>
+ </thead>
+ <tbody>
+ {this.state.authors.map(createAuthorRow, this)}
+ </tbody>
+ </table>
+ </div>
+ );
+ }
+});
+
+module.exports = Authors;

src/api/authorData.js

@@ -11,8 +11,9 @@ var Header = React.createClass({
  <img src="images/pluralsight-logo.png"/>
  </a>
 
- <ul className="nav nvarbar-nav">
+ <ul className="nav navbar-nav">
  <li><a href="/">Home</a></li>
+ <li><a href="/#authors">Authors</a></li>
  <li><a href="/#about">About</a></li>
  </ul>
  </div>

src/components/author/authorPage.js

@@ -1,6 +1,7 @@
 $ = JQuery = require('jquery');
 var React = require('react');
 var Home = require('./components/homePage');
+var Author = require('./components/author/authorPage');
 var About = require('./components/about/aboutPage');
 var Header = require('./components/common/header');
 (function(win){
@@ -11,8 +12,8 @@ var Header = require('./components/common/header');
  var Child;
 
  switch (this.props.route){
- case 'about': Child = About; 
- break;
+ case 'about': Child = About; break;
+ case 'authors': Child= Author; break;
  default: Child = Home;
  }