HF 30 - Fix apps (desktop, Android)

src/components/elements/VerticalMenu.scss

@@ -55,6 +55,10 @@
       padding: 0 1rem 0 3.8rem;
       line-height: 50px;
 
+      @media screen and (max-width: 39.9375em) {
+        padding: 0 20px;
+      }
+
       .Icon {
         @include themify($themes) {
           fill: themed('textColorPrimary');

src/components/elements/groups/GroupMember.jsx

@@ -6,6 +6,7 @@ import Icon from 'app/components/elements/Icon'
 import TimeAgoWrapper from 'app/components/elements/TimeAgoWrapper'
 import Userpic from 'app/components/elements/Userpic'
 import { getRoleInGroup } from 'app/utils/groups'
+import isScreenSmall from 'app/utils/isScreenSmall'
 
 class GroupMember extends React.Component {
     // shouldComponentUpdate(nextProps) {
@@ -96,6 +97,8 @@ class GroupMember extends React.Component {
                     onClick={e => this.groupMember(e, member, 'retired')} />
         }
 
+        const isSmall = isScreenSmall()
+
         return <tr key={account}>
             <td style={{ paddingBottom: '0px' }}>
                 <a href={'/@' + account} target='_blank' rel='noopener noreferrer'>
@@ -106,7 +109,7 @@ class GroupMember extends React.Component {
                 </a>
             </td>
             <td>
-                {!creatingNew && <TimeAgoWrapper date={joined} />}
+                {!isSmall && !creatingNew && <TimeAgoWrapper date={joined} />}
             </td>
             <td className='member-btns'>
                 {isOwner && <Icon className={cn('member-btn owner selected')}

src/components/modules/CreateGroup.jsx

@@ -20,13 +20,17 @@ import GroupMembers, { validateMembersStep } from 'app/components/modules/groups
 import GroupFinal from 'app/components/modules/groups/GroupFinal'
 import DialogManager from 'app/components/elements/common/DialogManager'
 import { showLoginDialog } from 'app/components/dialogs/LoginDialog'
+import isScreenSmall from 'app/utils/isScreenSmall'
 
-const STEPS = () => { return {
-    name: tt('create_group_jsx.step_name'),
-    logo: tt('create_group_jsx.step_logo'),
-    members: tt('create_group_jsx.step_members'),
-    final: tt('create_group_jsx.step_create')
-} }
+const STEPS = () => {
+    const isSmall = isScreenSmall()
+    return {
+        name: tt('create_group_jsx.step_name'),
+        logo: isSmall ? tt('create_group_jsx.step_logo_mobile') : tt('create_group_jsx.step_logo'),
+        members: isSmall ? tt('create_group_jsx.step_members_mobile') : tt('create_group_jsx.step_members'),
+        final: isSmall ? tt('create_group_jsx.step_create_mobile') : tt('create_group_jsx.step_create')
+    }
+}
 
 class ActionOnUnmount extends React.Component {
     componentWillUnmount() {

src/components/modules/MessagesTopCenter.jsx

@@ -229,6 +229,17 @@ class MessagesTopCenter extends React.Component {
         </div>
     }
 
+    showErrorLogs = (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        const { errorLogs } = this.props
+        let msg = ''
+        for (const err of errorLogs) {
+            msg += err.err.toString() + '\n' + JSON.stringify(err.details) + '\n\n'
+        }
+        alert(msg)
+    }
+
     render() {
         let avatar = []
         let items = []
@@ -257,7 +268,7 @@ class MessagesTopCenter extends React.Component {
                     closeOnClickOutside
                     dropdownClassName="GroupDropdown"
                     dropdownPosition="bottom"
-                    dropdownAlignment="center"
+                    dropdownAlignment="right"
                     dropdownContent={this._renderGroupDropdown()}
                     transition={Fade}
                 >
@@ -284,10 +295,10 @@ class MessagesTopCenter extends React.Component {
         if (notifyErrors >= 30) {
             items.push(<div key='to-last-seen' style={{fontSize: '13px', fontWeight: 'normal', color: 'red'}}>
                 {isSmall ?
-                    <span>
+                    <span onClick={this.showErrorLogs}>
                         {tt('messages.sync_error_short')}
-                        <a href='#' onClick={e => { e.preventDefault(); this.props.fetchState(this.props.to) }}>
-                            {tt('g.refresh').toLowerCase()}.
+                        <a href='#' onClick={e => { e.preventDefault(); e.stopPropagation(); window.location.reload() }}>
+                            {tt('g.refresh')}.
                         </a>
                     </span> :
                     <span>{tt('messages.sync_error')}</span>

src/components/modules/groups/MyGroups.jsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
 import { Map } from 'immutable'
 import { api, formatter } from 'golos-lib-js'
 import tt from 'counterpart'
+import cn from 'classnames'
 
 import DialogManager from 'app/components/elements/common/DialogManager'
 import g from 'app/redux/GlobalReducer'
@@ -15,6 +16,7 @@ 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'
+import isScreenSmall from 'app/utils/isScreenSmall'
 
 class MyGroups extends React.Component {
     constructor(props) {
@@ -126,10 +128,13 @@ class MyGroups extends React.Component {
 
         const meta = getGroupMeta(json_metadata)
 
+        const isSmall = isScreenSmall()
+
+        const maxLength = isSmall ? 15 : 20
         let title = meta.title || name
         let titleShr = title
-        if (titleShr.length > 20) {
-            titleShr = titleShr.substring(0, 17) + '...'
+        if (titleShr.length > maxLength) {
+            titleShr = titleShr.substring(0, maxLength - 3) + '...'
         }
 
         const kebabItems = []
@@ -161,7 +166,9 @@ class MyGroups extends React.Component {
                     e.preventDefault()
                     e.stopPropagation()
                 }}>
-                    {amPending ? <button className='button hollow alert' title={
+                    {amPending ? <button className={cn('button hollow alert', {
+                        'icon-only': isSmall
+                    })} title={
                         amPending ? tt('msgs_group_dropdown.pending') : null} onClick={e => {
                         this.retireCancel(e, group, titleShr, amPending)
                     }}>
@@ -172,11 +179,15 @@ class MyGroups extends React.Component {
                         this.showGroupMembers(e, group, true)
                     }} title={tt('group_members_jsx.check_pending_hint')}>
                         <Icon name='voters' size='0_95x' />
-                        <span className='btn-title'>{tt('group_members_jsx.check_pending') + ' (' + pendings + ')'}</span>
+                        <span className='btn-title'>
+                            {(isSmall ? '' : tt('group_members_jsx.check_pending')) + ' (' + pendings + ')'}
+                        </span>
                     </button> : null}
-                    <button className='button' onClick={e => {
+                    <button className={cn('button', {
+                        'icon-only': (isSmall || pendings || amPending)
+                    })} onClick={e => {
                         this.showGroupMembers(e, group)
-                    }}>
+                    }} title={(isSmall || pendings || amPending) ? tt('my_groups_jsx.members') : null}>
                         <Icon name='voters' size='0_95x' />
                         <span className='btn-title'>{tt('my_groups_jsx.members')}</span>
                     </button>

src/components/modules/groups/MyGroups.scss

@@ -39,4 +39,9 @@
         margin-left: 5px;
         vertical-align: middle;
     }
+    .button.icon-only {
+        .btn-title {
+            display: none;
+        }
+    }
 }

src/components/pages/Messages.jsx

@@ -34,7 +34,7 @@ import { getProfileImage, } from 'app/utils/NormalizeProfile';
 import { normalizeContacts, normalizeMessages, cacheMyOwnMsg } from 'app/utils/Normalizators';
 import { fitToPreview } from 'app/utils/ImageUtils';
 import { notificationSubscribe, notificationSubscribeWs, notifyWsPing,
-    notificationShallowUnsubscribe, notificationTake, queueWatch, sendOffchainMessage } from 'app/utils/NotifyApiClient';
+    notificationShallowUnsubscribe, notificationTake, queueWatch, sendOffchainMessage, notifyWsHost, notifyUrl } from 'app/utils/NotifyApiClient';
 import { flash, unflash } from 'app/components/elements/messages/FlashTitle';
 import { addShortcut } from 'app/utils/app/ShortcutUtils'
 import { hideSplash } from 'app/utils/app/SplashUtils'
@@ -51,6 +51,7 @@ class Messages extends React.Component {
             selectedMessages: {},
             searchContacts: null,
             notifyErrors: 0,
+            errorLogs: [],
         };
         this.cachedProfileImages = {};
         this.windowFocused = true;
@@ -78,7 +79,6 @@ class Messages extends React.Component {
         //alert('scrollToMention ' + messages.length)
         let nonce
         for (const msg of messages) {
-            console.log(msg.read_date)
             if (msg.to === username && msg.read_date && msg.read_date.startsWith('1970')) {
                 nonce = msg.nonce
                 break
@@ -185,13 +185,19 @@ class Messages extends React.Component {
         if (this.state.notifyErrors)
             this.setState({
                 notifyErrors: 0,
+                errorLogs: [],
             });
     };
 
-    notifyErrorsInc = (score) => {
+    notifyErrorsInc = (score, err, errDetails) => {
         this.setState({
             notifyErrors: this.state.notifyErrors + score,
         });
+        if (err) {
+            this.setState({
+                errorLogs: [...this.state.errorLogs, { err, details: errDetails }],
+            })
+        }
     };
 
     checkLoggedOut = (username) => {
@@ -256,7 +262,7 @@ class Messages extends React.Component {
             return true
         } catch (err) {
             console.error('watchGroup - ', to, err)
-            this.notifyErrorsInc(30)
+            this.notifyErrorsInc(30, err, notifyUrl())
         }
         return false
     }
@@ -309,7 +315,7 @@ class Messages extends React.Component {
             console.log('WSS:', subscribed)
         } catch (ex) {
             console.error('notificationSubscribe', ex)
-            this.notifyErrorsInc(15)
+            this.notifyErrorsInc(15, ex, notifyWsHost())
             setTimeout(() => {
                 this.setCallback(username)
             }, 5000)
@@ -330,12 +336,11 @@ class Messages extends React.Component {
                     this.notifyErrorsClear()
                 } catch (err) {
                     console.error('Notify ping failed', err)
-                    this.notifyErrorsInc(10)
+                    this.notifyErrorsInc(10, err, notifyWsHost())
                 }
             }
             setTimeout(ping, 10000)
         }
-        ping(true)
         this.watchGroup(this.props.to)
     }
 
@@ -898,13 +903,14 @@ class Messages extends React.Component {
     _renderMessagesTopCenter = ({ isSmall }) => {
         const { to } = this.props
         const toAcc = this.getToAcc()
-        const { notifyErrors } = this.state
+        const { notifyErrors, errorLogs, } = this.state
 
         return <MessagesTopCenter 
             isSmall={isSmall}
             to={to}
             toAcc={toAcc}
             notifyErrors={notifyErrors}
+            errorLogs={errorLogs}
         />
     };
 
@@ -966,7 +972,7 @@ class Messages extends React.Component {
         return (<LinkWithDropdown
                 closeOnClickOutside
                 dropdownPosition='bottom'
-                dropdownAlignment='bottom'
+                dropdownAlignment='right'
                 dropdownContent={<VerticalMenu className={'VerticalMenu_nav-profile'} items={menuItems} />}
             >
                 <div className='msgs-curruser'>

src/locales/en.json

@@ -107,7 +107,7 @@
     "new_message5": " notifications",
     "invalid_message": "(This message could not be displayed in Golos Messenger)",
     "sync_error": "Sync error. To receive new messages please refresh the page.",
-    "sync_error_short": "Sync error. To receive new messages touch ",
+    "sync_error_short": "Sync error. ",
     "blocked_BY": "You are blocked by @%(BY)s.",
     "do_not_bother_BY": "@%(BY)s wants to not be bothered by low-reputation users."
   },
@@ -156,8 +156,11 @@
     "submit": "Create",
     "step_name": "Name",
     "step_logo": "Logo",
+    "step_logo_mobile": "Logo",
     "step_members": "Members",
+    "step_members_mobile": "Membs",
     "step_create": "Create!",
+    "step_create_mobile": "Go!",
     "group_already_exists": "Group already exists.",
     "group_min_length": "Min is 3 symbols.",
     "golos_power_too_low": "To create group you should have Golos Power at least ",
@@ -374,6 +377,7 @@
     "name": "Name",
     "night_mode": "Night Mode",
     "ok": "OK",
+    "or": "or",
     "refresh": "Refresh",
     "required": "Required",
     "replies": "Replies",

src/locales/ru-RU.json

@@ -108,7 +108,7 @@
     "new_message5": " новых сообщений",
     "invalid_message": "(Это сообщение не может быть отображено в Golos Messenger)",
     "sync_error": "Ошибка синхронизации. Для получения новых сообщений обновляйте страницу.",
-    "sync_error_short": "Ошибка синхронизации. Для получения новых сообщений нажимайте ",
+    "sync_error_short": "Ошибка синхронизации. ",
     "blocked_BY": "Вы заблокированы пользователем @%(BY)s.",
     "do_not_bother_BY": "@%(BY)s просит пользователей с низкой репутацией не беспокоить.",
     "too_low_gp": "Не хватает Силы Голоса. Для участия в группах нужно не менее ",
@@ -162,8 +162,11 @@
     "submit": "Создать",
     "step_name": "Имя",
     "step_logo": "Логотип",
+    "step_logo_mobile": "Лого",
     "step_members": "Участники",
+    "step_members_mobile": "Люди",
     "step_create": "Создать!",
+    "step_create_mobile": "Go!",
     "group_already_exists": "Такая группа уже существует.",
     "validating": "Проверка существования группы...",
     "group_min_length": "Минимум 3 символа.",

src/utils/NotifyApiClient.js

@@ -14,13 +14,13 @@ const notifyAvailable = () => {
         && $GLS_Config.notify_service && $GLS_Config.notify_service.host;
 };
 
-const notifyWsAvailable = () => {
+export function notifyWsHost() {
     return notifyAvailable() && $GLS_Config.notify_service.host_ws
 }
 
-const notifyUrl = (pathname) => {
+export function notifyUrl(pathname = '') {
     return new URL(pathname, window.$GLS_Config.notify_service.host).toString();
-};
+}
 
 function notifySession() {
     return localStorage.getItem('X-Session')
@@ -50,7 +50,7 @@ async function connectNotifyWs() {
             window.notifyWs.close()
         }
         await new Promise((resolve, reject) => {
-            const notifyWs = new WebSocket($GLS_Config.notify_service.host_ws)
+            const notifyWs = new WebSocket(notifyWsHost())
             window.notifyWs = notifyWs
 
             const timeout = setTimeout(() => {
@@ -211,7 +211,7 @@ export async function notificationSubscribe(account, scopes = 'message,donate_ms
 }
 
 export async function notificationSubscribeWs(account, callback, scopes = 'message,donate_msgs', sidKey = '__subscriber_id') {
-    if (!notifyWsAvailable()) return null
+    if (!notifyWsHost()) return null
     const xSession = notifySession()
     return await new Promise(async (resolve, reject) => {
         await notifyWsSend('queues/subscribe', {
@@ -327,7 +327,7 @@ export async function queueWatch(account, group, sidKey = '__subscriber_id') {
 }
 
 export async function queueWatchWs(account, group, sidKey = '__subscriber_id') {
-    if (!notifyWsAvailable()) return null
+    if (!notifyWsHost()) return null
     const xSession = notifySession()
     return await new Promise(async (resolve, reject) => {
         await notifyWsSend('queues/subscribe', {

src/utils/app/SplashUtils.js

@@ -1,10 +1,13 @@
 
 export function hideSplash() {
-    if (process.env.MOBILE_APP) {
-        try {
+    try {
+        if (process.env.MOBILE_APP) {
             navigator.splashscreen.hide()
-        } catch (err) {
-            console.error('hideSplash', err)
+        } else if (process.env.DESKTOP_APP) {
+            if (window.appSplash)
+                window.appSplash.contentLoaded()
         }
+    } catch (err) {
+        console.error('hideSplash', err)
     }
 }