redpelicans · rle-mino · Jan 6, 2017 · Jan 2, 2017 · Jan 3, 2017 · Jan 4, 2017
diff --git a/package.json b/package.json
@@ -13,29 +13,33 @@
     "coverage": "NODE_ENV=testing nyc yarn test"
   },
   "dependencies": {
+    "antd": "^2.6.0",
+    "chai": "^3.5.0",
+    "enzyme": "^2.6.0",
     "ramda": "^0.22.1",
     "react": "^15.0.2",
     "react-addons-test-utils": "^15.4.1",
     "react-dom": "^15.0.2",
-    "react-redux": "^4.4.5",
+    "react-redux": "^5.0.2",
     "react-router": "^3.0.0",
-    "redux": "^3.5.2",
-    "redux-logger": "^2.6.1",
+    "redux": "^3.6.0",
+    "redux-logger": "^2.7.4",
     "redux-thunk": "^2.0.1",
-    "styled-components": "^1.2.1"
+    "styled-components": "^1.2.1",
+    "whatwg-fetch": "^2.0.1"
   },
   "devDependencies": {
-    "sinon": "^1.17.7",
-    "chai": "^3.5.0",
-    "enzyme": "^2.6.0",
     "babel-cli": "^6.18.0",
     "babel-core": "^6.18.2",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.8",
+    "babel-plugin-import": "^1.1.0",
     "babel-preset-latest": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
+    "chai": "^3.5.0",
     "css-loader": "^0.26.1",
+    "enzyme": "^2.6.0",
     "eslint": "^3.11.1",
     "eslint-config-airbnb": "^12.0.0",
     "eslint-plugin-import": "^2.2.0",
@@ -44,6 +48,7 @@
     "extract-text-webpack-plugin": "^2.0.0-beta",
     "mocha": "^3.2.0",
     "nyc": "^10.0.0",
+    "sinon": "^1.17.7",
     "style-loader": "^0.13.1",
     "webpack": "^2.1.0-beta.26",
     "webpack-bundle-analyzer": "^1.5.0",
@@ -55,6 +60,15 @@
     ]
   },
   "babel": {
+    "plugins": [
+      [
+        "import",
+        {
+          "libraryName": "antd",
+          "style": "css"
+        }
+      ]
+    ],
     "presets": [
       [
         "latest",

diff --git a/public/index.html b/public/index.html
@@ -2,10 +2,18 @@
 <html>
   <head>
     <title>RedTodo</title>
-    <link rel="icon" href="http://redpelicans.com/favicon.ico">                                                                                                                                          
+    <link rel="icon" href="http://redpelicans.com/favicon.ico">
+    <style>
+      * {
+        outline: none;
+      }
+      body {
+        background-color: #C0C0C0;
+      }
+    </style>
   </head>
   <body>
-    <div id="__TODO__">    
+    <div id="__TODO__">
       <span> Loading TODO app ... </span>
     </div>
     <script src="assets/bundle.js"></script>

diff --git a/src/client/actions/index.js b/src/client/actions/index.js
@@ -0,0 +1,7 @@
+import * as todo from './todos';
+import * as task from './tasks';
+
+module.exports = {
+  todo,
+  task,
+};
diff --git a/src/client/actions/tasks.js b/src/client/actions/tasks.js
@@ -0,0 +1,39 @@
+import requestJSON from '../requestJSON';
+import apiURI from '../apiURI';
+
+export const INITIAL_TASKS_LOADED = 'INITIAL_TASKS_LOADED';
+export const TASK_CREATED = 'TASK_CREATED';
+export const TASK_REMOVED = 'TASK_REMOVED';
+export const TASK_UPDATED = 'TASK_UPDATED';
+
+export const taskCreated = payload => ({
+  type: TASK_CREATED,
+  payload,
+});
+
+export const taskRemoved = payload => ({
+  type: TASK_REMOVED,
+  payload,
+});
+
+export const taskUpdated = payload => ({
+  type: TASK_UPDATED,
+  payload,
+});
+
+export const add = payload => (dispatch) => {
+  const body = { task: { ...payload } };
+  requestJSON(`${apiURI}/todo/tasks`, body, 'POST')
+    .then(task => dispatch(taskCreated(task)));
+};
+
+export const remove = payload => (dispatch) => {
+  requestJSON(`${apiURI}/todo/task/${payload}`, {}, 'DELETE')
+    .then(task => dispatch(taskRemoved(task)));
+};
+
+export const update = payload => (dispatch) => {
+  const body = { task: { ...payload } };
+  requestJSON(`${apiURI}/todo/tasks`, body, 'PUT')
+    .then(task => dispatch(taskUpdated(task)));
+};
diff --git a/src/client/actions/todos.js b/src/client/actions/todos.js
@@ -0,0 +1,39 @@
+import requestJSON from '../requestJSON';
+import apiURI from '../apiURI';
+
+export const INITIAL_TODOS_LOADED = 'INITIAL_TODOS_LOADED';
+export const TODO_CREATED = 'TODO_CREATED';
+export const TODO_REMOVED = 'TODO_REMOVED';
+export const TODO_UPDATED = 'TODO_UPDATED';
+
+export const todoCreated = payload => ({
+  type: TODO_CREATED,
+  payload,
+});
+
+export const todoUpdated = payload => ({
+  type: TODO_UPDATED,
+  payload,
+});
+
+export const todoRemoved = payload => ({
+  type: TODO_REMOVED,
+  payload,
+});
+
+export const create = payload => (dispatch) => {
+  const body = { todo: payload };
+  requestJSON(`${apiURI}/todo/lists`, body, 'POST')
+    .then(todo => dispatch(todoCreated(todo)));
+};
+
+export const update = payload => (dispatch) => {
+  const body = { todo: payload };
+  requestJSON(`${apiURI}/todo/lists`, body, 'PUT')
+    .then(todo => dispatch(todoUpdated(todo)));
+};
+
+export const remove = payload => (dispatch) => {
+  requestJSON(`${apiURI}/todo/list/${payload}`, {}, 'DELETE')
+    .then(todo => dispatch(todoRemoved(todo)));
+};
diff --git a/src/client/apiURI.js b/src/client/apiURI.js
@@ -0,0 +1 @@
+export default 'http://rp3.redpelicans.com:4007/api';
diff --git a/src/client/colors.json b/src/client/colors.json
@@ -0,0 +1,21 @@
+{
+	"red": "#f44336",
+	"pink": "#e91e63",
+	"purple": "#9c27b0",
+	"deepPurple": "#673ab7",
+	"indigo": "#3f51b5",
+	"blue": "#2196f3",
+	"lightBlue": "#03a9f4",
+	"cyan": "#00bcd4",
+	"teal": "#009688",
+	"green": "#4caf50",
+	"lightGreen": "#8bc34a",
+	"lime": "#cddc39",
+	"yellow": "#ffeb3b",
+	"amber": "#ffc107",
+	"orange": "#ff9800",
+	"deepOrange": "#ff5722",
+	"brown": "#795548",
+	"grey": "#9e9e9e",
+	"blueGrey": "#607d8b"
+}
diff --git a/src/client/components/AddTask/index.js b/src/client/components/AddTask/index.js
@@ -0,0 +1,67 @@
+import React, { PropTypes } from 'react';
+import Modal from 'antd/lib/modal';
+
+import Button from '../Button';
+import FullHeightContainer from '../FullHeightContainer';
+import ModalInput from '../ModalInput';
+
+export default class AddTask extends React.Component {
+  state = {
+    visible: false,
+    value: '',
+  }
+
+  handleKeyDown = (e) => {
+    if (e.keyCode === 13) {
+      e.preventDefault();
+      this.saveTask();
+    }
+  }
+
+  close = () => this.setState({ visible: false })
+
+  showModal = () => this.setState({ visible: true })
+
+  handleChange = e => this.setState({ value: e.target.value });
+
+  saveTask = () => {
+    const { value } = this.state;
+    const { actions, listId } = this.props;
+
+    actions.task.add({ description: value, isCompleted: false, listId });
+    this.setState({ value: '', visible: false });
+  }
+
+  render() {
+    const { visible, value } = this.state;
+    return (
+      <FullHeightContainer>
+        <Button onClick={this.showModal}>&#10010;</Button>
+        <Modal
+          title="Enter your task here"
+          visible={visible}
+          onOk={this.saveTask}
+          onCancel={this.close}
+          footer={[
+            <Button key={1} onClick={this.close}>Cancel</Button>,
+            <Button key={2} onClick={this.saveTask}>Save</Button>,
+          ]}
+        >
+          <ModalInput
+            type="text"
+            value={value}
+            autoFocus
+            onChange={this.handleChange}
+            onKeyDown={this.handleKeyDown}
+            placeholder="type here..."
+          />
+        </Modal>
+      </FullHeightContainer>
+    );
+  }
+}
+
+AddTask.propTypes = {
+  actions: PropTypes.object.isRequired,
+  listId: PropTypes.number.isRequired,
+};
diff --git a/src/client/components/AddTodo/index.js b/src/client/components/AddTodo/index.js
@@ -0,0 +1,72 @@
+import React, { PropTypes } from 'react';
+import styled from 'styled-components';
+import colors from '../../colors.json';
+
+import TodoInput from '../TodoInput';
+
+const FormContainer = styled.form`
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  display: flex;
+  margin-top: 2em;
+  width: 50vw;
+  height: 50px;
+`;
+
+const TodoSubmit = styled.input`
+  border: none;
+  background-color: ${colors.blueGrey};
+  width: 50%;
+  height: 100%;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all .2s;
+
+  &:hover {
+    background-color: white;
+    color: ${colors.blueGrey};
+  }
+`;
+
+export default class AddTodo extends React.Component {
+  state = {
+    value: '',
+  }
+
+  handleChange = e => this.setState({ value: e.target.value });
+
+  addTodo = (e) => {
+    e.preventDefault();
+
+    const { actions } = this.props;
+    const { value } = this.state;
+
+    if (!value) return false;
+
+    actions.todo.create({ label: value });
+    this.setState({ value: '' });
+    return true;
+  }
+
+  render() {
+    const { value } = this.state;
+    return (
+      <FormContainer onSubmit={this.addTodo}>
+        <TodoInput
+          placeholder="Enter your todo here"
+          type="text"
+          name="todo"
+          autoComplete="off"
+          value={value}
+          onChange={this.handleChange}
+        />
+        <TodoSubmit type="submit" value="Save your todo" />
+      </FormContainer>
+    );
+  }
+}
+
+AddTodo.propTypes = {
+  actions: PropTypes.object.isRequired,
+};
diff --git a/src/client/components/App/__test__/index.js b/src/client/components/App/__test__/index.js
diff --git a/src/client/components/App/index.js b/src/client/components/App/index.js
diff --git a/src/client/components/Button/index.js b/src/client/components/Button/index.js
@@ -1,9 +1,18 @@
-import React, { PropTypes } from 'react';
+import styled from 'styled-components';
+import colors from '../../colors.json';
 
-const Button = ({ onClick }) => <button onClick={onClick} />;
-
-Button.propTypes = {
-  onClick: PropTypes.func.isRequired,
-};
+const Button = styled.button`
+  border: none;
+  width: 4em;
+  height: 100%;
+  cursor: pointer;
+  transition: all .2s;
+  font-size: 20px;
+  background-color: white;
+  &:hover {
+    background-color: ${colors.blueGrey};
+    color: white;
+  }
+`;
 
 export default Button;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default 'http://rp3.redpelicans.com:4007/api';