init test app

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.idea
+DB_Sto*

Dockerfile

@@ -0,0 +1,14 @@
+FROM node:boron
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+RUN npm install webpack -g
+
+COPY package.json /usr/src/app/
+RUN npm install
+
+COPY . /usr/src/app
+
+EXPOSE 3000
+
+CMD [ "npm", "start" ]

README.md

@@ -1,51 +1,2 @@
-## Coding Challenge
-
-In order to be considered for this position, you must complete the following steps. 
-
-*Note: This task should take no longer than 1-2 hours at the most.*
-
-
-### Prerequisites
-
-- Please note that this will require some basic knowledge and/or the ability to learn of the following:
-       - [JavaScript](http://www.codecademy.com/tracks/javascript)
-       - [ExpressJS](http://expressjs.com/)
-       - [ReactJS](https://facebook.github.io/react/)
-       - [WebpackJS](https://webpack.js.org/)
-       - [ES6](http://es6-features.org/)
-       - Git
-       - [Docker](http://www.docker.com/)
-
-- You will need to have the following installed to complete this task
-       - [NodeJS](http://www.nodejs.org/)
-       - [Docker](http://www.docker.com/)
-
-## Task
-
-1. Fork this repository
-2. Create a *source* folder to contain your code. 
-3. In the *source* directory, please create an WebpackJS/ExpressJS/ReactJS/ES6 app that accomplishes the following:
-    - Connect to the [Github API](http://developer.github.com/)
-    - Find the [nodejs/node](https://github.com/nodejs/node) repository
-    - Find the most recent commits (choose at least 25 or more of the commits)
-    - Create a route that displays the recent commits by author. 
-    - If the commit hash ends in a number, color that row to light blue (#E6F1F6).
-4. Dockerize your application by writing a docker.yml file and test it by running the container locally.
-5. Commit and Push your code to your new repository
-6. Send us a pull request, we will review your code and get back to you
-
-### Tests
-
-Create the following unit tests with the testing framework of your choice:
-
-  1.  Verify that rows ending in a number are colored light blue.  
-
-## Once Complete
-1. Commit and Push your code to your new repository
-2. Send us a pull request, we will review your code and get back to you
-
-### Notes
-- When building the react application, you are free to use any type of css/html library if you choose to
-- You are free to write and modularize code any way you like just as long as you follow the requirements
-- 4 spaces for indentation! No tabs!
-- If you don't know how to do something, Google is your friend!
+RUN:
+    docker-compose up

app.js

@@ -0,0 +1,43 @@
+var express = require('express');
+var path = require('path');
+var favicon = require('serve-favicon');
+var logger = require('morgan');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+
+var index = require('./routes/index');
+var commits = require('./routes/commits');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'jade');
+
+// uncomment after placing your favicon in /public
+//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
+app.use(logger('dev'));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', index);
+app.use('/commits', commits);
+app.all('*', function(req, res) {
+    res.redirect("/");
+});
+
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+module.exports = app;

bin/www

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('expressnew:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '3000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+  console.log('Server is listening at port:', addr.port);
+  debug('Listening on ' + bind);
+}

client/components/commitList/commit/commit.css

@@ -0,0 +1,12 @@
+.commit {
+  border-bottom:1px solid gray;
+  padding:10px 0px;
+}
+
+.commit div {
+  padding: 10px 0px;
+}
+
+.commit.lightblue{
+  background-color: #E6F1F6;
+}

client/components/commitList/commit/commit.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import css from './commit.css';
+
+
+export default class Commit extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            commit: this.props.body
+        };
+    }
+
+
+    getUserCommits() {
+        this.props.getUserCommits(this.state.commit.commit.author.email);
+    }
+
+
+    render() {
+        return (
+            <li className={"commit" + (isLastCharNumber(this.state.commit.sha) ? ' lightblue' : '')}>
+                <div>
+                    <b>Sha:</b> {this.state.commit.sha}
+                </div>
+                <div>
+                    <b>Message:</b> {this.state.commit.commit.message}
+                </div>
+                {
+                    this.state.commit.author
+                        ? <div>
+                            <b>Author:</b>
+                            <a href="javascript:void(0)" onClick={this.getUserCommits.bind(this)}>
+                                {this.state.commit.commit.author.email}, {this.state.commit.commit.author.name}
+                            </a>
+                        </div>
+                        : ''
+                }
+                <a href={this.state.commit.commit.url}>{this.state.commit.commit.url}</a>
+
+            </li>
+        );
+    }
+}
+
+
+function isLastCharNumber(string) {
+    if (!string) return;
+    return !isNaN(string[string.length - 1]);
+}

client/components/commitList/commitList.css

@@ -0,0 +1,8 @@
+
+.commit-list ul{
+    list-style-type: none;
+}
+
+.commit-list h2 {
+   display: inline-block
+}

client/components/commitList/commitList.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import axios from 'axios';
+import css from './commitList.css';
+
+import Commit from './commit/commit.jsx';
+
+class CommitList extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            commits: [],
+            user: '',
+            loading: true
+
+        };
+    }
+
+    componentDidMount() {
+        axios.get(`/commits`)
+            .then(res => {
+                const commits = res.data;
+                this.setState({commits, loading: false});
+            });
+    }
+
+    getUserCommits(user) {
+        this.setState({loading: true});
+        axios.get(`/commits?author=${user}`)
+            .then(res => {
+                const commits = res.data;
+                this.setState({commits, user, loading: false});
+            });
+
+    }
+
+    render() {
+        return (
+            <div className="commit-list">
+                <h1>Commits</h1>
+                {this.state.user
+                    ? <div>
+                        <h2>for user:{this.state.user}</h2>
+                        <button onClick={this.resetUser.bind(this)}>Reset User</button>
+                    </div>
+                    : ''}
+                {this.state.loading
+                    ? 'Loading ...'
+                    : <ul>
+                        {this.state.commits.map(commit =>
+                            <Commit key={commit.sha} body={commit}
+                                    getUserCommits={this.getUserCommits.bind(this)}></Commit>
+                        )}
+
+                    </ul>}
+            </div>
+        );
+    }
+
+    resetUser() {
+        this.setState({loading: true});
+        axios.get(`/commits`)
+            .then(res => {
+                const commits = res.data;
+                this.setState({commits, user: null, loading: false});
+            });
+    }
+
+}
+
+ReactDOM.render(<CommitList/>, document.getElementById('CommitList'));

client/main.js

@@ -0,0 +1,4 @@
+
+import CommitList from './components/commitList/commitList.jsx';
+
+

docker-compose.yml

@@ -0,0 +1,7 @@
+version: "2"
+services:
+ app:
+   build:
+     context: .
+   ports:
+     - "3000:3000"