Adding created and completed timestamps

ashleydb · Dec 20, 2016 · b833541 · b833541
1 parent 1f34c9a
commit b833541
Show file tree

Hide file tree

Showing 5 changed files with 702 additions and 14 deletions.
diff --git a/app/components/Todo.jsx b/app/components/Todo.jsx
@@ -1,13 +1,26 @@
 var React = require('react');
+var moment = require('moment');
 
 var Todo = React.createClass({
   render: function() {
-    var {id, text, time, complete} = this.props;
+    var {id, text, createdAt, completedAt, complete} = this.props;
+
+      var renderDate = () => {
+          var message = 'Created: ';
+          var timestamp = createdAt;
+          if (complete) {
+              message = 'Completed: '
+              timestamp = completedAt;
+          }
+          return message + moment.unix(timestamp).format('d-MMM-YYYY @ HH:mm');
+      }
+
     return (
       <div onClick={() => {this.props.onToggle(this.props.id);}}>
         <label>
-          <input type="checkbox" ref="markCompleted" checked={complete}/> {text}
-          <p><small>Created {time}</small></p>
+          <input type="checkbox" ref="markCompleted" checked={complete}/>
+            <p>{text}</p>
+          <p><small>{renderDate()}</small></p>
         </label>
       </div>
     );

diff --git a/app/components/TodoApp.jsx b/app/components/TodoApp.jsx
@@ -1,5 +1,6 @@
 var React = require('react');
 var UUID = require('node-uuid');
+var moment = require('moment');
 
 var TodoList = require('TodoList');
 var AddTodo = require('AddTodo');
@@ -23,14 +24,15 @@ var TodoApp = React.createClass({
     this.setState({
       todos: [
         ...this.state.todos,
-        {id: UUID(), text: text, time: 'Thursday 3pm', complete: false}
+        {id: UUID(), text: text, createdAt: moment().unix(), completedAt: undefined, complete: false}
       ]
     });
   },
     handleToggle: function(id) {
         var updated = this.state.todos.map((todo) => {
             if (id === todo.id) {
                 todo.complete = !todo.complete;
+                todo.completedAt = todo.complete ? moment().unix() : undefined;
             }
             return todo;
         });

diff --git a/app/tests/components/TodoApp.test.jsx b/app/tests/components/TodoApp.test.jsx
@@ -22,22 +22,28 @@ describe('TodoApp', () => {
     todoApp.handleAddTodo(todoText);
 
     expect(todoApp.state.todos[0].text).toBe(todoText);
+    expect(todoApp.state.todos[0].createdAt).toBeA('number');
   });
 
     it('should toggle completed value when handleToggle called', () => {
-        var todo = {id: 13, text: 'learn react', time: 'Monday 8am', complete: false};
+        var todo = {id: 13, text: 'learn react', createdAt: 0, completedAt: undefined, complete: false};
         var todoApp = TestUtils.renderIntoDocument(<TodoApp/>);
         todoApp.setState({todos: [todo]});
 
         expect(todoApp.state.todos[0].complete).toBe(false);
         todoApp.handleToggle(13);
         expect(todoApp.state.todos[0].complete).toBe(true);
+        expect(todoApp.state.todos[0].completedAt).toBeA('number');
+    });
+
+    it('should toggle completed value when handleToggle called on a completed todo', () => {
+        var todo = {id: 13, text: 'learn react', createdAt: 0, completedAt: 60, complete: true};
+        var todoApp = TestUtils.renderIntoDocument(<TodoApp/>);
+        todoApp.setState({todos: [todo]});
+
+        expect(todoApp.state.todos[0].complete).toBe(true);
+        todoApp.handleToggle(13);
+        expect(todoApp.state.todos[0].complete).toBe(false);
+        expect(todoApp.state.todos[0].completedAt).toNotExist();
     });
-
-  // describe('render', () => {
-  //   it('should render TodoApp to output', () => {
-  //     var todoApp = TestUtils.renderIntoDocument(<TodoApp/>);
-  //     expect(todoApp).toBe(1);
-  //   });
-  // });
 });
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.0",
     "mocha": "^3.2.0",
+    "moment": "^2.17.1",
     "node-sass": "^3.13.0",
     "node-uuid": "^1.4.7",
     "react-addons-test-utils": "^15.4.1",