Private groups, Mobile app - fixes (WIP, do not merge)

src/components/elements/common/AccountName/index.jsx

@@ -10,7 +10,7 @@ class AccountName extends React.Component {
         super(props)
         this.state = {
             defaultOptions: [],
-            isLoading: true,
+            isLoading: false,
         }
         this.ref = React.createRef()
     }

src/components/elements/groups/GroupMember.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 import tt from 'counterpart'
 import cn from 'classnames'
 
@@ -53,7 +54,7 @@ class GroupMember extends React.Component {
     }
 
     render() {
-        const { member, username, currentGroup } = this.props
+        const { member, username, currentGroup, linkClick } = this.props
         const { account, member_type, joined } = member
         const { creatingNew, } = currentGroup
 
@@ -101,12 +102,12 @@ class GroupMember extends React.Component {
 
         return <tr key={account}>
             <td style={{ paddingBottom: '0px' }}>
-                <a href={'/@' + account} target='_blank' rel='noopener noreferrer'>
+                <Link to={'/@' + account} onClick={linkClick || undefined}>
                     <Userpic account={account} title={account} width={40} height={40} />
                     <span className='member-name'>
                         {account}
                     </span>
-                </a>
+                </Link>
             </td>
             <td>
                 {!isSmall && !creatingNew && <TimeAgoWrapper date={joined} />}

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

@@ -33,6 +33,20 @@ class Message extends React.Component {
         event.stopPropagation();
     };
 
+    linkClicked = (event) => {
+        this.doNotSelectMessage(event)
+        if (process.env.MOBILE_APP) {
+            event.preventDefault()
+            let node, href
+            do {
+                node = node ? node.parentNode : event.target
+                if (!node) break
+                href = node.href
+            } while (!href)
+            window.open(href, '_blank')
+        }
+    }
+
     render() {
         let username
 
@@ -61,7 +75,7 @@ class Message extends React.Component {
             const previewWidth = message.previewWidth ? message.previewWidth + 'px' : 'auto';
             const previewHeight = message.previewHeight ? message.previewHeight + 'px' : 'auto';
 
-            content = (<a href={src} target='_blank' rel='noopener noreferrer' tabIndex='-1' onClick={this.doNotSelectMessage}>
+            content = (<a href={src} target='_blank' rel='noopener noreferrer' tabIndex='-1' onClick={this.linkClicked}>
                 <img src={srcPreview} alt={src} style={{width: previewWidth, height: previewHeight, objectFit: 'cover'}} />
             </a>);
         } else {
@@ -77,7 +91,7 @@ class Message extends React.Component {
                         if (!href.startsWith('http://') && !href.startsWith('https://')) {
                             href = 'http://' + href;
                         }
-                        spans.push(<a href={href} target='_blank' rel='noopener noreferrer' key={key} tabIndex='-1' onClick={this.doNotSelectMessage}>{word}</a>);
+                        spans.push(<a href={href} target='_blank' rel='noopener noreferrer' key={key} tabIndex='-1' onClick={this.linkClicked}>{word}</a>);
                         spans.push(' ');
                     } 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>);
@@ -130,12 +144,14 @@ 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}
+                })}>
+                    <span onClick={(e) => {
+                        e.preventDefault()
+                        e.stopPropagation()
+                        this.dropdown.current.click()
+                    }}>
+                        {from}
+                    </span>
                 </div>
 
                 avatar = <LinkWithDropdown

src/components/modules/Modals.jsx

