Merge pull request #96 from tahnik/mention

Mentions 🎉

app/src/main/js/components/comments/comment_card.js

@@ -5,6 +5,27 @@ import UserBadge from '../user/user_badge';
 import BottomBar from '../utilities/bottom_bar';
 import { ITEM } from '../../consts/types';
 
+function timeSince(date) {
+  const seconds = Math.floor((new Date() - date) / 1000);
+  let interval = seconds / 2592000;
+  if (interval > 1) {
+    const nd = new Date(date);
+    return `${nd.getDate()}/${nd.getMonth()}/${nd.getYear().toString().substring(1)}`;
+  }
+  interval = seconds / 86400;
+  if (interval > 1) {
+    return `${Math.floor(interval)}d`;
+  }
+  interval = seconds / 3600;
+  if (interval > 1) {
+    return `${Math.floor(interval)}h`;
+  }
+  interval = seconds / 60;
+  if (interval > 1) {
+    return `${Math.floor(interval)}m`;
+  }
+  return `${Math.floor(seconds)}s`;
+}
 
 const CommentCard = (props) => {
   const { item, theme, vote, auth, open } = props;
@@ -18,6 +39,7 @@ const CommentCard = (props) => {
   if (auth.user) {
     isUser = auth.user.authToken.user_id === item.user_id;
   }
+  const image = item.attached_image;
   return (
     <div
       className="comment_card"
@@ -30,7 +52,9 @@ const CommentCard = (props) => {
         className="top_container"
       >
         <UserBadge user={user} theme={theme} open={open} />
+        <span className="timesince">{timeSince(item.created_time * 1000)}</span>
         <Twemoji><p>{item.body}</p></Twemoji>
+        { typeof image !== 'undefined' ? <img alt="" src={image.url} /> : null }
       </div>
       <BottomBar
         score={item.score}

app/src/main/js/components/comments/comment_post.js

@@ -1,28 +1,36 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import rantscript from '../../consts/rantscript';
+import SmartArea from '../utilities/smart_area';
 
 class CommentPost extends Component {
   constructor() {
     super();
     this.state = {
-      text: '',
       disabled: false,
+      users: [],
+      content: '',
     };
   }
-  onPost() {
+  componentWillMount() {
+    const users = new Set();
+    const { comments } = this.props;
+    for (let i = 0; i < comments.length; i += 1) {
+      users.add(comments[i].user_username);
+    }
+    if (users.size !== 0) {
+      this.setState({ users: Array.from(users) });
+    }
+  }
+  onPost(text, image) {
     const { auth, id, fetch } = this.props;
     this.setState({ disabled: true });
     rantscript
-      .postComment(this.state.text, id, auth.user.authToken)
+      .postComment(text, id, auth.user.authToken, image)
       .then(() => {
-        this.setState({ text: '' });
+        this.setState({ content: '' });
         this.setState({ disabled: false });
         fetch();
-        const itemContainer = document.getElementsByClassName('item_compact_column')[0];
-        setTimeout(() => {
-          itemContainer.scrollTop = itemContainer.scrollHeight;
-        }, 200);
       })
       .catch(() => {
         this.setState({ disabled: false });
@@ -35,24 +43,27 @@ class CommentPost extends Component {
         className="post_comment"
         style={{ width: `${theme.column.width - 17}px` }}
       >
-        <textarea
-          value={this.state.text}
-          onChange={e => this.setState({ text: e.target.value })}
-        />
-        <button
+        <SmartArea
+          id="post_comment_area"
+          users={this.state.users}
+          placeholder="Add a comment..."
+          onPost={(text, image) => this.onPost(text, image)}
           disabled={this.state.disabled || auth.user === null}
-          onClick={() => this.onPost()}
-        >Add Comment</button>
+          value={this.state.content}
+          onChange={text => this.setState({ content: text })}
+        />
       </div>
     );
   }
 }
 
+
 CommentPost.propTypes = {
   theme: PropTypes.object.isRequired,
   auth: PropTypes.object.isRequired,
   id: PropTypes.number.isRequired,
   fetch: PropTypes.func.isRequired,
+  comments: PropTypes.array.isRequired,
 };
 
 export default CommentPost;

app/src/main/js/components/emoji_picker/emoji_picker.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Twemoji from 'react-twemoji';
-import emojiData from './emojis.json';
+import emojiData from '../../consts/emojis.json';
 
 const categoryImages = {
   people: '😀',
@@ -34,16 +34,16 @@ class EmojiPicker extends Component {
       }
     });
   }
-  pickEmoji(emojChar) {
+  pickEmoji(name) {
     if (this.props.onPick === undefined) {
       return false;
     }
-    this.props.onPick(emojChar);
+    this.props.onPick(`:${name}:`);
     return true;
   }
   render() {
     return (
-      <div className="emoji_picker">
+      <div className="emoji_picker" style={this.props.style}>
         <div className="emoji_top">
           <div className="categories">
             {emojiData.categories.map(object => (
@@ -62,10 +62,10 @@ class EmojiPicker extends Component {
           {emojiData[this.state.activeTab].map(object => (
             <Twemoji
               className="emoji_wrapper"
-              key={object.character}
-              onClick={() => { this.pickEmoji(object.character); }}
+              key={object.icon}
+              onClick={() => { this.pickEmoji(object.name); }}
             >
-              {object.character}
+              {object.icon}
             </Twemoji>
             ))}
         </div>
@@ -76,6 +76,7 @@ class EmojiPicker extends Component {
 
 EmojiPicker.propTypes = {
   onPick: PropTypes.func, //eslint-disable-line
+  style: PropTypes.object, //eslint-disable-line
 };
 
 export default EmojiPicker;