From 441edf4667b9c1324910b92c438e523b4b2898dd Mon Sep 17 00:00:00 2001
From: sota1235 <sota1235@gmail.com>
Date: Thu, 22 Dec 2016 12:46:39 +0900
Subject: [PATCH] add: show last updated date on detail top bar

---
 browser/main/Detail/LastUpdatedString.js   | 27 ++++++++++++++++++++++
 browser/main/Detail/LastUpdatedString.styl |  8 +++++++
 browser/main/Detail/MarkdownNoteDetail.js  |  2 ++
 browser/main/Detail/NoteDetailInfo.styl    |  9 --------
 browser/main/Detail/SnippetNoteDetail.js   |  3 ++-
 5 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 browser/main/Detail/LastUpdatedString.js
 create mode 100644 browser/main/Detail/LastUpdatedString.styl

diff --git a/browser/main/Detail/LastUpdatedString.js b/browser/main/Detail/LastUpdatedString.js
new file mode 100644
index 00000000..764709ef
--- /dev/null
+++ b/browser/main/Detail/LastUpdatedString.js
@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Component for show updated date of the detail.
+ */
+import React, { PropTypes } from 'react'
+import { getLastUpdated } from 'browser/lib/date-formatter'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './LastUpdatedString.styl'
+
+const LastUpdatedString = ({ date }) => {
+  let text = ''
+
+  try {
+    text = `Last updated at ${getLastUpdated(date)}`
+  } catch (e) {
+    text = ''
+  }
+
+  return (
+    <p styleName='info-right-date'>{text}</p>
+  )
+}
+
+LastUpdatedString.propTypes = {
+  date: PropTypes.string,
+}
+
+export default CSSModules(LastUpdatedString, styles)
diff --git a/browser/main/Detail/LastUpdatedString.styl b/browser/main/Detail/LastUpdatedString.styl
new file mode 100644
index 00000000..a6c94c62
--- /dev/null
+++ b/browser/main/Detail/LastUpdatedString.styl
@@ -0,0 +1,8 @@
+.info-right-date
+  display inline
+  font-size 11px
+  color $ui-button-color
+
+body[data-theme="dark"]
+  .info-right-date
+    color $ui-dark-button-color
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index b4c246b8..7b0a2411 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -4,6 +4,7 @@ import styles from './MarkdownNoteDetail.styl'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
+import LastUpdatedString from './LastUpdatedString'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
@@ -225,6 +226,7 @@ class MarkdownNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
+            <LastUpdatedString date={note.updatedAt} />
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index 55839515..fccc1cad 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -45,12 +45,3 @@ $info-height = 60px
     opacity 1
   &:focus
     border-color $ui-button--focus-borderColor
-
-.info-right-date
-  display inline
-  font-size 11px
-  color $ui-button-color
-
-body[data-theme="dark"]
-  .info-right-date
-    color $ui-dark-button-color
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index d148169c..8d27b0c9 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -5,6 +5,7 @@ import CodeEditor from 'browser/components/CodeEditor'
 import MarkdownEditor from 'browser/components/MarkdownEditor'
 import StarButton from './StarButton'
 import TagSelect from './TagSelect'
+import LastUpdatedString from './LastUpdatedString'
 import dataApi from 'browser/main/lib/dataApi'
 import { hashHistory } from 'react-router'
 import ee from 'browser/main/lib/eventEmitter'
@@ -533,7 +534,7 @@ class SnippetNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <p styleName='info-right-date'>Last updated at {'dummy'}</p>
+            <LastUpdatedString date={note.updatedAt} />
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >