Set Deadline for todos, update README

Author: Codeep

README.md

@@ -1,13 +1,25 @@
 # REACT EXPRESS Boilerplate
-A React Express Mongo Boilerplate to get started to development.
+
+This is a sophisticated boilerplate that uses React on front-end and Node.js (Express) on back-end.
+
+It implements useful tools, such as redux, sagas, mongoose, material-ui, to make the project as professional as possible.
+
+It's already a usable CRUD app, using todos to illustrate that.
+
+Follow the steps below to get started using this boilerplate for your project!
+
 ### Prerequisites
- node version >= 7 and an npm version >= 4.
+• Node - version >= 7  
+• npm version >= 4
+• Mongo DB
+
 ## Install
-First, clone the repo via git:
+
+First, clone the repository via git:
 ```bash
 git clone https://github.com/codeep/React-Express-Boilerplate.git
 ```
-And then install dependencies with npm.
+Then, install dependencies using npm.
 ```bash
 $ cd React-Express-Boilerplate
 $ npm install
@@ -17,4 +29,4 @@ $ npm install
 Start the app:
 ```bash
 $ npm start
-```
+```

app/actionTypes/todoActionTypes.js

@@ -7,4 +7,5 @@ export const EDIT_TODO = 'EDIT_TODO';
 export const DELETE_TODO = 'DELETE_TODO';
 export const CHANGE_TODO_NAME = 'CHANGE_TODO_NAME';
 export const CHANGE_TODO_DESCRIPTION =  "CHANGE_TODO_DESCRIPTION";
+export const CHANGE_TODO_DEADLINE =  "CHANGE_TODO_DEADLINE";
 export const CLEAR_TODO_DATA = "CLEAR_TODO_DATA";

app/actions/todoActions.js

@@ -1,10 +1,11 @@
 import * as actionTypes from '../actionTypes/todoActionTypes';
 
-export const create_todo = (name = '', description = '') => {
+export const create_todo = (name = '', description = '', deadline) => {
     return {
         type: actionTypes.CREATE_TODO,
-        name: name,
-        description: description
+        name,
+        description,
+        deadline
     }
 };
 
@@ -21,11 +22,12 @@ export const get_todo_by_id = (id) => {
     }
 };
 
-export const edit_todo = (name, description, id) => {
+export const edit_todo = (name, description, deadline, id) => {
     return {
         type: actionTypes.EDIT_TODO,
         name,
         description,
+        deadline,
         id
     }
 };
@@ -51,6 +53,13 @@ export const change_todo_description = (description) => {
     }
 };
 
