HF 30 - Fix apps (desktop, Android)

golos-blockchain · Oct 24, 2024 · eda61e6 · eda61e6
1 parent 2682be6
commit eda61e6
Show file tree

Hide file tree

Showing 16 changed files with 148 additions and 43 deletions.
diff --git a/config/mobile.json b/config/mobile.json
@@ -17,7 +17,8 @@
       "custom_client": "blogs"
     },
     "notify_service": {
-      "host": "https://notify.golos.app"
+      "host": "https://notify.golos.app",
+      "host_ws": "wss://notify.golos.app/ws"
     },
     "blogs_service": {
       "host": "https://golos.id"

diff --git a/src/components/elements/VerticalMenu.scss b/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');

diff --git a/src/components/elements/groups/GroupMember.jsx b/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')}

diff --git a/src/components/modules/CreateGroup.jsx b/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() {

diff --git a/src/components/modules/MessagesTopCenter.jsx b/src/components/modules/MessagesTopCenter.jsx
@@ -229,6 +229,31 @@ class MessagesTopCenter extends React.Component {
         </div>
     }
 
+    showErrorLogs = (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        try {
+            const { errorLogs } = this.props
+            let msg = ''
+            for (const err of errorLogs) {
+                msg += (err.err ? err.err.toString() : '') + '\n' + JSON.stringify(err.details) + '\n\n'
+            }
+            alert(msg)
+        } catch (err) {
+            alert('Cannot display error logs, due to: ' + (err && err.toString()))
+        }
+    }
+
+    refreshSync = e => {
+        this.setState({ refreshing: true })
+        e.preventDefault()
+        e.stopPropagation()
+        this.props.fetchState(this.props.to) 
+        setTimeout(() => {
+            this.setState({ refreshing: false })
+        }, 500)
+    }
+
     render() {
         let avatar = []
         let items = []
@@ -257,7 +282,7 @@ class MessagesTopCenter extends React.Component {
                     closeOnClickOutside
                     dropdownClassName="GroupDropdown"
                     dropdownPosition="bottom"
-                    dropdownAlignment="center"
+                    dropdownAlignment="right"
                     dropdownContent={this._renderGroupDropdown()}
                     transition={Fade}
                 >
@@ -282,12 +307,13 @@ class MessagesTopCenter extends React.Component {
         }
 
         if (notifyErrors >= 30) {
+            const { refreshing } = this.state
             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={this.refreshSync}>
+                            {refreshing ? '...' : tt('g.refresh')}.
                         </a>
                     </span> :
                     <span>{tt('messages.sync_error')}</span>

diff --git a/src/components/modules/groups/MyGroups.jsx b/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>

diff --git a/src/components/modules/groups/MyGroups.scss b/src/components/modules/groups/MyGroups.scss
@@ -39,4 +39,9 @@
         margin-left: 5px;
         vertical-align: middle;
     }
+    .button.icon-only {
+        .btn-title {
+            display: none;
+        }
+    }
 }
diff --git a/src/components/pages/Messages.jsx b/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'
@@ -44,6 +44,7 @@ import { proxifyImageUrl } from 'app/utils/ProxifyUrl'
 class Messages extends React.Component {
     constructor(props) {
         super(props);
+        window.errorLogs = window.errorLogs || []
         this.state = {
             contacts: [],
             messages: [],
@@ -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
@@ -182,16 +182,21 @@ class Messages extends React.Component {
     }
 
     notifyErrorsClear = () => {
-        if (this.state.notifyErrors)
+        if (this.state.notifyErrors) {
+            window.errorLogs = []
             this.setState({
                 notifyErrors: 0,
             });
+        }
     };
 
-    notifyErrorsInc = (score) => {
+    notifyErrorsInc = (score, err, errDetails) => {
         this.setState({
             notifyErrors: this.state.notifyErrors + score,
         });
+        if (err) {
+            window.errorLogs.push({ err, details: errDetails })
+        }
     };
 
     checkLoggedOut = (username) => {
@@ -256,7 +261,7 @@ class Messages extends React.Component {
             return true
         } catch (err) {
             console.error('watchGroup - ', to, err)
-            this.notifyErrorsInc(30)
+            this.notifyErrorsInc(30, err, {watchGroup: notifyUrl()})
         }
         return false
     }
@@ -309,7 +314,7 @@ class Messages extends React.Component {
             console.log('WSS:', subscribed)
         } catch (ex) {
             console.error('notificationSubscribe', ex)
-            this.notifyErrorsInc(15)
+            this.notifyErrorsInc(15, ex, {subscribeWs: notifyWsHost()})
             setTimeout(() => {
                 this.setCallback(username)
             }, 5000)
@@ -330,12 +335,11 @@ class Messages extends React.Component {
                     this.notifyErrorsClear()
                 } catch (err) {
                     console.error('Notify ping failed', err)
-                    this.notifyErrorsInc(10)
+                    this.notifyErrorsInc(10, err, {wsPing: notifyWsHost()})
                 }
             }
             setTimeout(ping, 10000)
         }
-        ping(true)
         this.watchGroup(this.props.to)
     }
 
@@ -373,6 +377,9 @@ class Messages extends React.Component {
         if (this.props.to !== prevProps.to || (this.isChat() && loggedNow)) {
             this.checkUserAuth()
         }
+        if (prevProps.username && !this.props.username) {
+            this.checkUserAuth(true)
+        }
         if (loggedNow) {
             this.props.fetchState(this.props.to);
             this.setCallback(this.props.username)
@@ -896,15 +903,17 @@ class Messages extends React.Component {
     };
 
     _renderMessagesTopCenter = ({ isSmall }) => {
-        const { to } = this.props
+        const { fetchState, to } = this.props
         const toAcc = this.getToAcc()
-        const { notifyErrors } = this.state
+        const { notifyErrors, } = this.state
 
         return <MessagesTopCenter 
             isSmall={isSmall}
             to={to}
             toAcc={toAcc}
             notifyErrors={notifyErrors}
+            errorLogs={window.errorLogs}
+            fetchState={fetchState}
         />
     };
 
@@ -966,7 +975,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'>

diff --git a/src/components/pages/app/AppSettings.jsx b/src/components/pages/app/AppSettings.jsx
@@ -14,6 +14,7 @@ class AppSettings extends React.Component {
             use_img_proxy: $GLS_Config.images.use_img_proxy,
             auth_service: $GLS_Config.auth_service.host,
             notify_service: $GLS_Config.notify_service.host,
+            notify_service_ws: $GLS_Config.notify_service.host_ws,
             blogs_service: $GLS_Config.blogs_service.host,
         }
         this.initialValues = initialValues
@@ -78,6 +79,7 @@ class AppSettings extends React.Component {
         cfg.images.use_img_proxy = data.use_img_proxy
         cfg.auth_service.host = data.auth_service
         cfg.notify_service.host = data.notify_service
+        cfg.notify_service.host_ws = data.notify_service_ws
         cfg.blogs_service.host = data.blogs_service
         cfg = JSON.stringify(cfg)
         localStorage.setItem('app_settings', cfg)
@@ -164,6 +166,17 @@ class AppSettings extends React.Component {
                             </div>
                         </div>
                     </div>
+                    <div className='row'>
+                        <div className='column small-12' style={{paddingTop: 5}}>
+                            {tt('app_settings.notify_service_ws')}
+                            <div className='input-group' style={{marginBottom: '1.25rem'}}>
+                                <Field name='notify_service_ws'
+                                    type='text'
+                                    autoComplete='off'
+                                />
+                            </div>
+                        </div>
+                    </div>
                     <div className='row'>
                         <div className='column small-12' style={{paddingTop: 5}}>
                             {tt('app_settings.blogs_service')}

diff --git a/src/locales/en.json b/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 ",
@@ -313,7 +316,8 @@
     "current_node": "GOLOS node URL",
     "img_proxy_prefix": "Use Proxy For Images",
     "auth_service": "Golos Auth & Registration Service (for messenger)",
-    "notify_service": "Golos Notify Service (for messenger)",
+    "notify_service": "Golos Notify Service (for instant messages)",
+    "notify_service_ws": "Golos Notify Service WebSocket (for instant messages)",
     "blogs_service": "Blogs",
     "save": "Save",
     "node_error_NODE": "Cannot connect to %(NODE)s. It may be internet failure. Try ",
@@ -374,6 +378,7 @@
     "name": "Name",
     "night_mode": "Night Mode",
     "ok": "OK",
+    "or": "or",
     "refresh": "Refresh",
     "required": "Required",
     "replies": "Replies",