HF 30 - Private message groups - members

golos-blockchain · Jun 27, 2024 · cb399b7 · cb399b7
1 parent 58e7238
commit cb399b7
Show file tree

Hide file tree

Showing 16 changed files with 548 additions and 167 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "react-notification": "^6.8.5",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
+    "react-select": "^5.8.0",
     "react-textarea-autosize": "^8.3.3",
     "redux": "^4.1.2",
     "redux-logger": "^3.0.6",

diff --git a/src/components/all.scss b/src/components/all.scss
@@ -8,6 +8,7 @@
 @import "./elements/VerticalMenu";
 @import "./elements/app/AppReminder";
 @import "./elements/app/LoginAppReminder";
+@import "./elements/common/AccountName/index";
 @import "./elements/common/DialogManager/index";
 @import "./elements/common/Input/index";
 @import './elements/donate/PresetSelector';

diff --git a/src/components/elements/common/AccountName/index.jsx b/src/components/elements/common/AccountName/index.jsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import tt from 'counterpart'
+import AsyncSelect from 'react-select/async'
+import { api } from 'golos-lib-js'
+
+import Userpic from 'app/components/elements/Userpic'
+
+class AccountName extends React.Component {
+    constructor(props) {
+        super(props)
+    }
+
+    lookupAccounts = async (value) => {
+        try {
+            const accNames = await api.lookupAccountsAsync(value.toLowerCase(), 6, true)
+            const accs = await api.lookupAccountNamesAsync(accNames)
+            return accs
+        } catch (err) {
+            console.error(err)
+            return []
+        }
+    }
+
+    onChange = (acc) => {
+        const { onChange } = this.props
+        if (onChange) {
+            const e = { target: { value: acc.name, account: acc } }
+            onChange(e, acc)
+        }
+    }
+
+    render() {
+        const { onChange, className, ...rest } = this.props
+        return <AsyncSelect
+            placeholder={tt('g.name')}
+            loadingMessage={tt('account_name_jsx.loading')}
+            noOptionsMessage={tt('account_name_jsx.no_options')}
+
+            loadOptions={this.lookupAccounts}
+            defaultOptions={true}
+            cacheOptions={true}
+
+            className={'AccountName ' + (className || ' ')}
+            getOptionLabel={(option) => {
+                return <span className='name-item'>
+                    <Userpic account={option.name} width={24} height={24} />
+                    <span className='title' style={{ verticalAlign: 'top' }}>{`${option.name}`}</span>
+                </span>
+            }}
+            controlShouldRenderValue={false}
+            onChange={this.onChange}
+            {...rest}
+        />
+    }
+}
+
+export default AccountName
diff --git a/src/components/elements/common/AccountName/index.scss b/src/components/elements/common/AccountName/index.scss
@@ -0,0 +1,14 @@
+.AccountName {
+    input {
+        box-shadow: none !important;
+        line-height: 1 !important;
+        height: 1.8rem !important;
+    }
+    .name-item {
+        margin-top: 0.45rem;
+        display: inline-block;
+        .title {
+            margin-left: 0.25rem;
+        }
+    }
+}
diff --git a/src/components/modules/CreateGroup.jsx b/src/components/modules/CreateGroup.jsx
@@ -16,15 +16,15 @@ import FormikAgent from 'app/components/elements/donate/FormikUtils'
 import Stepper from 'app/components/elements/messages/Stepper'
 import GroupName, { validateNameStep } from 'app/components/modules/groups/GroupName'
 import GroupLogo, { validateLogoStep } from 'app/components/modules/groups/GroupLogo'
-import GroupAdmin, { validateAdminStep } from 'app/components/modules/groups/GroupAdmin'
+import GroupMembers, { validateMembersStep } from 'app/components/modules/groups/GroupMembers'
 import GroupFinal from 'app/components/modules/groups/GroupFinal'
 import DialogManager from 'app/components/elements/common/DialogManager'
 import { showLoginDialog } from 'app/components/dialogs/LoginDialog'
 
 const STEPS = () => { return {
     name: tt('create_group_jsx.step_name'),
     logo: tt('create_group_jsx.step_logo'),
-    admin: tt('create_group_jsx.step_admin'),
+    members: tt('create_group_jsx.step_members'),
     final: tt('create_group_jsx.step_create')
 } }
 