+export const change_todo_deadline = (deadline) => {
+    return {
+        type: actionTypes.CHANGE_TODO_DEADLINE,
+        deadline
+    }
+};
+
 export const clear_todo_data = () => {
     return {
         type: actionTypes.CLEAR_TODO_DATA,

app/components/TodoForm/TodoForm.js

@@ -1,46 +1,56 @@
 import React, { PureComponent } from 'react';
 import RaisedButton from 'material-ui/RaisedButton';
 import TextField from 'material-ui/TextField';
+import TimePicker from 'material-ui/TimePicker';
 import style from './style.css';
 
 class TodoForm extends PureComponent {
-    constructor(props) {
-        super(props);
-    }
 
-    render() {
-        const { todo, onFormSubmit, onNameChange, onDescriptionChange } = this.props;
-        return (
-            <div className='create-todo-form'>
-                {!todo.id && <h3>Create todo</h3>}
-                {todo.id && <h3>Edit todo</h3>}
-                <form onSubmit={(event) => onFormSubmit(event)}>
-                    <label>
-                        Name: &nbsp;
-                        <TextField
-                            name="name"
-                            className="form-input"
-                            value={todo.name}
-                            onChange={(event) => onNameChange(event)}
-                            required/>
-                    </label>
-                    <label>
-                        Description: &nbsp;
-                        <TextField
-                            name="description"
-                            value={todo.description}
-                            onChange={(event) => onDescriptionChange(event)}
-                            required/>
-                    </label>
-                    &nbsp;
-                    <RaisedButton
-                        label={todo.id ? 'Save' : 'Add'}
-                        primary={true}
-                        type='submit'/>
-                </form>
-            </div>
-        )
-    }
+  render() {
+    const { todo, onFormSubmit, onNameChange, onDescriptionChange, onDeadlineChange } = this.props;
+
+    return (
+      <div className='create-todo-form'>
+          {!todo.id && <h3>Create todo</h3>}
+          {todo.id && <h3>Edit todo</h3>}
+          <form onSubmit={(event) => onFormSubmit(event)}>
+              <label>
+                  Name: &nbsp;
+                  <TextField
+                      name="name"
+                      className="form-input"
+                      value={todo.name}
+                      onChange={(event) => onNameChange(event)}
+                      required/>
+              </label>
+              <label>
+                  Description: &nbsp;
+                  <TextField
+                      name="description"
+                      value={todo.description}
+                      onChange={(event) => onDescriptionChange(event)}
+                      required/>
+              </label>
+              &nbsp;
+              <label>
+                  Deadline: &nbsp;
+                  <TimePicker
+                    format="ampm"
+                    value={new Date(todo.deadline)}
+                    onChange={(e, time) => onDeadlineChange(time)}
+                    hintText="Set the time"
+                    autoOk={true}
+                  />
+              </label>
+              &nbsp;
+              <RaisedButton
+                  label={todo.id ? 'Save' : 'Add'}
+                  primary={true}
+                  type='submit'/>
+          </form>
+      </div>
+    )
+  }
 }
 
 

app/containers/TodoList/TodoList.js

@@ -41,7 +41,6 @@ class TodoList extends Component {
       const { todoList } = this.props;
       const { header } = this.state;
 
-      console.log(this.props, "todo list")
       return (
         <Table selectable={false}>
           <TableHeader>

app/containers/TodoManage/TodoManage.js

@@ -11,6 +11,7 @@ class TodoManage extends Component {
         this.addTodo = this.addTodo.bind(this);
         this.changeName = this.changeName.bind(this);
         this.changeDescription = this.changeDescription.bind(this);
+        this.changeDeadline = this.changeDeadline.bind(this);
     }
 
     componentDidMount() {
@@ -33,25 +34,32 @@ class TodoManage extends Component {
         actions.change_todo_description(event.target.value);
     }
 
+    changeDeadline(time) {
+        const { actions } = this.props;
+        actions.change_todo_deadline(time);
+    }
+
     addTodo(event) {
         const {actions, history, todo} = this.props;
-        const {name, description, id} = todo;
+        const {name, description, deadline, id} = todo;
 
         event.preventDefault();
         todo.id
-        ? actions.edit_todo(name, description, id)
-        : actions.create_todo(name, description, id);
+        ? actions.edit_todo(name, description, deadline, id)
+        : actions.create_todo(name, description, deadline, id);
         history.push('/');
     }
 
     render() {
         const {todo} = this.props;
+
         return (
             <TodoForm
                 todo={todo}
                 onFormSubmit={this.addTodo}
                 onNameChange={this.changeName}
                 onDescriptionChange={this.changeDescription}
+                onDeadlineChange={this.changeDeadline}
             />
         )
     }

app/fetch.js

@@ -1,6 +1,6 @@
 import axios from 'axios'
 import appConfig from '../config';
-console.log(appConfig, 'appConfig')
+
 const requestUrl = `${appConfig.apiHost}`;
 const requestPort = `${appConfig.apiPort}`;
 
@@ -32,7 +32,6 @@ axios.interceptors.response.use((res) => {
 });
 
 export const get = (url) => {
-    console.log(url, 'url')
     return axios.get(url, config)
 };
 
@@ -41,9 +40,8 @@ export const post = (url, data) => {
 };
 
 export const update = (url, data) => {
-    console.log(requestUrl, 'requestUrl')
     return axios.put(url, data, config)
 };
 export const remove = (url, data) => {
     return axios.delete(url,  data, config)
-};
+};

app/reducers/todoReducer.js

@@ -3,6 +3,7 @@ import { TodoActionTypes } from '../actionTypes';
 const initialState = {
     name: '',
     description: '',
+    deadline: 'Wed Mar 25 2015 04:00:00 GMT+0400 (+04)',
     id: null,
     todos: []
 }
@@ -22,18 +23,25 @@ export const todoReducer = (state = initialState, action) => {
             return {
                 ...state, description: action.description
             };
+        case TodoActionTypes.CHANGE_TODO_DEADLINE:
+
+            return {
+                ...state, deadline: action.deadline
+            };
         case TodoActionTypes.GET_TODO_BY_ID_RESPONSE:
             return {
                 ...state,
                 name: action.data.name,
                 description: action.data.description,
+                deadline: action.data.deadline,
                 id: action.data._id
             };
         case TodoActionTypes.CLEAR_TODO_DATA:
             return {
                 ...state,
                 name: initialState.name,
                 description: initialState.description,
+                deadline: initialState.deadline,
                 id: initialState.id
             };
         default:

app/sagas/newTodoSaga.js

@@ -46,10 +46,10 @@ export function* getTodoFlow () {
     }
 }
 
-export function* editTodo (id, name, description) {
+export function* editTodo (id, name, description, deadline) {
     yield put({type: IndexActionTypes.FETCH_START});
     try {
-        return yield call(update, `/todo`, {id, name, description});
+        return yield call(update, `/todo`, {id, name, description, deadline});
     } catch (err) {
         yield put({type: IndexActionTypes.SET_MESSAGE, msgContent: "Can't Get Todo List", msgType: 0});
     } finally {
@@ -60,7 +60,7 @@ export function* editTodo (id, name, description) {
 export function* editTodoFlow () {
     while (true){
         let req = yield take(TodoActionTypes.EDIT_TODO);
-        let res = yield call(editTodo, req.id, req.name, req.description);
+        let res = yield call(editTodo, req.id, req.name, req.description, req.deadline);
         if(res){
             yield put({type:TodoActionTypes.GET_TODOS_RESPONSE,data:res})
         }

schemas/todo.js

@@ -2,6 +2,6 @@ import mongoose from 'mongoose';
 
 module.exports = new mongoose.Schema({
     name: String,
-    description: String
+    description: String,
+    deadline: Date
 });
-

server/api/handlers/todo.handler.js

@@ -15,13 +15,14 @@ export const getOne = (req, res) => {
 export const createTodo = (req, res) => {
     Todo.create({
         name: req.body.name,
-        description: req.body.description
+        description: req.body.description,
+        deadline: req.body.deadline
     }).then(todo => res.send(todo))
     .catch(err => res.end(err));
 };
 
 export const updateTodo = (req, res) => {
-    Todo.update({ _id: req.body.id }, { name: req.body.name, description: req.body.description })
+    Todo.update({ _id: req.body.id }, { name: req.body.name, description: req.body.description, deadline: req.body.deadline })
         .then(updated => res.end())
         .catch(err => res.end(err));
 };