Testing done

.gitignore

@@ -11,6 +11,9 @@
 # production
 /build
 
+#
+*.swp
+
 # misc
 .DS_Store
 .env.local

backend/todo/migrations/0003_auto_20191009_1311.py

@@ -0,0 +1,28 @@
+# Generated by Django 2.2.5 on 2019-10-09 13:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('todo', '0002_todo_done'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='todo',
+            name='date',
+            field=models.IntegerField(default=1),
+        ),
+        migrations.AddField(
+            model_name='todo',
+            name='month',
+            field=models.IntegerField(default=1),
+        ),
+        migrations.AddField(
+            model_name='todo',
+            name='year',
+            field=models.IntegerField(default=2019),
+        ),
+    ]

backend/todo/models.py

@@ -4,3 +4,6 @@ class Todo(models.Model):
     title = models.CharField(max_length=120)
     content = models.TextField()
     done = models.BooleanField(default=False)
+    year = models.IntegerField(default=2019)
+    month = models.IntegerField(default=1)
+    date = models.IntegerField(default=1)

backend/todo/views.py

@@ -20,6 +20,9 @@ def index(request, id=None):
                         'id': todo.id,
                         'title': todo.title,
                         'content': todo.content,
+                        'year': todo.year,
+                        'month': todo.month,
+                        'date': todo.date,
                         'done': todo.done,
                         }
                 return JsonResponse(response_dict, safe=False)
@@ -30,14 +33,20 @@ def index(request, id=None):
             body = request.body.decode()
             title = json.loads(body)['title']
             content = json.loads(body)['content']
+            dueDate = json.loads(body)['dueDate']
         except (KeyError, JSONDecodeError) as e:
             return HttpResponseBadRequest()
-        todo = Todo(title=title, content=content, done=False)
+        todo = Todo(title=title, content=content,
+                year=dueDate['year'], month=dueDate['month'],
+                date=dueDate['date'], done=False)
         todo.save()
         response_dict = {
             'id': todo.id,
             'title': todo.title,
             'content': todo.content,
+            'year': todo.year,
+            'month': todo.month,
+            'date': todo.date,
             'done': todo.done,
         }
         return HttpResponse(json.dumps(response_dict), status=201)

package.json

@@ -13,7 +13,8 @@
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.1.1",
     "redux": "^4.0.4",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "semantic-ui-react": "^0.88.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -2,6 +2,7 @@ import React from 'react';
 import './App.css';
 
 import TodoList from './containers/TodoList/TodoList';
+import TodoCalendar from './containers/TodoCalendar/TodoCalendar';
 import RealDetail from './containers/TodoList/RealDetail/RealDetail';
 import NewTodo from './containers/TodoList/NewTodo/NewTodo';
 
@@ -14,12 +15,13 @@ function App(props) {
       <div className="App" >
         <Switch>
           <Route path='/todos' exact render={() => <TodoList title="My TODOs!" />} />
+          <Route path='/calendar' exact component={TodoCalendar} />
           <Route path='/todos/:id' exact component={RealDetail} />
           <Route path='/new-todo' exact component={NewTodo} />
           <Redirect exact from='/' to='todos' />
           <Route render={() => <h1>Not Found</h1>} />
         </Switch>
-      </div >
+      </div>
     </ConnectedRouter>
   );
 }

src/components/Calendar/Calendar.css

@@ -0,0 +1,20 @@
+.cell .date {
+  font-size: 20px;
+}
+
+.todoTitle {
+  cursor: pointer;
+}
+
+.notdone {
+  color: blue;
+}
+
+.done {
+  text-decoration: line-through;
+  color: #adb5bd;
+}
+
+.sunday {
+  color: red;
+}

src/components/Calendar/Calendar.js

@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import { Table } from 'semantic-ui-react'
+
+import './Calendar.css';
+
+const CALENDAR_HEADER = (
+  <Table.Header>
+    <Table.Row>
+      <Table.HeaderCell className="sunday">Sun</Table.HeaderCell>
+      <Table.HeaderCell>Mon</Table.HeaderCell>
+      <Table.HeaderCell>Tue</Table.HeaderCell>
+      <Table.HeaderCell>Wed</Table.HeaderCell>
+      <Table.HeaderCell>Thu</Table.HeaderCell>
+      <Table.HeaderCell>Fri</Table.HeaderCell>
+      <Table.HeaderCell>Sat</Table.HeaderCell>
+    </Table.Row>
+  </Table.Header>
+);
+
+const renderCalenderBody = (dates, todos, clickDone) => {
+  let i = 0;
+  const rows = [];
+  for (let week=0; week<5; week++){
+    let day = 0; // Sunday
+
+    let row = [];
+    for (let day=0; day<7; day++) {
+      const date = dates[i];
+      if (date !== undefined && day === date.getDay()) {
+        row.push(
+          <Table.Cell className={`cell ${day === 0 && 'sunday'}`} key={7*week+day}>
+            <div className="date">{date.getDate()}</div>
+            {
+              todos.filter(todo => {
+                return todo.year === date.getFullYear() &&
+                  todo.month === date.getMonth() &&
+                  todo.date === date.getDate();
+              }).map(todo => {
+                return (
+                  <div
+                    key={todo.id}
+                    className={`todoTitle ${todo.done ? 'done':'notdone'}`}
+                    onClick={() => clickDone(todo.id)}>
+                    {todo.title}
+                  </div>
+                )
+              })
+            }
+          </Table.Cell>
+        )
+        i++;
+      } else {
+        row.push(<Table.Cell key={7*week+day}> </Table.Cell>)
+      }
+    }
+    rows.push(row);
+  }
+
+  return (
+    <Table.Body>
+      {rows.map((row, i) => (<Table.Row key={i}>{row}</Table.Row>))}
+    </Table.Body>
+  );
+}
+
+const renderCalendar = (dates, todos, clickDone) => (
+  <Table striped style={{"height": "600px", "width": "600px"}}>
+    {CALENDAR_HEADER}
+    {renderCalenderBody(dates, todos, clickDone)}
+  </Table>
+)
+
+const Calendar = (props) => {
+  const dates = [];
+  const year = props.year;
+  const month = props.month - 1;
+  let date = 1;
+  let maxDate = (new Date(year, month + 1, 0)).getDate();
+
+  for (let date=1; date<=maxDate; date++) {
+    dates.push(new Date(year, month, date));
+  }
+
+  return renderCalendar(dates, props.todos, props.clickDone);
+}
+
+export default Calendar

