display percentage of achievement of todo in markdown

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'>
             {(() => {