add: show last updated date on detail top bar

Author: sota1235

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)

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

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)}
             >

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

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)}
             >