HF 30 - Private groups - Mentions, replies, fix mark messages

package.json

@@ -18,7 +18,7 @@
     "emoji-picker-element": "^1.10.1",
     "formik": "./git-deps/formik/packages/formik",
     "git-rev-sync": "^3.0.2",
-    "golos-lib-js": "^0.9.75",
+    "golos-lib-js": "^0.9.76",
     "history": "4.10.1",
     "immutable": "^4.0.0",
     "koa": "^2.13.4",
@@ -73,7 +73,7 @@
   "scripts": {
     "preinstall": "node git-install.js",
     "cordova": "cordova",
-    "dev": "cross-env HTTPS=true react-app-rewired start",
+    "dev": "cross-env react-app-rewired start",
     "dev:server": "nodemon server",
     "build": "react-app-rewired build",
     "prod": "NODE_ENV=production node server/index.js",

src/components/elements/messages/AuthorDropdown/index.jsx

@@ -61,10 +61,12 @@ class AuthorDropdown extends React.Component {
         let banBtn
         if (isModer) {
             const isBanned = authorAcc && authorAcc.member_type === 'banned'
+            const isOwner = the_group && the_group.owner === author
             banBtn = <button className={cn('button hollow small btn', {
                 alert: !isBanned,
                 banned: isBanned,
-            })} onClick={e => this.btnClick(e, isBanned)} disabled={this.state.submitting}>
+                disabled: isOwner,
+            })} disabled={isOwner} onClick={e => this.btnClick(e, isBanned)} disabled={this.state.submitting}>
                 <Icon name='ionicons/ban' />
                 <span className='title'>{isBanned ? tt('group_members_jsx.unban') :
                     tt('group_members_jsx.ban')}</span>

src/components/elements/messages/ConversationListItem/ConversationListItem.css

@@ -54,6 +54,11 @@
     text-align: center;
 }
 
