Merge pull request steemit#3358 from steemit/quochuy-show_content_edited

Community - Mark when a post/comment has been edited

src/app/components/cards/Comment.jsx

@@ -15,6 +15,7 @@ import tt from 'counterpart';
 import { parsePayoutAmount } from 'app/utils/ParsersAndFormatters';
 import { Long } from 'bytebuffer';
 import ImageUserBlockList from 'app/utils/ImageUserBlockList';
+import ContentEditedWrapper from '../elements/ContentEditedWrapper';
 
 // returns true if the comment has a 'hide' flag AND has no descendants w/ positive payout
 function hideSubtree(cont, c) {
@@ -449,11 +450,13 @@ class CommentImpl extends React.Component {
                         </span>
                         &nbsp; &middot; &nbsp;
                         <Link to={comment_link} className="PlainLink">
-                            <TimeAgoWrapper
-                                date={comment.created}
-                                className="updated"
-                            />
+                            <TimeAgoWrapper date={comment.created} />
                         </Link>
+                        &nbsp;
+                        <ContentEditedWrapper
+                            createDate={comment.created}
+                            updateDate={comment.last_update}
+                        />
                         {(this.state.collapsed || hide_body) && (
                             <Voting post={post} showList={false} />
                         )}

src/app/components/cards/PostFull.jsx

@@ -27,12 +27,13 @@ import userIllegalContent from 'app/utils/userIllegalContent';
 import ImageUserBlockList from 'app/utils/ImageUserBlockList';
 import LoadingIndicator from 'app/components/elements/LoadingIndicator';
 import { GoogleAd } from 'app/components/elements/GoogleAd';
+import ContentEditedWrapper from '../elements/ContentEditedWrapper';
 
 function TimeAuthorCategory({ content, authorRepLog10, showTags }) {
     return (
         <span className="PostFull__time_author_category vcard">
             <Icon name="clock" className="space-right" />
-            <TimeAgoWrapper date={content.created} className="updated" />
+            <TimeAgoWrapper date={content.created} />
             {} {tt('g.by')}{' '}
             <Author
                 author={content.author}
@@ -63,8 +64,12 @@ function TimeAuthorCategoryLarge({ content, authorRepLog10 }) {
                     {' '}
                     {tt('g.in')} <TagList post={content} single />
                 </span>{' '}
-                •&nbsp;{' '}
-                <TimeAgoWrapper date={content.created} className="updated" />
+                •&nbsp; <TimeAgoWrapper date={content.created} />
+                &nbsp;{' '}
+                <ContentEditedWrapper
+                    createDate={content.created}
+                    updateDate={content.last_update}
+                />
             </div>
         </span>
     );

src/app/components/elements/ContentEditedWrapper/index.jsx

@@ -0,0 +1,27 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+import { FormattedRelative } from 'react-intl';
+import Tooltip from 'app/components/elements/Tooltip';
+import { injectIntl } from 'react-intl';
+
+class ContentEditedWrapper extends React.Component {
+    render() {
+        let { createDate, updateDate, className } = this.props;
+        if (createDate === updateDate) return null;
+
+        if (updateDate && /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d$/.test(updateDate)) {
+            updateDate = updateDate + 'Z'; // Firefox really wants this Z (Zulu)
+        }
+        const dt = new Date(updateDate);
+        const date_time = `${this.props.intl.formatDate(
+            dt
+        )} ${this.props.intl.formatTime(dt)}`;
+        return (
+            <Tooltip t={date_time} className={className}>
+                (edited)
+            </Tooltip>
+        );
+    }
+}
+
+export default injectIntl(ContentEditedWrapper);

src/app/components/elements/ContentEditedWrapper/story.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, date } from '@storybook/addon-knobs';
+import { Center } from 'decorators';
+
+import { IntlProvider } from 'react-intl';
+
+import ContentEditedWrapper from './';
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .addDecorator(Center)
+    .add('ContentEditedWrapper', () => (
+        <IntlProvider locale="en">
+            <TimeAgoWrapper date={date('date', new Date('1 Jul 2016'))} />
+        </IntlProvider>
+    ));