@@ -35,14 +35,14 @@ class CreateGroup extends React.Component {
             step: 'name',
             validators: 0,
             initialValues: {
+                creatingNew: true,
+
                 title: '',
                 name: '',
                 is_encrypted: true,
                 privacy: 'public_group',
 
                 logo: '',
-
-                admin: '',
             }
         }
         this.stepperRef = React.createRef()
@@ -106,8 +106,8 @@ class CreateGroup extends React.Component {
             await validateNameStep(values, errors)
         } else if (step === 'logo') {
             await validateLogoStep(values, errors)
-        } else if (step === 'admin') {
-            await validateAdminStep(values, errors)
+        } else if (step === 'members') {
+            await validateMembersStep(values, errors)
         }
         await this.setValidating(false)
         return errors
@@ -205,7 +205,7 @@ class CreateGroup extends React.Component {
 
             {!isSubmitting ? (step === 'name' ? <GroupName values={values} applyFieldValue={applyFieldValue} /> :
             step === 'logo' ? <GroupLogo isValidating={!!validators} values={values} errors={errors} applyFieldValue={applyFieldValue} /> :
-            step === 'admin' ? <GroupAdmin values={values} applyFieldValue={applyFieldValue} /> :
+            step === 'members' ? <GroupMembers newGroup={values} applyFieldValue={applyFieldValue} /> :
             step === 'final' ? <GroupFinal submitError={submitError} /> :
             <React.Fragment></React.Fragment>) : null}
 
@@ -215,18 +215,19 @@ class CreateGroup extends React.Component {
             {isSubmitting ? <span className='submit-loader'><LoadingIndicator type='circle' /><br /></span>
             : <span>
                 <button onClick={this.goNext} disabled={disabled} className='button small next-button' title={validators ?
-                    tt('create_group_jsx.validating') : tt('create_group_jsx.submit')}>
+                    tt('create_group_jsx.validating') :
+                    step === 'final' ? tt('create_group_jsx.submit') : tt('create_group_jsx.next')}>
                     <Icon name='chevron-right' size='1_25x' />
                 </button>
             </span>}
         </Form>
         )}}</Formik>)
 
         return <div className='CreateGroup'>
-               <div className='row'>
-                   <h3>{tt('msgs_start_panel.create_group')}</h3>
-               </div>
-               {form}
+                <div className='row'>
+                    <h3>{tt('msgs_start_panel.create_group')}</h3>
+                </div>
+                {form}
         </div>
     }
 }
