Test

.gitignore

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

backend/todo/admin 2.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

backend/todo/apps 2.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class TodoConfig(AppConfig):
+    name = 'todo'

backend/todo/migrations/0003_auto_20191009_1311 2.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/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 2.py

@@ -0,0 +1,9 @@
+from django.db import models
+
+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/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/tests 2.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

backend/todo/urls 2.py

@@ -0,0 +1,8 @@
+from django.urls import path
+
+from . import views
+
+urlpatterns = [
+    path('', views.index),
+    path('<int:id>', views.index),
+]

backend/todo/views 2.py

@@ -0,0 +1,73 @@
+from django.shortcuts import render
+from django.http import HttpResponse, HttpResponseNotAllowed, HttpResponseBadRequest, JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+
+import json
+
+from .models import Todo
+
+@csrf_exempt
+def index(request, id=None):
+    if request.method == 'GET':
+        if id is None:
+            # get all
+            todo_all_list = list(Todo.objects.all().values())
+            return JsonResponse(todo_all_list, safe=False)
+        else:
+            try:
+                todo = Todo.objects.get(id=id)
+                response_dict = {
+                        '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)
+            except KeyError as e:
+                return HttpResponseBadRequest('TodoID does not exist: {}'.format(id))
+    if request.method == 'POST':
+        try:
+            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,
+                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)
+    elif request.method == 'DELETE':
+        if id is None:
+            return HttpResponseBadRequest('TodoID is not specified.')
+        try:
+            todo = Todo.objects.get(id=id)
+            todo.delete()
+        except KeyError as e:
+            return HttpResponseBadRequest('TodoID does not exist: {}'.format(id))
+        return HttpResponse(status=204)
+    elif request.method == 'PUT':
+        if id is None:
+            return HttpResponseBadRequest('TodoID is not specified.')
+        try:
+            todo = Todo.objects.get(id=id)
+            todo.done = not todo.done
+            todo.save()
+            return HttpResponse(status=204)
+        except KeyError as e:
+            return HttpResponseBadRequest('TodoID does not exist: {}'.format(id))
+    else:
+        return HttpResponseNotAllowed(['GET', 'POST', 'DELETE', 'PUT'])

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