HF 30 - Private groups

golos-blockchain · Aug 5, 2024 · cfb5c85 · cfb5c85
1 parent e1b850c
commit cfb5c85
Show file tree

Hide file tree

Showing 16 changed files with 432 additions and 165 deletions.
diff --git a/src/components/dialogs/LoginDialog/index.jsx b/src/components/dialogs/LoginDialog/index.jsx
@@ -10,8 +10,6 @@ import keyCodes from 'app/utils/keyCodes';
 import { pageSession } from 'app/redux/UserSaga'
 
 export function showLoginDialog(username, onClose, authType = 'active', saveLogin = false, hint = '') {
-    let dm, oldZ = ''
-
     DialogManager.showDialog({
         component: LoginDialog,
         adaptive: true,
@@ -21,16 +19,9 @@ export function showLoginDialog(username, onClose, authType = 'active', saveLogi
             hint,
         },
         onClose: (data) => {
-            if (dm) dm.style.zIndex = oldZ
             if (onClose) onClose(data)
         },
     });
-
-    setTimeout(() => {
-        dm = document.getElementsByClassName('DialogManager')[0]
-        oldZ = dm ? dm.style.zIndex : ''
-        if (dm) dm.style.zIndex = 1000
-    }, 1)
 }
 
 export default class LoginDialog extends React.PureComponent {

diff --git a/src/components/elements/common/DialogManager/index.scss b/src/components/elements/common/DialogManager/index.scss
@@ -5,7 +5,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 500;
+  z-index: 1000;
 
   &__window {
     position: absolute;

diff --git a/src/components/elements/groups/GroupMember.jsx b/src/components/elements/groups/GroupMember.jsx
@@ -5,7 +5,7 @@ import cn from 'classnames'
 import Icon from 'app/components/elements/Icon'
 import TimeAgoWrapper from 'app/components/elements/TimeAgoWrapper'
 import Userpic from 'app/components/elements/Userpic'
-import { getMemberType } from 'app/utils/groups'
+import { getRoleInGroup } from 'app/utils/groups'
 
 class GroupMember extends React.Component {
     // shouldComponentUpdate(nextProps) {
@@ -54,10 +54,13 @@ class GroupMember extends React.Component {
     render() {
         const { member, username, currentGroup } = this.props
         const { account, member_type, joined } = member
-        const { creatingNew, member_list } = currentGroup
+        const { creatingNew, } = currentGroup
 
-        const amOwner = currentGroup.owner === username
-        const amModer = amOwner || (member_list && getMemberType(member_list, username) === 'moder')
+        let { amOwner, amModer } = getRoleInGroup(currentGroup, username)
+        if (creatingNew) {
+            amOwner = true
+            amModer = true
+        }
 
         const isMe = username === account
         const isOwner = currentGroup.owner === account
@@ -86,7 +89,7 @@ class GroupMember extends React.Component {
             if ((!isMe || isBanned) && amModer) {
                 banBtn = <Icon className={cn('member-btn ban', { selected: isBanned })}
                     title={banTitle} name='ionicons/ban' size='1_25x'
-                    onClick={e => this.groupMember(e, member, 'banned')} />
+                    onClick={e => this.groupMember(e, member, isBanned ? 'member' : 'banned')} />
             }
         } else {
             deleteBtn = <Icon className={'member-btn delete'} title={tt('g.delete')} name='cross' size='1x'
@@ -112,7 +115,7 @@ class GroupMember extends React.Component {
                 {(amOwner || isMember) && <Icon className={cn('member-btn member', { selected: isMember })}
                     title={memberTitle} 
                     name='ionicons/person' size='1_5x' onClick={e => this.groupMember(e, member, 'member')} />}
-                {(amOwner || isModer) && <Icon className={cn('member-btn moder', { selected: isModer })}
+                {(amOwner|| isModer) && <Icon className={cn('member-btn moder', { selected: isModer })}
                     title={moderTitle}
                     name='ionicons/person-add' size='1_5x' onClick={e => this.groupMember(e, member, 'moder')} />}
                 {banBtn}

diff --git a/src/components/modules/MessagesTopCenter.jsx b/src/components/modules/MessagesTopCenter.jsx
@@ -28,6 +28,21 @@ class MessagesTopCenter extends React.Component {
     }
 
     openDropdown = (e) => {
+        e.preventDefault()
+        let isInside = false
+        let node = e.target
+        while (node.parentNode) {
+            if (node.className.includes('msgs-group-dropdown')) {
+                isInside = true
+                return
+            }
+            node = node.parentNode
+        }
+        if (isInside) return
+        this.dropdown.current.click()
+    }
+
+    closeDropdown = (e) => {
         e.preventDefault()
         this.dropdown.current.click()
     }
@@ -36,7 +51,8 @@ class MessagesTopCenter extends React.Component {
         e.preventDefault()
         const { the_group } = this.props
         if (!the_group) return
-        this.props.showGroupMembers({ group: the_group })
+        const { name } = the_group
+        this.props.showGroupMembers({ group: name })
     }
 
     editGroup = (e) => {
@@ -136,36 +152,29 @@ class MessagesTopCenter extends React.Component {
         if (btnType) {
             const onBtnClick = async (e) => {
                 e.preventDefault()
-                this.openDropdown(e)
+                setTimeout(() => {
+                    this.closeDropdown(e)
+                }, 500)
 
                 if (btnType === 'retire') {
+                    let retireWarning
+                    if (privacy !== 'public_group') {
+                        retireWarning = <span><br/>{tt('msgs_group_dropdown.joining_back_will_require_approval')}</span>
+                    }
+
                     const res = await DialogManager.dangerConfirm(<div>
-                        {tt('msgs_group_dropdown.are_you_sure_retire') + ' ' + title + '?'}</div>,
+                        {tt('msgs_group_dropdown.are_you_sure_retire') + ' ' + title + '?'}{retireWarning}</div>,
                         'GOLOS Messenger')
                     if (!res) return
                 }
 
-                const member_type = btnType === 'join' ? 'pending' : 'retired'
+                const groupPublic = privacy === 'public_group'
+                const member_type = btnType === 'join' ? (groupPublic ? 'member' : 'pending') : 'retired'
                 this.props.groupMember({
                     requester: username, group: name,
                     member: username,
                     member_type,
                     onSuccess: () => {
-                        let ml = []
-                        if (btnType === 'join') {
-                            ml.push({
-                                account: username,
-                                member_type: 'pending'
-                            })
-                        } else {
-                            ml = member_list.map(mem => {
-                                if (mem.account === username) {
-                                    mem.member_type = member_type
-                                }
-                                return mem
-                            })
-                        }
-                        this.props.updateMemberList(ml)
                     },
                     onError: (err, errStr) => {
                         alert(errStr)
@@ -197,9 +206,7 @@ class MessagesTopCenter extends React.Component {
             title={is_encrypted ? tt('msgs_group_dropdown.encrypted') : tt('msgs_group_dropdown.not_encrypted')}
             name={is_encrypted ? 'ionicons/lock-closed-outline' : 'ionicons/lock-open-outline'} />
 
-        return <div className='msgs-group-dropdown' onClick={e => {
-            e.stopPropagation()
-        }}>
+        return <div className='msgs-group-dropdown'>
             <img className='logo' src={logo} />
             <div className='title'>
                 <b>{title}</b>&nbsp;{lock}
@@ -211,7 +218,7 @@ class MessagesTopCenter extends React.Component {
                     <Icon name='new/more' size='0_95x' />
                 </DropdownMenu> : null}
                 <button className='button small hollow float-right' onClick={e => {
-                    this.openDropdown(e) // hides
+                    this.closeDropdown(e)
                     this.showGroupMembers(e)
                 }}>{tt('my_groups_jsx.members') + ' (' + totalMembers + ')'}</button>
                 {btn}
@@ -362,14 +369,11 @@ export default withRouter(connect(
             }));
         },
         showGroupMembers({ group }) {
-            dispatch(user.actions.showGroupMembers({ group }))
+            dispatch(user.actions.showGroupMembers({ group: ['the_group', group] }))
         },
         showGroupSettings({ group }) {
             dispatch(user.actions.showGroupSettings({ group }))
         },
-        updateMemberList(member_list) {
-            dispatch(g.actions.updateMemberList({ member_list }))
-        },
         deleteGroup: ({ owner, name, password,
         onSuccess, onError }) => {
             const opData = {

diff --git a/src/components/modules/MessagesTopCenter.scss b/src/components/modules/MessagesTopCenter.scss
@@ -53,6 +53,8 @@
         padding-left: 0.75rem;
         padding-bottom: 0.75rem;
         padding-right: 0.75rem;
+        min-width: 200px;
+
         .button {
             margin-right: 0px !important;
             &.margin {