Task

.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,92 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import { connectRouter, ConnectedRouter } from 'connected-react-router';
+import { Route, Redirect, Switch } from 'react-router-dom';
+
+import Calendar from './Calendar'
+import { getMockStore } from '../../test-utils/mocks';
+import { history } from '../../store/store';
+import * as actionCreators from '../../store/actions/todo';
+import { Item } from 'semantic-ui-react';
+
+const stubInitialState = {
+    todos: [
+        {
+            id: 1,
+            title: 'TODO_TEST_TITLE_1',
+            content: 'TODO_TEST_CONTENT_1',
+            year: 2020,
+            month: 10,
+            date: 2,
+            done: false,
+        },
+        {
+            id: 2,
+            title: 'TODO_TEST_TITLE_2',
+            content: 'TODO_TEST_CONTENT_2',
+            year: 2020,
+            month: 9,
+            date: 2,
+            done: false,
+        },
+        {
+            id: 3,
+            title: 'TODO_TEST_TITLE_3',
+            content: 'TODO_TEST_CONTENT_3',
+            year: 2020,
+            month: 9,
+            date: 3,
+            done: true,
+        },
+    ],
+    selectedTodo: null,
+};
+
+describe('<Calendar />', () => {
+    let mockClickDone;
+    let component;
+
+    // afterEach(() => { jest.clearAllMocks() });
+
+    beforeEach(() => {
+        mockClickDone = jest.fn(id => { return null });
+        component = shallow(
+                <Calendar 
+                    year={2020}
+                    month={10}
+                    todos={stubInitialState.todos}
+                    clickDone={mockClickDone}
+                />
+        );
+    })
+
+    it('should render Calendar', () => {
+        const wrapper = component.find('Table');
+        expect(wrapper.length).toBe(1);
+    });
+
+    it('should call clickDone', () => {
+        const wrapper = component.find('.todoTitle');
+        expect(wrapper.length).toBe(2);
+        wrapper.at(0).simulate('click');
+        expect(mockClickDone).toHaveBeenCalledTimes(1);
+        expect(mockClickDone).toHaveBeenCalledWith(2);
+        wrapper.at(1).simulate('click');
+        expect(mockClickDone).toHaveBeenCalledWith(3);
+    });
+
+    it('should toggle done', () => {
+        expect(mockClickDone).toHaveBeenCalledTimes(0);
+        const wrapper = component.find('.todoTitle');
+        const wrapper2 = component.find('.notdone');
+        const wrapper3 = component.find('.done');
+        expect(wrapper.length).toBe(2);
+        expect(wrapper2.length).toBe(1);
+        expect(wrapper3.length).toBe(1);
+        wrapper.at(0).simulate('click');
+        expect(wrapper.length).toBe(2);
+        expect(wrapper2.length).toBe(1);
+        expect(wrapper3.length).toBe(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/components/Todo/Todo.test.js

@@ -25,9 +25,17 @@ describe('<Todo />', () => {
 
   it('should handle clicks', () => {
     const mockClickDone = jest.fn();
-    const component = shallow(<Todo clickDone={mockClickDone} />);
+    const component = shallow(<Todo done={false} clickDone={mockClickDone} />);
     const wrapper = component.find('.doneButton');
     wrapper.simulate('click');
     expect(mockClickDone).toHaveBeenCalledTimes(1);
   });
+
+  it('should handle clickDetail', () => {
+    const mockClickDetail = jest.fn();
+    const component = shallow(<Todo clickDetail={mockClickDetail} />);
+    const wrapper = component.find('.text');
+    wrapper.simulate('click');
+    expect(mockClickDetail).toHaveBeenCalledTimes(1);
+  });
 });

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;
+}