@@ -79,7 +79,7 @@ class Modals extends React.Component {
         const modalStyle = {
             borderRadius: '8px',
             boxShadow: '0 0 19px 3px rgba(0,0,0, 0.2)',
-            overflow: 'hidden',
+            overflowX: 'hidden',
         }
 
         const doHideLogin = (e) => {

src/components/modules/groups/GroupMembers.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
 import { Field, ErrorMessage, } from 'formik'
 import tt from 'counterpart'
 import { validateAccountName } from 'golos-lib-js/lib/utils'
@@ -11,8 +12,8 @@ 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'
+import isScreenSmall from 'app/utils/isScreenSmall'
 
 export async function validateMembersStep(values, errors) {
     // nothing yet...
@@ -149,7 +150,7 @@ class GroupMembers extends React.Component {
     }
 
     render() {
-        const { currentGroup, group, username } = this.props
+        const { currentGroup, group, username, closeMe } = this.props
         const loading = this.isLoading()
         let members = group && group.get('members')
         if (members) members = members.get('data')
@@ -162,6 +163,12 @@ class GroupMembers extends React.Component {
             amModer = true
         }
 
+        const isSmall = isScreenSmall()
+
+        const linkClick = () => {
+            if (closeMe) closeMe()
+        }
+
         let mems
         if (loading) {
             mems = <div>
@@ -178,6 +185,7 @@ class GroupMembers extends React.Component {
                 mems.push(<GroupMember key={member.account} member={member}
                     username={username} currentGroup={currentGroup}
                     groupMember={groupMember} updateGroupMember={updateGroupMember}
+                    linkClick={linkClick}
                 />)
             }
 
@@ -197,7 +205,7 @@ class GroupMembers extends React.Component {
                 {amModer ? <div className='row' style={{ marginTop: '0.5rem', }}>
                     <div className='column small-12'>
                         <AccountName
-                            placeholder={tt('create_group_jsx.add_member')}
+                            placeholder={isSmall ? tt('create_group_jsx.add_member2') : tt('create_group_jsx.add_member')}
                             onChange={this.onAddAccount}
                             filterAccounts={filterAccs}
                             onAccountsLoad={(accs) => {
@@ -222,7 +230,7 @@ class GroupMembers extends React.Component {
                 </div>
             </div>
         } else {
-            const { name, json_metadata, pendings, banneds, } = currentGroup
+            const { name, owner, json_metadata, pendings, banneds, } = currentGroup
 
             const meta = getGroupMeta(json_metadata)
             let title = getGroupTitle(meta, name)
@@ -231,12 +239,31 @@ class GroupMembers extends React.Component {
 
             const { showPendings, showBanneds } = this.state
 
+            let ownerRight, ownerRow
+            let ownerBlock = <React.Fragment>
+                {tt('group_settings_jsx.owner') + ' - '}
+                {amOwner ? <b title={'@' + owner}>{tt('g.you')}</b> :
+                    <Link to={'/@' + owner} onClick={linkClick}>{('@' + owner)}</Link>}
+            </React.Fragment>
+            if (isSmall) {
+                ownerRow = <div className='row' style={{ marginTop: '0rem', marginBottom: '0.5rem' }}>
+                    <div className='column small-12'>
+                        {ownerBlock}
+                    </div>
+                </div>
+            } else {
+                ownerRight = <div style={{ float: 'right', }}>
+                    {ownerBlock}
+                </div>
+            }
+
             header = <div>
                 <div className='row' style={{ marginTop: '0rem' }}>
                     <div className='column small-12' style={{paddingTop: 5, fontSize: '110%'}}>
                         <h4>{title}</h4>
                     </div>
                 </div>
+                {ownerRow}
                 {amModer ? <div className='row' style={{ marginTop: '0rem' }}>
                     <div className='column small-12'>
                         <label style={{fontSize: '100%', display: 'inline-block'}} title={tt('group_members_jsx.check_pending_hint')}>
@@ -248,14 +275,14 @@ class GroupMembers extends React.Component {
                             <input type='checkbox' disabled={!banneds} checked={!!showBanneds} onChange={this.toggleBanneds} />
                             {tt('group_members_jsx.check_banned') + ' (' + banneds + ')'}
                         </label>
+                        {ownerRight}
                     </div>
                 </div> : <div className='row' style={{ marginTop: '0rem', marginBottom: '0.5rem' }}>
                     <div className='column small-12'>
                         {this._renderMemberTypeSwitch()}
+                        {ownerRight}
                     </div>
                 </div>}
-                {(username && showPendings) ? <MarkNotificationRead fields='join_request' account={username}
-                /> : null}
             </div>
         }
 

src/components/modules/groups/GroupName.jsx

@@ -19,18 +19,18 @@ export async function validateNameStep(values, errors) {
             for (let i = 0; i < 3; ++i) {
                 try {
                     console.time('group_exists')
-                    group = await api.getGroupsAsync({
+                    group = (await api.getGroupsAsync({
                         start_group: values.name,
                         limit: 1
-                    })
+                    })).groups
                     console.timeEnd('group_exists')
                     break
                 } catch (err) {
                     console.error(err)
                     errors.name = 'Blockchain unavailable :('
                 }
             }
-            if (group && group[0] && group[0].name === values.name) {
+            if (group[0] && group[0].name === values.name) {
                 errors.name = tt('create_group_jsx.group_already_exists')
             }
         }

src/components/modules/groups/MyGroups.jsx

@@ -183,7 +183,7 @@ class MyGroups extends React.Component {
                             {(isSmall ? '' : tt('group_members_jsx.check_pending')) + ' (' + pendings + ')'}
                         </span>
                     </button> : null}
-                    <button className={cn('button', {
+                    <button className={cn('button force-white', {
                         'icon-only': (isSmall || pendings || amPending)
                     })} onClick={e => {
                         this.showGroupMembers(e, group)
@@ -265,7 +265,7 @@ class MyGroups extends React.Component {
                {button}
                {groups}
                {hasGroups ? <div style={{ height: '50px' }}></div> : null}
-                {username ? <MarkNotificationRead fields='group_member' account={username}
+                {username ? <MarkNotificationRead fields='group_member,join_request' account={username}
                 /> : null}
         </div>
     }

src/components/modules/groups/MyGroups.scss

@@ -44,4 +44,7 @@
             display: none;
         }
     }
+    .button.force-white {
+        color: #fefefe !important;
+    }
 }

src/locales/en.json

@@ -181,7 +181,8 @@
     "members_list": "Members:",
     "image_wrong": "Cannot load this image.",
     "image_timeout": "Cannot load this image, it is loading too long...",
-    "add_member": "+ Add Member..."
+    "add_member": "+ Add Member...",
+    "add_member2": "+ Add..."
   },
   "my_groups_jsx": {
     "title": "My Groups",
@@ -389,6 +390,7 @@
     "submit": "Submit",
     "unblock": "Unblock",
     "username_does_not_exist": "Username does not exist",
-    "wallet": "Wallet"
+    "wallet": "Wallet",
+    "you": "you"
   }
 }

src/locales/ru-RU.json

@@ -189,6 +189,7 @@
     "image_wrong": "Не удается загрузить картинку.",
     "image_timeout": "Не удается загрузить картинку, она загружается слишком долго...",
     "add_member": "+ Добавить участника...",
+    "add_member2": "+ Добавить...",
     "cannot_set_members": "Группа создана успешно. Но, к сожалению, не получилось задать участников из-за ошибки.",
     "cannot_set_members2": "Вы можете попытаться сделать это заново в настройках группы."
   },
@@ -407,6 +408,7 @@
     "unblock": "Разблокировать",
     "username_does_not_exist": "Такого имени не существует",
     "wallet": "Кошелек",
-    "wait": "Ждите..."
+    "wait": "Ждите...",
+    "you": "вы"
   }
 }

src/redux/FetchDataSaga.js

@@ -129,8 +129,8 @@ export function* fetchState(location_change_action) {
                             }
                         })
                         if (hasErr) return 
-                        if (the_group[0] && the_group[0].name === path) {
-                            the_group = the_group[0]
+                        if (the_group && the_group.groups && the_group.groups[0] && the_group.groups[0].name === path) {
+                            the_group = the_group.groups[0]
                         } else {
                             the_group = null
                         }
@@ -226,24 +226,24 @@ export function* watchFetchMyGroups() {
 
 export function* fetchMyGroups({ payload: { account } }) {
     try {
-        const groupsOwn = yield call([api, api.getGroupsAsync], {
+        const groupsOwn = (yield call([api, api.getGroupsAsync], {
             member: account,
             member_types: [],
             start_group: '',
             limit: 100,
             with_members: {
                 accounts: [account]
             }
-        })
-        let groups = yield call([api, api.getGroupsAsync], {
+        })).groups
+        let groups = (yield call([api, api.getGroupsAsync], {
             member: account,
             member_types: ['pending', 'member', 'moder'],
             start_group: '',
             limit: 100,
             with_members: {
                 accounts: [account]
             }
-        })
+        })).groups
         groups = [...groupsOwn, ...groups]
         groups.sort((a, b) => {
             return b.pendings - a.pendings
@@ -269,7 +269,7 @@ export function* fetchTopGroups({ payload: { account } }) {
                 groupsWithoutMe.pop()
             }
 
-            const groups = yield call([api, api.getGroupsAsync], {
+            const { groups } = yield call([api, api.getGroupsAsync], {
                 sort: 'by_popularity',
                 start_group,
                 limit: 100,
@@ -310,7 +310,7 @@ export function* fetchGroupMembers({ payload: { group, creatingNew, memberTypes,
 
         yield put(g.actions.receiveGroupMembers({ group, loading: true }))
 
-        const members = yield call([api, api.getGroupMembersAsync], {
+        const { members } = yield call([api, api.getGroupMembersAsync], {
             group,
             member_types: memberTypes,
             sort_conditions: sortConditions,

src/utils/ServerApiClient.js

@@ -3,7 +3,7 @@ import { fetchEx } from 'golos-lib-js/lib/utils'
 export function getHost() {
     const { location, } = window;
     if (process.env.NODE_ENV === 'development') {
-        return location.protocol + '//'+ location.hostname + ':8080';
+        return location.protocol + '//'+ location.hostname + ':8088';
     }
     return location.origin;
 }