From 9ea9d309479409b91fb0e9c88898b2685d923638 Mon Sep 17 00:00:00 2001
From: asmsuechan <suenagaryoutaabc@gmail.com>
Date: Sat, 19 Aug 2017 08:09:39 +0900
Subject: [PATCH] Add wordcount and lettercount to InfoPanel

---
 browser/main/Detail/InfoPanel.js          | 28 +++++++++++++++++++++--
 browser/main/Detail/MarkdownNoteDetail.js |  3 +++
 browser/main/Detail/SnippetNoteDetail.js  |  1 +
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/browser/main/Detail/InfoPanel.js b/browser/main/Detail/InfoPanel.js
index 0cf77994..f228fb01 100644
--- a/browser/main/Detail/InfoPanel.js
+++ b/browser/main/Detail/InfoPanel.js
@@ -3,7 +3,7 @@ import CSSModules from 'browser/lib/CSSModules'
 import styles from './InfoPanel.styl'
 
 const InfoPanel = ({
-  storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt
+  storageName, folderName, noteLink, updatedAt, createdAt, exportAsMd, exportAsTxt, wordCount, letterCount, type
 }) => (
   <div className='infoPanel' styleName='control-infoButton-panel' style={{display: 'none'}}>
     <div styleName='group-section'>
@@ -46,6 +46,27 @@ const InfoPanel = ({
         <input value={noteLink} onClick={(e) => { e.target.select() }} />
       </div>
     </div>
+    {type === 'SNIPPET_NOTE'
+      ? ''
+      : <div>
+        <div styleName='group-section'>
+          <div styleName='group-section-label'>
+            Words
+          </div>
+          <div styleName='group-section-control'>
+            {wordCount}
+          </div>
+        </div>
+        <div styleName='group-section'>
+          <div styleName='group-section-label'>
+            Letters
+          </div>
+          <div styleName='group-section-control'>
+            {letterCount}
+          </div>
+        </div>
+      </div>
+    }
 
     <div id='export-wrap'>
       <button styleName='export--enable' onClick={(e) => exportAsMd(e)}>
@@ -73,7 +94,10 @@ InfoPanel.propTypes = {
   updatedAt: PropTypes.string.isRequired,
   createdAt: PropTypes.string.isRequired,
   exportAsMd: PropTypes.func.isRequired,
-  exportAsTxt: PropTypes.func.isRequired
+  exportAsTxt: PropTypes.func.isRequired,
+  wordCount: PropTypes.number,
+  letterCount: PropTypes.number,
+  type: PropTypes.string.isRequired
 }
 
 export default CSSModules(InfoPanel, styles)
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 6d9827f7..242340da 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -353,6 +353,9 @@ class MarkdownNoteDetail extends React.Component {
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.exportAsMd}
           exportAsTxt={this.exportAsTxt}
+          wordCount={note.content.split(' ').length}
+          letterCount={note.content.length}
+          type={note.type}
         />
       </div>
     </div>
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 05efce45..5f767b70 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -611,6 +611,7 @@ class SnippetNoteDetail extends React.Component {
           createdAt={formatDate(note.createdAt)}
           exportAsMd={this.showWarning}
           exportAsTxt={this.showWarning}
+          type={note.type}
         />
       </div>
     </div>