forum: add PostEdited and PostMeta components

js/src/forum/components/CommentPost.tsx

@@ -1,7 +1,7 @@
 import Post from './Post';
 import PostUser from './PostUser';
-// import PostMeta from './PostMeta';
+import PostMeta from './PostMeta';
-// import PostEdited from './PostEdited';
+import PostEdited from './PostEdited';
 // import EditPostComposer from './EditPostComposer';
 import ItemList from '../../common/utils/ItemList';
 import listItems from '../../common/helpers/listItems';
@@ -119,19 +119,17 @@ export default class CommentPost extends Post {
 
     /**
      * Build an item list for the post's header.
-     *
-     * @return {ItemList}
      */
-    headerItems() {
+    headerItems(): ItemList {
         const items = new ItemList();
         const post = this.props.post;
         const props = { post };
 
         items.add('user', <PostUser post={this.props.post} />, 100);
-        // items.add('meta', PostMeta.component(props));
+        items.add('meta', <PostMeta {...props} />);
 
         if (post.isEdited() && !post.isHidden()) {
-            items.add('edited', PostEdited.component(props));
+            items.add('edited', <PostEdited {...props} />);
         }
 
         // If the post is hidden, add a button that allows toggling the visibility

js/src/forum/components/PostEdited.tsx

@@ -0,0 +1,48 @@
+import Component from '../../common/Component';
+import { PostProp } from '../../common/concerns/ComponentProps';
+import humanTime from '../../common/utils/humanTime';
+
+/**
+ * The `PostEdited` component displays information about when and by whom a post
+ * was edited.
+ */
+export default class PostEdited extends Component<PostProp> {
+    shouldUpdateTooltip = false;
+    oldEditedInfo?: string;
+
+    view() {
+        const post = this.props.post;
+        const editedUser = post.editedUser();
+        const editedInfo = app.translator.transText('core.forum.post.edited_tooltip', { user: editedUser, ago: humanTime(post.editedAt()) });
+
+        if (editedInfo !== this.oldEditedInfo) {
+            this.shouldUpdateTooltip = true;
+            this.oldEditedInfo = editedInfo;
+        }
+
+        return (
+            <span className="PostEdited" title={editedInfo}>
+                {app.translator.trans('core.forum.post.edited_text')}
+            </span>
+        );
+    }
+
+    oncreate(vnode) {
+        super.oncreate(vnode);
+
+        console.log('set up tooltip');
+
+        this.$().tooltip();
+    }
+
+    onupdate(vnode) {
+        super.onupdate(vnode);
+
+        if (this.shouldUpdateTooltip) {
+            this.$()
+                .tooltip('destroy')
+                .tooltip();
+            this.shouldUpdateTooltip = false;
+        }
+    }
+}

js/src/forum/components/PostMeta.tsx

@@ -0,0 +1,52 @@
+import Component from '../../common/Component';
+import { PostProp } from '../../common/concerns/ComponentProps';
+import humanTime from '../../common/helpers/humanTime';
+import fullTime from '../../common/helpers/fullTime';
+import Post from '../../common/models/Post';
+
+export default class PostMeta extends Component<PostProp> {
+    view() {
+        const post = this.props.post;
+        const time = post.createdAt();
+        const permalink = this.getPermalink(post);
+        const touch = 'ontouchstart' in document.documentElement;
+
+        // When the dropdown menu is shown, select the contents of the permalink
+        // input so that the user can quickly copy the URL.
+        const selectPermalink = function(this: Element) {
+            setTimeout(() =>
+                $(this)
+                    .parent()
+                    .find('.PostMeta-permalink')
+                    .select()
+            );
+        };
+
+        return (
+            <div className="Dropdown PostMeta">
+                <a className="Dropdown-toggle" onclick={selectPermalink} data-toggle="dropdown">
+                    {humanTime(time)}
+                </a>
+
+                <div className="Dropdown-menu dropdown-menu">
+                    <span className="PostMeta-number">{app.translator.trans('core.forum.post.number_tooltip', { number: post.number() })}</span>{' '}
+                    <span className="PostMeta-time">{fullTime(time)}</span> <span className="PostMeta-ip">{post.data.attributes.ipAddress}</span>
+                    {touch ? (
+                        <a className="Button PostMeta-permalink" href={permalink}>
+                            {permalink}
+                        </a>
+                    ) : (
+                        <input className="FormControl PostMeta-permalink" value={permalink} onclick={e => e.stopPropagation()} />
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * Get the permalink for the given post.
+     */
+    getPermalink(post: Post): string {
+        return window.location.origin + app.route.post(post);
+    }
+}