+.conversation-unread.mention:not(.mine) {
+    background-color: #007aff;
+    margin-left: 8px;
+}
+
 .conversation-unread.mine {
     float: right;
     color: #007aff;

src/components/elements/messages/ConversationListItem/index.jsx

@@ -64,7 +64,7 @@ export default class ConversationListItem extends React.Component {
 
     render() {
         const { selected } = this.props;
-        const { avatar, isSystemMessage, contact, last_message, size, unread_donate } = this.props.data;
+        const { avatar, isSystemMessage, contact, last_message, size, unread_donate, kind } = this.props.data;
 
         const link = this.makeLink();
 
@@ -84,12 +84,31 @@ export default class ConversationListItem extends React.Component {
                 unread = (<div className='conversation-unread mine'>●</div>);
         }
 
-        const unreadMessages = size && size.unread_inbox_messages;
+        let title = ''
+
+        const unreadMessages = size && size.unread_inbox_messages
+        const unreadMentions = size && size.unread_mentions
 
         if (!unread && unreadMessages) {
             unread = (<div className='conversation-unread'>
                 {unreadMessages}
             </div>)
+            if (kind === 'group') {
+                title += tt('plurals.reply_count', { count: unreadMessages })
+            }
+        }
+
+        if (unreadMentions) {
+            unread = <React.Fragment>
+                <div className='conversation-unread mention'>
+                    {unreadMentions}
+                </div>
+                {unread}
+            </React.Fragment>
+            if (kind === 'group') {
+                if (title) title += ', '
+                title += tt('plurals.mention_count', { count: unreadMentions })
+            }
         }
 
         let checkmark
@@ -100,7 +119,7 @@ export default class ConversationListItem extends React.Component {
         }
 
         return (
-            <Link to={isSystemMessage ? null : link} className={'conversation-list-item' + (selected ? ' selected' : '')}>
+            <Link to={isSystemMessage ? null : link} className={'conversation-list-item' + (selected ? ' selected' : '')} title={title}>
                 {this._renderAvatar()}
                 <div className='conversation-info'>
                     <h1 className='conversation-title'>{contact}{checkmark}</h1>

src/components/elements/messages/Message/Message.css

@@ -44,6 +44,9 @@
     text-decoration: underline;
     font-weight: bold;
 }
+.msgs-message .bubble-container a.mention {
+    text-decoration: none;
+}
 
 .msgs-message.mine .bubble-container {
     justify-content: flex-end;
@@ -92,6 +95,11 @@
     color: white;
 }
 
+.msgs-message.highlight .bubble-container .bubble {
+    background: #fc544e !important;
+    color: white;
+}
+
 .msgs-message.mine .bubble-container .bubble {
     background: #007aff;
     color: white;

src/components/elements/messages/Message/index.jsx

@@ -2,18 +2,26 @@ import React from 'react';
 import {connect} from 'react-redux'
 import { Fade } from 'react-foundation-components/lib/global/fade'
 import { LinkWithDropdown } from 'react-foundation-components/lib/global/dropdown'
+import { Link } from 'react-router-dom'
 import tt from 'counterpart';
 import cn from 'classnames'
 import { Asset } from 'golos-lib-js/lib/utils'
 
 import AuthorDropdown from 'app/components/elements/messages/AuthorDropdown'
 import Donating from 'app/components/elements/messages/Donating'
 import Userpic from 'app/components/elements/Userpic'
+import { session } from 'app/redux/UserSaga'
+import { accountNameRegEx } from 'app/utils/mentions'
 import { displayQuoteMsg } from 'app/utils/MessageUtils';
 import { proxifyImageUrl } from 'app/utils/ProxifyUrl';
 import './Message.css';
 
 class Message extends React.Component {
+    constructor(props) {
+        super(props)
+        this.dropdown = React.createRef()
+    }
+
     onMessageSelect = (idx, event) => {
         if (this.props.onMessageSelect) {
             const { data, selected } = this.props;
@@ -26,6 +34,8 @@ class Message extends React.Component {
     };
 
     render() {
+        let username
+
         const {
             idx,
             data,
@@ -72,6 +82,11 @@ class Message extends React.Component {
                     } else if (word.length <= 2 && /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/.test(word)) {
                         spans.push(<span key={key++} style={{fontSize: '20px'}}>{word}</span>);
                         spans.push(' ');
+                    } else if (word.length > 3 && accountNameRegEx.test(word)) {
+                        const sess = session.load()
+                        if (sess && !username) username = sess[0]
+                        spans.push(<Link className='mention' to={('@' + username === word) ? '/' : '/' + word} key={key} tabIndex='-1' onClick={this.doNotSelectMessage}>{word}</Link>)
+                        spans.push(' ')
                     } else {
                         spans.push(word + ' ');
                     }
@@ -115,7 +130,11 @@ class Message extends React.Component {
             if (startsSequence) {
                 author = <div className={cn('author', {
                     banned: isBanned
-                })}>
+                })} onClick={(e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    this.dropdown.current.click()
+                }}>
                     {from}
                 </div>
 
@@ -125,7 +144,8 @@ class Message extends React.Component {
                     dropdownContent={<AuthorDropdown author={from} />}
                     transition={Fade}
                 >
-                    <Userpic account={from} title={'@' + from} width={32} height={32}
+                    <span style={{ display: 'none' }} ref={this.dropdown}></span>
+                    <Userpic account={from} width={32} height={32}
                         disabled={isBanned} />
                 </LinkWithDropdown>
             }
@@ -143,7 +163,7 @@ class Message extends React.Component {
                 `${isMine ? 'mine' : ''}`,
                 `${startsSequence ? 'start' : ''}`,
                 `${endsSequence ? 'end' : ''}`
-            ].join(' ')}>
+            ].join(' ')} id={'msgs-' + data.nonce}>
                 {
                     showTimestamp &&
                         <div className='timestamp'>

src/components/modules/groups/GroupMembers.jsx

@@ -11,6 +11,7 @@ import AccountName from 'app/components/elements/common/AccountName'
 import Input from 'app/components/elements/common/Input';
 import GroupMember from 'app/components/elements/groups/GroupMember'
 import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import MarkNotificationRead from 'app/components/elements/MarkNotificationRead'
 import { getRoleInGroup, getGroupMeta, getGroupTitle } from 'app/utils/groups'
 
 export async function validateMembersStep(values, errors) {
@@ -253,6 +254,8 @@ class GroupMembers extends React.Component {
                         {this._renderMemberTypeSwitch()}
                     </div>
                 </div>}
+                {(username && showPendings) ? <MarkNotificationRead fields='join_request' account={username}
+                /> : null}
             </div>
         }
 

src/components/modules/groups/MyGroups.jsx

@@ -12,6 +12,7 @@ import user from 'app/redux/UserReducer'
 import DropdownMenu from 'app/components/elements/DropdownMenu'
 import Icon from 'app/components/elements/Icon'
 import LoadingIndicator from 'app/components/elements/LoadingIndicator'
+import MarkNotificationRead from 'app/components/elements/MarkNotificationRead'
 import { showLoginDialog } from 'app/components/dialogs/LoginDialog'
 import { getGroupLogo, getGroupMeta, getRoleInGroup } from 'app/utils/groups'
 
@@ -244,13 +245,17 @@ class MyGroups extends React.Component {
             </div>
         }
 
+        const { username } = this.props
+
         return <div className='MyGroups'>
                <div className='row'>
                    <h3>{tt('my_groups_jsx.title')}</h3>
                </div>
                {button}
                {groups}
                {hasGroups ? <div style={{ height: '50px' }}></div> : null}
+                {username ? <MarkNotificationRead fields='group_member' account={username}
+                /> : null}
         </div>
     }
 }