@@ -243,7 +244,7 @@ export default connect(
         }
     },
     dispatch => ({
-        privateGroup: ({ password, creator, name, title, logo, admin, is_encrypted, privacy,
+        privateGroup: ({ password, creator, name, title, logo, moders, is_encrypted, privacy,
         onSuccess, onError }) => {
             let json_metadata = {
                 app: 'golos-messenger',
@@ -257,7 +258,6 @@ export default connect(
                 creator,
                 name,
                 json_metadata,
-                admin: admin,
                 is_encrypted,
                 privacy,
                 extensions: [],

diff --git a/src/components/modules/Modals.jsx b/src/components/modules/Modals.jsx
@@ -7,6 +7,7 @@ import Reveal from 'react-foundation-components/lib/global/reveal';
 
 import CreateGroup from 'app/components/modules/CreateGroup'
 import GroupSettings from 'app/components/modules/groups/GroupSettings'
+import GroupMembers from 'app/components/modules/groups/GroupMembers'
 import MyGroups from 'app/components/modules/groups/MyGroups'
 import Donate from 'app/components/modules/Donate'
 import LoginForm from 'app/components/modules/LoginForm';
@@ -23,6 +24,7 @@ class Modals extends React.Component {
         show_create_group_modal: PropTypes.bool,
         show_my_groups_modal: PropTypes.bool,
         show_group_settings_modal: PropTypes.bool,
+        show_group_members_modal: PropTypes.bool,
         show_app_download_modal: PropTypes.bool,
         hideDonate: PropTypes.func.isRequired,
         hideAppDownload: PropTypes.func.isRequired,
@@ -47,12 +49,14 @@ class Modals extends React.Component {
             show_create_group_modal,
             show_my_groups_modal,
             show_group_settings_modal,
+            show_group_members_modal,
             show_app_download_modal,
             hideLogin,
             hideDonate,
             hideCreateGroup,
             hideMyGroups,
             hideGroupSettings,
+            hideGroupMembers,
             hideAppDownload,
             notifications,
             removeNotification,
@@ -67,28 +71,45 @@ class Modals extends React.Component {
             return n;
         }) : [];
 
+        const modalStyle = {
+            borderRadius: '8px',
+            boxShadow: '0 0 19px 3px rgba(0,0,0, 0.2)',
+            overflow: 'hidden',
+        }
+
         return (
             <div>
-                {show_login_modal && <Reveal onBackdropClick={this.onLoginBackdropClick} onHide={hideLogin} show={show_login_modal}>
+                {show_login_modal && <Reveal revealStyle={{ ...modalStyle, }} onBackdropClick={this.onLoginBackdropClick}
+                    onHide={hideLogin} show={show_login_modal}>
                     <LoginForm onCancel={hideLogin} />
                 </Reveal>}
-                {show_donate_modal && <Reveal revealStyle={{ overflow: 'hidden' }} onHide={hideDonate} show={show_donate_modal}>
+                {show_donate_modal && <Reveal revealStyle={{ ...modalStyle, }}
+                    onHide={hideDonate} show={show_donate_modal}>
                     <CloseButton onClick={hideDonate} />
                     <Donate />
                 </Reveal>}
-                {show_create_group_modal && <Reveal enforceFocus={false} onBackdropClick={this.onUnclosableClick} revealStyle={{ overflow: 'hidden' }} onHide={hideCreateGroup} show={show_create_group_modal}>
+                {show_create_group_modal && <Reveal enforceFocus={false} onBackdropClick={this.onUnclosableClick} revealStyle={{ ...modalStyle }}
+                    onHide={hideCreateGroup} show={show_create_group_modal}>
                     <CloseButton onClick={hideCreateGroup} />
                     <CreateGroup closeMe={hideCreateGroup} />
                 </Reveal>}
-                {show_my_groups_modal && <Reveal enforceFocus={false} revealStyle={{ overflow: 'hidden' }} onHide={hideMyGroups} show={show_my_groups_modal}>
+                {show_my_groups_modal && <Reveal enforceFocus={false} revealStyle={{ ...modalStyle, }}
+                    onHide={hideMyGroups} show={show_my_groups_modal}>
                     <CloseButton onClick={hideMyGroups} />
                     <MyGroups />
                 </Reveal>}
-                {show_group_settings_modal && <Reveal enforceFocus={false} revealStyle={{ overflow: 'hidden' }} onHide={hideGroupSettings} show={show_group_settings_modal}>
+                {show_group_settings_modal && <Reveal enforceFocus={false} revealStyle={{ ...modalStyle, }}
+                    onHide={hideGroupSettings} show={show_group_settings_modal}>
                     <CloseButton onClick={hideGroupSettings} />
                     <GroupSettings closeMe={hideGroupSettings} />
                 </Reveal>}
-                {show_app_download_modal && <Reveal onHide={hideAppDownload} show={show_app_download_modal}>
+                {show_group_members_modal && <Reveal enforceFocus={false} revealStyle={{ ...modalStyle, }}
+                    onHide={hideGroupMembers} show={show_group_members_modal}>
+                    <CloseButton onClick={hideGroupMembers} />
+                    <GroupMembers closeMe={hideGroupMembers} />
+                </Reveal>}
+                {show_app_download_modal && <Reveal revealStyle={{ ...modalStyle, }}
+                    onHide={hideAppDownload} show={show_app_download_modal}>
                     <CloseButton onClick={hideAppDownload} />
                     <AppDownload />
                 </Reveal>}
@@ -112,6 +133,7 @@ export default connect(
             show_create_group_modal: state.user.get('show_create_group_modal'),
             show_my_groups_modal: state.user.get('show_my_groups_modal'),
             show_group_settings_modal: state.user.get('show_group_settings_modal'),
+            show_group_members_modal: state.user.get('show_group_members_modal'),
             show_app_download_modal: state.user.get('show_app_download_modal'),
             loginUnclosable,
             notifications: state.app.get('notifications'),
@@ -138,6 +160,10 @@ export default connect(
             if (e) e.preventDefault()
             dispatch(user.actions.hideGroupSettings())
         },
+        hideGroupMembers: e => {
+            if (e) e.preventDefault()
+            dispatch(user.actions.hideGroupMembers())
+        },
         hideAppDownload: e => {
             if (e) e.preventDefault()
             dispatch(user.actions.hideAppDownload())

diff --git a/src/components/modules/groups/GroupAdmin.jsx b/src/components/modules/groups/GroupAdmin.jsx