Patch1

.gitignore

@@ -196,3 +196,5 @@ release
 scripts
 
 app/build
+
+.DS_Store

app/src/main/app.js

@@ -61,7 +61,11 @@ const handleRedirect = (e, link) => {
 function initTray() {
   // No idea why using let or var or const with tray causes the tray not to display anything
   /* eslint-disable */
-  tray = new Tray(path.join(__dirname, '/res/images/devrantLogo512.png'));
+  let icon = path.join(__dirname, '/res/images/devrantLogo512.png');
+  if (process.platform === 'darwin') {
+    icon = path.join(__dirname, '/res/images/devrantLogo24.png');
+  }
+  tray = new Tray(icon);
   const contextMenu = Menu.buildFromTemplate([
     { label: 'Open App', click() { mainWindow.show(); } },
     { type: 'separator' },
@@ -205,6 +209,18 @@ app.on('activate', () => {
   }
 });
 
+if (process.platform === 'darwin') {
+  app.on('before-quit', () => {
+    quitApp();
+  });
+  app.on('activate', (e, hasVisibleWindow) => {
+    if (!hasVisibleWindow) {
+      mainWindow.show();
+      mainWindow.focus();
+    }
+  });
+}
+
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.
 

app/src/main/js/actions/modal.js

@@ -19,12 +19,13 @@ const closeModal = () => (dispatch) => {
  * @param {string} type Type of the item to show in the modal
  * @param {number} id This ID can be either user id or rant/collab id
  */
-const openModal = (type, id = 0) => (dispatch) => {
+const openModal = (type, id = 0, data = {}) => (dispatch) => {
   dispatch({
     type: MODAL.OPEN,
     item: {
       type,
       id,
+      data,
     },
   });
 };

app/src/main/js/actions/notifs.js

@@ -97,18 +97,21 @@ const showNotifs = notif => (dispatch, getState) => {
       ipcRenderer.send('showQRNotif', notif);
       return;
     }
+    const commentID = notif.content.comment_id || 0;
 
     const myNotification = new Notification('devRantron', {
       body: notif.body,
-      data: notif.id,
+      data: { id: notif.id, commentID },
       icon: 'http://i.imgur.com/iikd00P.png',
       silent: !notifSettings.notif_sound_enabled.value,
     });
 
     // Open a modal when a user clicks on the notif
     myNotification.onclick = (e) => {
-      dispatch(openModal(ITEM.RANT.NAME, e.target.data));
-      currentWindow.show();
+      dispatch(openModal(ITEM.RANT.NAME, e.target.data.id, { commentID: e.target.data.commentID }));
+      if (!currentWindow.isVisible()) {
+        currentWindow.show();
+      }
       currentWindow.focus();
     };
   }

app/src/main/js/components/columns/column.js

@@ -9,6 +9,7 @@ import ItemCard from '../item/item_card';
 import Loading from '../utilities/loading';
 import ColumnTopBar from './column_topbar';
 import { getRandomInt } from '../../consts/utils';
+import { STATE } from '../../consts/types';
 
 class Column extends Component {
   constructor() {
@@ -72,33 +73,22 @@ class Column extends Component {
       updateScrollHeight(this.props.column.id, this.itemsContainer.scrollTop);
     }
   }
-  render() {
+  getItemsContainer() {
     const {
-      column, theme, vote, fetch, open, filters, itemType, removeColumn, auth } = this.props;
+      column, theme, vote, fetch, open, itemType, auth } = this.props;
     const { divID } = this.state;
+    if (column.items.length === 0 && column.state === STATE.SUCCESS) {
+      return (
+        <div className="no_items">Nothing to see here</div>
+      );
+    }
     return (
       <div
-        className="column"
-        style={{ width: `${theme.column.width}px` }}
+        className="items_container"
+        id={divID}
+        ref={(node) => { this.itemsContainer = node; }}
       >
-        <ColumnTopBar
-          filters={filters}
-          fetch={fetch}
-          id={column.id}
-          divID={divID}
-          fetchAfterMount={column.items.length === 0}
-          type={column.type}
-          state={column.state}
-          removeColumn={removeColumn}
-          sort={column.sort}
-          range={column.range}
-        />
-        <div
-          className="items_container"
-          id={divID}
-          ref={(node) => { this.itemsContainer = node; }}
-        >
-          {
+        {
             column.items.length === 0 ?
               <Loading
                 backgroundColor={theme.backgroundColor}
@@ -116,7 +106,31 @@ class Column extends Component {
                 />
                 ))
           }
-        </div>
+      </div>
+    );
+  }
+  render() {
+    const {
+      column, theme, fetch, filters, removeColumn } = this.props;
+    const { divID } = this.state;
+    return (
+      <div
+        className="column"
+        style={{ width: `${theme.column.width}px` }}
+      >
+        <ColumnTopBar
+          filters={filters}
+          fetch={fetch}
+          id={column.id}
+          divID={divID}
+          fetchAfterMount={column.items.length === 0}
+          type={column.type}
+          state={column.state}
+          removeColumn={removeColumn}
+          sort={column.sort}
+          range={column.range}
+        />
+        { this.getItemsContainer() }
       </div>
     );
   }

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

@@ -56,6 +56,16 @@ class CommentPost extends Component {
         this.setState({ disabled: false });
       });
   }
+
+  /**
+   * This is a function used by comments.js to add a user to
+   * smart area when the reply button is clicked
+   *
+   * @memberof CommentPost
+   */
+  addMention(value) {
+    this.smartArea.addStringToContent(value);
+  }
   render() {
     const { theme, auth } = this.props;
     return (
@@ -71,6 +81,7 @@ class CommentPost extends Component {
           disabled={this.state.disabled || auth.user === null}
           value={this.state.content}
           onChange={text => this.setState({ content: text })}
+          ref={(node) => { this.smartArea = node; }}
         />
       </div>
     );

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

@@ -21,7 +21,7 @@ class Comments extends Component {
     return true;
   }
   render() {
-    const { theme, vote, comments, auth, open } = this.props;
+    const { theme, vote, comments, auth, open, addMention } = this.props;
     return (
       <div className="comments_container">
         {
@@ -36,6 +36,7 @@ class Comments extends Component {
               vote={vote}
               auth={auth}
               open={open}
+              addMention={addMention}
             />
           ))
         }
@@ -50,6 +51,7 @@ Comments.propTypes = {
   open: PropTypes.func.isRequired,
   comments: PropTypes.array.isRequired,
   auth: PropTypes.object.isRequired,
+  addMention: PropTypes.func.isRequired,
 };
 
 export default Comments;

app/src/main/js/components/item/bottom_bar.js

@@ -47,6 +47,20 @@ class BottomBar extends Component {
     }
     this.setState({ isVoted: nextIsVoted, score: nextScore });
   }
+  getAddMention() {
+    const { addMention, username } = this.props;
+    if (typeof addMention !== 'undefined') {
+      return (
+        <div
+          className="addMention"
+          onClick={() => addMention(`@${username}`)}
+        >
+          <p><i className="ion-reply" /></p>
+        </div>
+      );
+    }
+    return <div />;
+  }
   render() {
     const { comments, type } = this.props;
     const disabled = this.props.isUser ? 'disabled' : '';
@@ -79,6 +93,9 @@ class BottomBar extends Component {
             <span>{ comments }</span>
           </div>
         }
+        {
+          this.getAddMention()
+        }
       </div>
     );
   }
@@ -93,6 +110,8 @@ BottomBar.propTypes = {
   isVoted: PropTypes.number.isRequired,
   id: PropTypes.number.isRequired,
   type: PropTypes.string,
+  addMention: PropTypes.func,
+  username: PropTypes.string.isRequired,
 };
 
 export default BottomBar;

app/src/main/js/components/item/item.js

@@ -82,18 +82,37 @@ class Item extends Component {
     .then((res) => {
       const item = res;
       this.setState({ item });
-      if (this.multiCol && scrollToBottom) {
-        this.multiCol.scrollTop = this.multiCol.scrollHeight;
+      if (typeof cardItem.data.commentID !== 'undefined') {
+        const relatedComment = document.getElementById(cardItem.data.commentID);
+        if (relatedComment) {
+          relatedComment.scrollIntoView();
+        }
+        return;
       }
-      if (this.compactCol && scrollToBottom) {
-        this.compactCol.scrollTop = this.compactCol.scrollHeight;
+      if (scrollToBottom) {
+        if (this.multiCol) {
+          this.multiCol.scrollTop = this.multiCol.scrollHeight;
+        }
+        if (this.compactCol) {
+          this.compactCol.scrollTop = this.compactCol.scrollHeight;
+        }
       }
       fetchNotifs();
     })
     .catch((err) => {
       console.log(err);
     });
   }
+  /**
+   * This is a prop for comments component.
+   * This just calls the addMention of post comment
+   *
+   * @param {string} value
+   * @memberof Item
+   */
+  addMention(value) {
+    this.postComment.addMention(value);
+  }
   getItemCard() {
     const { item } = this.state;
     const { theme, vote, cardItem, auth, open } = this.props;
@@ -120,6 +139,7 @@ class Item extends Component {
         vote={vote}
         auth={auth}
         open={open}
+        addMention={value => this.addMention(value)}
       />
     );
   }
@@ -134,6 +154,7 @@ class Item extends Component {
         id={item.rant.id}
         originalPoster={item.rant.user_username}
         fetch={() => this.fetchitem(true)}
+        ref={(node) => { this.postComment = node; }}
       />
     );
   }

app/src/main/js/components/item/item_card.js

@@ -112,7 +112,7 @@ class ItemCard extends Component {
     );
   }
   render() {
-    const { item, theme, vote, modal, itemType, auth, open } = this.props;
+    const { item, theme, vote, modal, itemType, auth, open, addMention } = this.props;
     const user = {
       avatar: item.user_avatar,
       score: item.user_score,
@@ -132,6 +132,7 @@ class ItemCard extends Component {
     return (
       <div
         className={`item_card ${modal || isComment ? null : 'shadow'}`}
+        id={item.id}
         style={{
           backgroundColor: theme.item_card.backgroundColor,
           color: theme.item_card.color,
@@ -174,6 +175,8 @@ class ItemCard extends Component {
           id={item.id}
           isUser={isUser}
           type={isComment ? ITEM.COMMENT.NAME : ITEM.RANT.NAME}
+          addMention={addMention}
+          username={user.username}
         />
       </div>
     );
@@ -188,6 +191,7 @@ ItemCard.propTypes = {
   itemType: PropTypes.string,
   open: PropTypes.func,
   modal: PropTypes.bool,
+  addMention: PropTypes.func,
 };
 
 export default ItemCard;

app/src/main/js/components/user/user_profile.js

@@ -46,7 +46,7 @@ class UserProfile extends Component {
     if (
       nextLength === currentLength
       && nextProps.item.id === this.props.item.id
-      && nextState.column.state !== STATE.LOADING
+      && (nextState.column.state !== STATE.LOADING && nextState.column.items.length !== 0)
     ) {
       return false;
     }
@@ -100,6 +100,8 @@ class UserProfile extends Component {
         } else {
           nextColumn.itemType = ITEM.RANT.NAME;
         }
+        console.log(res);
+        console.log(sort);
         this.setState({
           user: res,
           column: nextColumn,

app/src/main/res/css/modules/bottom_bar.sass

@@ -3,6 +3,20 @@
   display: flex
   background-color: #40415A
   padding: 0.5rem
+  .addMention
+    display: flex
+    align-items: center
+    p
+      margin: 0
+      i
+        transition: all 0.3s
+        opacity: 0.4
+        transform: scale(0.9)
+        &:hover
+          cursor: pointer
+          opacity: 1
+          transform: scale(1)
+
   .score
     flex: 2
     font-size: 1rem

app/src/main/res/css/modules/column.sass

@@ -32,6 +32,12 @@
   height: 100vh
   overflow: hidden
   margin: 0 1rem
+  .no_items
+    display: flex
+    justify-content: center
+    color: white
+    margin-top: 5rem
+    font-size: 1.3rem
   .items_container
     overflow-x: hidden
     overflow-y: scroll