From b58df2f17285a71f9ea787f167defa34093e583e Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 6 May 2017 16:30:03 +0900
Subject: [PATCH 1/7] display percentage of achievement of todo in markdown

---
 browser/components/TodoListPercentage.styl | 13 ++++++++++
 browser/components/TodolistPercentage.js   | 29 ++++++++++++++++++++++
 browser/main/Detail/MarkdownNoteDetail.js  | 22 ++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 browser/components/TodoListPercentage.styl
 create mode 100644 browser/components/TodolistPercentage.js

diff --git a/browser/components/TodoListPercentage.styl b/browser/components/TodoListPercentage.styl
new file mode 100644
index 00000000..f33309c2
--- /dev/null
+++ b/browser/components/TodoListPercentage.styl
@@ -0,0 +1,13 @@
+.percentageBar
+  position absolute
+  background-color #bcbcbc
+  height 20px
+  width 100%
+
+.progressBar
+  background-color #52d8a5
+  height 20px
+  text-align center
+
+.progressBar p
+  color white
diff --git a/browser/components/TodolistPercentage.js b/browser/components/TodolistPercentage.js
new file mode 100644
index 00000000..05a1d9d3
--- /dev/null
+++ b/browser/components/TodolistPercentage.js
@@ -0,0 +1,29 @@
+/**
+ * @fileoverview Percentage of todo achievement.
+ */
+
+import React, { PropTypes } from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './TodoListPercentage.styl'
+
+/**
+ * @param {number} percentageOfTodo
+ */
+
+const TodoListPercentage = ({
+  percentageOfTodo
+}) => (
+    <div styleName='percentageBar'
+      style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
+    <div styleName='progressBar' style={{ width: percentageOfTodo + '%'}}>
+        <p styleName='percentageText'>{percentageOfTodo + '%'}</p>
+      </div>
+    </div>
+)
+
+
+TodoListPercentage.propTypes = {
+  percentageOfTodo: PropTypes.number.isRequired
+}
+
+export default CSSModules(TodoListPercentage, styles)
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 6cb0a473..59e7c559 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
+import TodoListPercentage from 'browser/components/TodoListPercentage'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
 import FolderSelect from './FolderSelect'
@@ -95,6 +96,24 @@ class MarkdownNoteDetail extends React.Component {
     return title
   }
 