src/components/Calendar/Calendar.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import Calendar from './Calendar';
+
+
+describe('<Calendar />', () => {
+    const stubTodos=[
+      {id:1, title:"Go Home", year:2020, month:9, date:8, done:true},
+      {id:2, title:"SWPP Team Meeting", year:2020, month:9, date:9, done:true},
+      {id:3, title:"Take a nap", year:2020, month:9, date:9, done:false},
+    ];
+    //since here, month 9 is same as October in Date.getMonth function
+
+    it('should render without errors', () => {
+      const component = shallow(<Calendar />);
+      const wrapper = component.find('Table');
+      expect(wrapper.length).toBe(1);
+    });
+
+    it('should render dates properly',()=>{
+      const component= mount(<Calendar year={2020} month={10} todos={stubTodos}/>);
+      const wrapper=component.find('.date');
+      expect(wrapper.length).toBe(31);
+    });
+
+    it('should handle clicks', () => {
+      const mockClickDone = jest.fn();
+      const component= mount(<Calendar year={2020} month={10} todos={stubTodos} clickDone={mockClickDone}/>);
+      const wrapper = component.find('.todoTitle.notdone');
+      expect(wrapper.length).toBe(1);
+      wrapper.simulate('click');
+      expect(mockClickDone).toHaveBeenCalledTimes(1);
+    });
+});

src/components/Todo/Todo.css

@@ -28,4 +28,10 @@
   margin-left: 1rem;
   color: orange;
   font-weight: 800;
-}
+}
+
+.Todo .due {
+  flex: 1;
+  text-align: left;
+  word-break: break-all;
+}

src/components/Todo/Todo.js

@@ -12,6 +12,7 @@ const Todo = (props) => {
         {props.title}
       </div>
       {props.done && <div className="done-mark">&#x2713;</div>}
+      <div className="due"> due: {props.year}.{props.month+1}.{props.date} </div>
       <button onClick={props.clickDone}
         className={(props.done) ? "undoneButton" : "doneButton"}>
         {(props.done) ? 'Undone' : 'Done'}</button>

src/containers/TodoCalendar/TodoCalendar.css

@@ -0,0 +1,10 @@
+.link{
+  text-align: left;
+}
+
+.header {
+  text-align: left;
+  font-size: 40px;
+  margin-left: 10rem;
+  font-weight: bold;
+}

src/containers/TodoCalendar/TodoCalendar.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+
+import { NavLink } from 'react-router-dom';
+
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import Calendar from '../../components/Calendar/Calendar';
+
+import * as actionCreators from '../../store/actions/index';
+
+import './TodoCalendar.css';
+
+class TodoCalendar extends Component {
+  state = {
+    year: 2019,
+    month: 10,
+  }
+  componentDidMount() {
+    this.props.onGetAll();
+  }
+
+  handleClickPrev = () => {
+    this.setState({
+      year: this.state.month === 1 ? this.state.year - 1 : this.state.year,
+      month: this.state.month === 1 ? 12 : this.state.month - 1
+    })
+  }
+
+  handleClickNext = () => {
+    this.setState({
+      year: this.state.month === 12 ? this.state.year + 1 : this.state.year,
+      month: this.state.month === 12 ? 1 : this.state.month + 1
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="link"><NavLink to='/todos' exact>See TodoList</NavLink></div>
+        <div className="header">
+          <button onClick={this.handleClickPrev}> prev month </button>
+          {this.state.year}.{this.state.month}
+          <button onClick={this.handleClickNext}> next month </button>
+        </div>
+        <Calendar
+          year={this.state.year}
+          month={this.state.month}
+          todos={this.props.storedTodos}
+          clickDone={this.props.onToggleTodo}/>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = state => {
+  return {
+    storedTodos: state.td.todos,
+  };
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onToggleTodo: (id) =>
+      dispatch(actionCreators.toggleTodo(id)),
+    onGetAll: () =>
+      dispatch(actionCreators.getTodos())
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TodoCalendar));