initial commit for github

Author: evanlucas

README.md

@@ -0,0 +1,21 @@
+## React Coding Challenge
+
+This code challenge tests your skills in react js, testing and modular design. The purpose of the application is to correctly render a stream of messages coming from an api. Different messages will be coded different colors and require slightly different rendering. The rules are described in detail below.
+
+This challenge already includes an API response. It is not required or expected for you to make any changes to this interaction. The 3 priorities that we provide you are:
+  * 1 = error
+  * 2 = warning
+  * 3 = info
+
+### Acceptance Criteria
+
+1. Messages should be rendered in a grid-like structure determined by you. The newest messages should appear at the top of the grid.
+2. The messages should be color coded depending on the priority of the message. The appropriate color per priority is:
+   * error: #F56236
+   * warning: #FCE788
+   * info: #88FCA3
+3. Each time a message with the priority level of error is received, a snackbar containing the error message should also appear at the top of the application. The error should disappear in 2 seconds or when another error message takes its place.
+4. A user should be able to clear the grid of all messages at any point.
+5. A user should be able to start and stop incoming messages. By default the messages should be running and displaying on the grid.
+6. Use material-ui components and JSS styles.
+7. Test your application to the degree that you feel comfortable with. No specific testing frameworks are required.

package.json

@@ -0,0 +1,59 @@
+{
+  "name": "help.com-react-coding-challange",
+  "version": "0.0.1",
+  "description": "help.com react coding challange",
+  "main": "index.js",
+  "scripts": {
+    "start": "node server",
+    "lint": "esw src/",
+    "test": "jest"
+  },
+  "author": "Help.com",
+  "license": "No license",
+  "dependencies": {
+    "@material-ui/core": "^3.8.2",
+    "chance": "^0.8.0",
+    "connect": "^3.4.1",
+    "html-webpack-plugin": "^2.28.0",
+    "lodash": "^4.17.2",
+    "prop-types": "^15.5.8",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-hot-loader": "^4.3.4",
+    "webpack": "^2.4.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.10.4",
+    "babel-eslint": "^7.1.0",
+    "babel-jest": "^19.0.0",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-plugin-transform-react-jsx-source": "^6.9.0",
+    "babel-preset-env": "^1.3.1",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-1": "^6.16.0",
+    "css-loader": "^0.23.1",
+    "eslint": "^5.12.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.12.3",
+    "eslint-watch": "^4.0.2",
+    "jest": "^19.0.0",
+    "style-loader": "^0.13.0",
+    "webpack-dev-server": "^2.4.2"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "**/src/**/*.js",
+      "!**/__tests__/**"
+    ],
+    "moduleDirectories": [
+      "node_modules",
+      "src"
+    ],
+    "setupFiles": [
+      "./jest-setup.js"
+    ]
+  }
+}

server.js

@@ -0,0 +1,19 @@
+const path = require('path')
+const webpack = require('webpack')
+
+const WebpackDevServer = require('webpack-dev-server')
+
+const config = require('./webpack/config')
+const port = process.env.PORT || 9000
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true,
+  stats: { colors: true, chunks: false },
+}).listen(port, 'localhost', function (err) {
+  if (err) {
+    console.log(err)
+  }
+  console.log(`Listening at localhost:${port}`)
+})

src/api.js

@@ -0,0 +1,44 @@
+import Chance from 'chance'
+import lodash from 'lodash'
+
+class MessageGenerator {
+  constructor(options) {
+    this.messageCallback = options.messageCallback
+    this.stopGeneration = false
+    this.chance = new Chance()
+  }
+
+  stop() {
+    this.stopGeneration = true
+  }
+
+  start() {
+    this.stopGeneration = false
+    this.generate()
+  }
+
+  isStarted() {
+    return !this.stopGeneration
+  }
+
+  /**
+     * priority from 1 to 3, 1 = error, 2 = warning, 3 = info
+     * */
+  generate() {
+    if (this.stopGeneration) {
+      return
+    }
+    const message = this.chance.string()
+    const priority = lodash.random(1, 3)
+    const nextInMS = lodash.random(500, 3000)
+    this.messageCallback({
+      message,
+      priority,
+    })
+    setTimeout(() => {
+      this.generate()
+    }, nextInMS)
+  }
+}
+
+export default MessageGenerator

src/components/message-list.js

@@ -0,0 +1,66 @@
+import React, { Component } from 'react'
+import Button from '@material-ui/core/Button'
+import Api from '../api'
+
+class MessageList extends Component {
+  constructor(...args) {
+    super(...args)
+    this.state = {
+      messages: [],
+    }
+  }
+
+  componentWillMount() {
+    this.api = new Api({
+      messageCallback: (message) => {
+        this.messageCallback(message)
+      },
+    })
+  }
+
+  componentDidMount() {
+    this.api.start()
+  }
+
+  messageCallback(message) {
+    const { messages } = this.state
+    this.setState({
+      messages: [
+        ...messages.slice(),
+        message,
+      ],
+    }, () => {
+      // Included to support initial direction. Please remove upon completion
+      console.log(messages)
+    })
+  }
+
+  renderButton() {
+    const isApiStarted = this.api.isStarted()
+    return (
+      <Button
+        variant="contained"
+        onClick={() => {
+          if (isApiStarted) {
+            this.api.stop()
+          } else {
+            this.api.start()
+          }
+          this.forceUpdate()
+        }}
+      >
+        {isApiStarted ? 'Stop Messages' : 'Start Messages'}
+      </Button>
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        {this.renderButton()}
+      </div>
+    )
+  }
+}
+
+export default MessageList

src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'/>
+    <title>Help.com React code challenge</title>
+    <link rel="shortcut icon" href="//assets.help.com/favicons/favicon.ico">
+  </head>
+  <body>
+    <div class="main"></div>
+  </body>
+</html>

src/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import MessageList from './components/message-list'
+
+const NewApp = require('./components/message-list').default
+
+function renderApp(App) {
+  ReactDOM.render(<App />, document.querySelector('.main'))
+}
+
+renderApp(MessageList)
+
+if (module.hot) {
+  module.hot.accept('./components/message-list', () => {
+    renderApp(NewApp)
+  })
+}

webpack/config.js

@@ -0,0 +1,61 @@
+/* eslint-env node */
+
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+
+const basePath = '/'
+
+module.exports = {
+  devtool: 'eval-source-map',
+
+  entry: [
+    'react-hot-loader/patch',
+    `webpack-dev-server/client?http://localhost:${9000}`,
+    'webpack/hot/only-dev-server',
+    path.resolve(__dirname, '../src/index'),
+  ],
+
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: 'bundle.js',
+    publicPath: basePath,
+  },
+
+  resolve: {
+    extensions: ['.js'],
+    modules: [
+      'src',
+      'node_modules',
+    ],
+    alias: {
+      react: path.resolve(__dirname, '../node_modules/react'),
+      'react-dom': path.resolve(__dirname, '../node_modules/react-dom'),
+    },
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.DefinePlugin({
+      BASE_PATH: JSON.stringify(basePath),
+    }),
+  ],
+
+  module: {
+    rules: [{
+      test: /\.js$/,
+      use: ['babel-loader?cacheDirectory'],
+      include: [
+        path.resolve(__dirname, '../src'),
+      ],
+    }],
+  },
+
+  performance: {
+    hints: false,
+  },
+}