+  getPercentageOfCompleteTodo (value) {
+    let splitted = value.split('\n')
+    let numberOfTodo = 0
+    let numberOfCompletedTodo = 0
+
+    for (let i = 0; i < splitted.length; i++) {
+      let trimmedLine = splitted[i].trim()
+      if (trimmedLine.match(/^- \[\s|x\] ./)) {
+        numberOfTodo++
+      }
+      if (trimmedLine.match(/^- \[x\] ./)) {
+        numberOfCompletedTodo++
+      }
+    }
+
+    return Math.floor(numberOfCompletedTodo / numberOfTodo * 100)
+  }
+
   handleChange (e) {
     let { note } = this.state
 
@@ -263,6 +282,9 @@ class MarkdownNoteDetail extends React.Component {
               value={this.state.note.tags}
               onChange={(e) => this.handleChange(e)}
             />
+            <TodoListPercentage
+              percentageOfTodo={this.getPercentageOfCompleteTodo(note.content)}
+            />
           </div>
           <div styleName='info-right'>
             {(() => {

From e0dc62c00bea7df412d70480c831fed5d4d73ff5 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 6 May 2017 16:40:42 +0900
Subject: [PATCH 2/7] fix indents

---
 browser/components/TodolistPercentage.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/browser/components/TodolistPercentage.js b/browser/components/TodolistPercentage.js
index 05a1d9d3..d3fbf377 100644
--- a/browser/components/TodolistPercentage.js
+++ b/browser/components/TodolistPercentage.js
@@ -13,12 +13,11 @@ import styles from './TodoListPercentage.styl'
 const TodoListPercentage = ({
   percentageOfTodo
 }) => (
-    <div styleName='percentageBar'
-      style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
+  <div  styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
     <div styleName='progressBar' style={{ width: percentageOfTodo + '%'}}>
-        <p styleName='percentageText'>{percentageOfTodo + '%'}</p>
-      </div>
+      <p styleName='percentageText'>{percentageOfTodo + '%'}</p>
     </div>
+  </div>
 )
 
 

From 34da15208bd242f356b58f59438bf25f81e8317c Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Sat, 6 May 2017 16:57:15 +0900
Subject: [PATCH 3/7] fix spacing

---
 browser/components/TodolistPercentage.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/browser/components/TodolistPercentage.js b/browser/components/TodolistPercentage.js
index d3fbf377..fbd7efa3 100644
--- a/browser/components/TodolistPercentage.js
+++ b/browser/components/TodolistPercentage.js
@@ -13,14 +13,13 @@ import styles from './TodoListPercentage.styl'
 const TodoListPercentage = ({
   percentageOfTodo
 }) => (
-  <div  styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
-    <div styleName='progressBar' style={{ width: percentageOfTodo + '%'}}>
+  <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
+    <div styleName='progressBar' style={{width: percentageOfTodo + '%'}}>
       <p styleName='percentageText'>{percentageOfTodo + '%'}</p>
     </div>
   </div>
 )
 
-
 TodoListPercentage.propTypes = {
   percentageOfTodo: PropTypes.number.isRequired
 }

From e23707f0a0dc0ab63813a0b97aaab1e177cdfb7b Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Wed, 10 May 2017 22:49:15 +0900
Subject: [PATCH 4/7] add + and * to matching pattern

---
 browser/main/Detail/MarkdownNoteDetail.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 59e7c559..bec7a918 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -103,10 +103,10 @@ class MarkdownNoteDetail extends React.Component {
 
     for (let i = 0; i < splitted.length; i++) {
       let trimmedLine = splitted[i].trim()
-      if (trimmedLine.match(/^- \[\s|x\] ./)) {
+      if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
         numberOfTodo++
       }
-      if (trimmedLine.match(/^- \[x\] ./)) {
+      if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
         numberOfCompletedTodo++
       }
     }

From 7c9d3904b31e841e8ff4bc5e9b932fff33ed7286 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Wed, 10 May 2017 23:10:25 +0900
Subject: [PATCH 5/7] change to forEach from for

---
 browser/main/Detail/MarkdownNoteDetail.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index bec7a918..1ccbd117 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -96,20 +96,20 @@ class MarkdownNoteDetail extends React.Component {
     return title
   }
 
-  getPercentageOfCompleteTodo (value) {
-    let splitted = value.split('\n')
+  getPercentageOfCompleteTodo (noteContent) {
+    let splitted = noteContent.split('\n')
     let numberOfTodo = 0
     let numberOfCompletedTodo = 0
 
-    for (let i = 0; i < splitted.length; i++) {
-      let trimmedLine = splitted[i].trim()
+    splitted.forEach((line) => {
+      let trimmedLine = line.trim()
       if (trimmedLine.match(/^[\+\-\*] \[\s|x\] ./)) {
         numberOfTodo++
       }
       if (trimmedLine.match(/^[\+\-\*] \[x\] ./)) {
         numberOfCompletedTodo++
       }
-    }
+    })
 
     return Math.floor(numberOfCompletedTodo / numberOfTodo * 100)
   }

From 1c31ff4e98832d78492027d1a51c36bda84ff664 Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Wed, 10 May 2017 23:47:09 +0900
Subject: [PATCH 6/7] use string template literal

---
 browser/components/TodolistPercentage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/components/TodolistPercentage.js b/browser/components/TodolistPercentage.js
index fbd7efa3..1a7c5363 100644
--- a/browser/components/TodolistPercentage.js
+++ b/browser/components/TodolistPercentage.js
@@ -14,8 +14,8 @@ const TodoListPercentage = ({
   percentageOfTodo
 }) => (
   <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
-    <div styleName='progressBar' style={{width: percentageOfTodo + '%'}}>
-      <p styleName='percentageText'>{percentageOfTodo + '%'}</p>
+    <div styleName='progressBar' style={{width:`${percentageOfTodo}%`}}>
+      <p styleName='percentageText'>{percentageOfTodo}%</p>
     </div>
   </div>
 )

From c28980c2a9cc4792c6ad126a61e07b32b0deacae Mon Sep 17 00:00:00 2001
From: Sosuke Suzuki <aosukeke@gmail.com>
Date: Fri, 12 May 2017 19:54:52 +0900
Subject: [PATCH 7/7] fix the spacing

---
 browser/components/TodolistPercentage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/components/TodolistPercentage.js b/browser/components/TodolistPercentage.js
index 1a7c5363..16de7277 100644
--- a/browser/components/TodolistPercentage.js
+++ b/browser/components/TodolistPercentage.js
@@ -14,7 +14,7 @@ const TodoListPercentage = ({
   percentageOfTodo
 }) => (
   <div styleName='percentageBar' style={{display: isNaN(percentageOfTodo) ? 'none' : ''}}>
-    <div styleName='progressBar' style={{width:`${percentageOfTodo}%`}}>
+    <div styleName='progressBar' style={{width: `${percentageOfTodo}%`}}>
       <p styleName='percentageText'>{percentageOfTodo}%</p>
     </div>
   </div>