Initial commit

funeralzone · Jan 29, 2019 · a0df4c9 · a0df4c9
commit a0df4c9
Show file tree

Hide file tree

Showing 12 changed files with 6,149 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+node_modules/
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# Funeral Zone React Test #
+
+Seems like one of our developers made a few mistakes while trying to build a ToDo app. It will be up to you to get this app running and figure out a few bugs within and other problems that you might find in the codebase.
+
+After fixing all of the problems that you can find, you can gain some bonus points by making our ToDos sortable. It will be completely up to you on how to do that.
+
+1. Make sure to have `yarn` install globally: `npm install -g yarn`
+2. Install external dependencies using `yarn install`
+3. Start the app with `yarn start`
diff --git a/package.json b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "code-test-react-fz",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.js",
+  "scripts": {
+    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Joao Moreira",
+  "license": "ISC",
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-class-properties"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
+    "node-sass": "^4.11.0",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14"
+  },
+  "dependencies": {
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Funeral Zone React Test</title>
+    <style>
+      html {
+        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./bundle.js"></script>
+  </body>
+</html>
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+import ToDoList from './components/todoList';
+import styles from './styles.scss';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  render() {
+    return <div>
+      <h2 className={styles.title}>Here is my To Do list for today</h2>
+      <ToDoList />
+    </div>;
+  }
+}
+
+export default App;
diff --git a/src/components/completable.js b/src/components/completable.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+class Completable extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  completeTodo = () => {
+    this.props.completeTodo(this.props.index);
+  }
+}
+
+export default Completable;
diff --git a/src/components/todo.js b/src/components/todo.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import Completable from '../completable';
+
+import styles from '../styles.scss';
+
+class ToDo extends Completable {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <li className={styles.todo}>
+        <input type="checkbox" onChange={this.completeTodo} />
+        <li className={styles.todoContent}>
+          {this.props.value}
+        </li>
+      </li>
+    )
+  }
+}
+
+export default ToDo;
diff --git a/src/components/todoList.js b/src/components/todoList.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import ToDo from '../components/todo';
+
+import styles from '../src/styles.scss';
+
+class ToDoList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      todos: ['Finish this test'],
+      newTodo: '',
+    }
+  }
+
+  handleChange = (event) => {
+    this.setState({
+      newTodo: event.target.value,
+    });
+  }
+
+  addTodo = () => {
+    this.setState({
+      todos: [...this.state.todos, this.state.newTodo],
+      newTodo: '',
+    });
+  }
+
+  completeTodo = (index) => {
+    this.state.todos.splice(index, 1)
+  }
+
+  render() {
+    const { todos, newTodo } = this.state;
+    return (
+      <div className={styles.container}>
+        <div className={styles.controls}>
+          <input type="text" value={newTodo} onChange={this.handleChange} />
+          <button onClick={this.addTodo}>Add</button>
+        </div>
+        <ul className={styles.list}>
+          {todos.map((todo, index) => <ToDo value={todo} index={index} completeTodo={this.completeTodo}></ToDo>)}
+        </ul>
+      </div>
+
+    )
+  }
+}
+
+export default ToDoList;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './app';
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('app')
+);
+
+module.hot.accept();
diff --git a/src/styles.scss b/src/styles.scss
@@ -0,0 +1,44 @@
+.title {
+  color: #2C4251;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+}
+
+.controls {
+  margin: 1em;
+
+  input {
+    height: 26px;
+  }
+
+  button {
+    padding: 5px 10px;
+    font-size: 1em;
+    background-color: #2C4251;
+    color: #EDF5FC;
+  }
+}
+
+.list {
+  list-style: none;
+}
+
+.todo {
+  display: flex;
+  flex-direction: row;
+
+  input {
+    margin: 10px;
+  }
+}
+
+.todoContent {
+  min-width: 300px;
+  text-align: center;
+  color: #2C4251;
+  border: 1px solid #2C4251;
+  padding: 3px;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,45 @@
+const webpack = require('webpack');
+
+module.exports = {
+  entry: './src/index.js',
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.(css|scss)$/,
+        exclude: /node_modules/,
+        use: [
+          require.resolve('style-loader'),
+          {
+            loader: require.resolve('css-loader'),
+            options: {
+              modules: true,
+              localIdentName: '[local]__[hash:base64:5]',
+              importLoaders: 1,
+              sourceMap: true,
+            }
+          },
+          require.resolve('sass-loader')],
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['*', '.js', '.jsx']
+  },
+  output: {
+    path: __dirname + '/public',
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ],
+  devServer: {
+    contentBase: './public',
+    hot: true
+  }
+};