HF 30 - Private group, finish members

src/components/elements/groups/GroupCost.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import tt from 'counterpart'
+
+import Icon from 'app/components/elements/Icon'
+
+export default class GroupCost extends React.Component {
+    state = {}
+
+    constructor(props) {
+        super(props)
+    }
+
+    render() {
+        let { cost, marginTop } = this.props
+        if (!cost) {
+            return null
+        }
+        marginTop = marginTop || '1.0rem'
+        const isFree = cost.eq(0)
+        const costTitle = isFree ? tt('create_group_jsx.create_of_group_is') : tt('create_group_jsx.gbg_too_low')
+        const costStr = isFree ? tt('create_group_jsx.free') : cost.floatString
+        return <div className='row' style={{ marginTop, marginBottom: '1.0rem' }}>
+                <div className='column small-12'>
+                    <b style={{ fontSize: '100%' }}>
+                        <Icon name='editor/coin' size='1x' />
+                        <span style={{ marginLeft: '0.35rem', verticalAlign: 'middle' }}>
+                            {costTitle}
+                            <span style={{ color: '#0078C4' }}>{costStr}</span>.
+                        </span>
+                    </b>
+                </div>
+        </div>
+    }
+}

src/components/modules/CreateGroup.jsx

@@ -138,29 +138,74 @@ class CreateGroup extends React.Component {
             submitError: ''
         })
 
+        let members = []
+        const { name } = data
+        let { groups } = this.props
+        if (groups) {
+            groups = groups.toJS()
+            const group = groups[name]
+            if (group) {
+                let mems = group.members
+                if (mems) {
+                    members = mems.data
+                }
+            }
+        }
+
         showLoginDialog(creator, (res) => {
             const password = res && res.password
             if (!password) {
                 actions.setSubmitting(false)
                 return
             }
-            this.props.privateGroup({
-                password,
-                ...data,
-                onSuccess: () => {
+            try {
+                const finalSuccess = () => {
                     actions.setSubmitting(false)
                     const { closeMe } = this.props
                     if (closeMe) closeMe()
                     if (redirectAfter) {
                         window.location.href = '/' + data.name
                         return
                     }
-                },
-                onError: (err, errStr) => {
-                    this.setState({ submitError: errStr })
-                    actions.setSubmitting(false)
                 }
-            })
+                this.props.privateGroup({
+                    password,
+                    ...data,
+                    onSuccess: () => {
+                        try {
+                            if (!members.length) {
+                                finalSuccess()
+                                return
+                            }
+
+                            this.props.groupMembers({
+                                requester: data.creator,
+                                name: data.name,
+                                members,
+                                onSuccess: () => {
+                                    finalSuccess()
+                                },
+                                onError: (err, errStr) => {
+                                    this.setState({ submitError: {
+                                        type: 'members', err: errStr } })
+                                    actions.setSubmitting(false)
+                                }
+                            })
+                        } catch (err) {
+                            this.setState({ submitError: {
+                                type: 'members', err: err.toString() } })
+                            actions.setSubmitting(false)
+                        }
+                    },
+                    onError: (err, errStr) => {
+                        this.setState({ submitError: errStr })
+                        actions.setSubmitting(false)
+                    }
+                })
+            } catch (err) {
+                this.setState({ submitError: err.toString() })
+                actions.setSubmitting(false)
+            }
         }, 'active')
     }
 
@@ -215,14 +260,17 @@ class CreateGroup extends React.Component {
         {({
             handleSubmit, isSubmitting, isValid, values, errors, setFieldValue, applyFieldValue, setFieldTouched, handleChange,
         }) => {
-            const disabled = !isValid || !!validators || !values.name
+            let disabled = !isValid || !!validators || !values.name
+            if (submitError && submitError.type === 'members') {
+                disabled = true
+            }
             return (
         <Form>
 
             {!isSubmitting ? (step === 'name' ? <GroupName values={values} applyFieldValue={applyFieldValue} cost={cost} /> :
             step === 'logo' ? <GroupLogo isValidating={!!validators} values={values} errors={errors} applyFieldValue={applyFieldValue} /> :
             step === 'members' ? <GroupMembers newGroup={values} applyFieldValue={applyFieldValue} /> :
-            step === 'final' ? <GroupFinal submitError={submitError} /> :
+            step === 'final' ? <GroupFinal newGroup={values} submitError={submitError} cost={cost} /> :
             <React.Fragment></React.Fragment>) : null}
 
             {!isSubmitting && <Stepper ref={this.stepperRef} steps={STEPS()} startStep={step}
@@ -254,9 +302,12 @@ export default connect(
         const currentUser = state.user.getIn(['current'])
         const currentAccount = currentUser && state.global.getIn(['accounts', currentUser.get('username')])
 
+        const groups = state.global.get('groups')
+
         return { ...ownProps,
             currentUser,
             currentAccount,
+            groups,
             redirectAfter: state.user.get('create_group_redirect_after'),
         }
     },
@@ -265,42 +316,78 @@ export default connect(
             dispatch(g.actions.receiveGroupMembers({
                 group, members: [], append: false }))
         },
-        privateGroup: ({ password, creator, name, title, logo, moders, is_encrypted, privacy,
+        privateGroup: ({ password, creator, name, title, logo, is_encrypted, privacy,
         onSuccess, onError }) => {
-            let json_metadata = {
+            const trx = []
+            let json_metadata, opData, json
+
+            json_metadata = {
                 app: 'golos-messenger',
                 version: 1,
                 title,
                 logo
             }
             json_metadata = JSON.stringify(json_metadata)
-
-            const opData = {
+            opData = {
                 creator,
                 name,
                 json_metadata,
                 is_encrypted,
                 privacy,
                 extensions: [],
             }
-
-            const json = JSON.stringify(['private_group', opData])
+            json = JSON.stringify(['private_group', opData])
+            trx.push(['custom_json', {
+                id: 'private_message',
+                required_auths: [creator],
+                json,
+            }])
 
             dispatch(transaction.actions.broadcastOperation({
                 type: 'custom_json',
-                operation: {
+                trx,
+                username: creator,
+                keys: [password],
+                successCallback: onSuccess,
+                errorCallback: (err, errStr) => {
+                    console.error(err)
+                    if (onError) onError(err, errStr)
+                },
+            }));
+        },
+        groupMembers: ({ requester, name, members,
+        onSuccess, onError }) => {
+            const trx = []
+            let opData, json
+
+            for (const mem of members) {
+                const { account, member_type, json_metadata } = mem
+                opData = {
+                    requester,
+                    name,
+                    member: account,
+                    member_type,
+                    json_metadata: '{}',
+                    extensions: [],
+                }
+                json = JSON.stringify(['private_group_member', opData])
+                trx.push(['custom_json', {
                     id: 'private_message',
-                    required_auths: [creator],
+                    required_posting_auths: [requester],
                     json,
-                },
-                username: creator,
-                password,
+                }])
+            }
+
+            dispatch(transaction.actions.broadcastOperation({
+                type: 'custom_json',
+                trx,
+                username: requester,
                 successCallback: onSuccess,
                 errorCallback: (err, errStr) => {
                     console.error(err)
                     if (onError) onError(err, errStr)
                 },
             }));
-        }
+        },
     })
 )(CreateGroup)

src/components/modules/groups/GroupFinal.jsx

@@ -1,8 +1,10 @@
 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 GroupCost from 'app/components/elements/groups/GroupCost'
 import ExtLink from 'app/components/elements/ExtLink'
 
 class GroupFinal extends React.Component {
@@ -13,6 +15,14 @@ class GroupFinal extends React.Component {
     }
 
     decorateSubmitError = (error) => {
+        if (error && error.type === 'members') {
+            return <React.Fragment>
+                {tt('create_group_jsx.cannot_set_members')}<br/>
+                {tt('create_group_jsx.cannot_set_members2')}<br/>
+                <br/>
+                {error.err}
+            </React.Fragment>
+        }
         if (error && error.startsWith && error.startsWith(tt('donate_jsx.insufficient_funds'))) {
             const { username } = this.props
             return <React.Fragment>
@@ -27,18 +37,57 @@ class GroupFinal extends React.Component {
     }
 
     render() {
-        const { submitError } = this.props
+        let { group, submitError, cost } = this.props
+        let moders = [], members = []
+        if (group) {
+            let allMembers = group.get('members')
+            if (allMembers) {
+                allMembers = allMembers.get('data').toJS()
+                const makeLink = (pgm) => {
+                    return <Link key={pgm.account} to={'/@' + pgm.account} target='_blank' rel='noopener noreferrer'>
+                        {'@' + pgm.account}
+                    </Link>
+                }
+                const addCommas = (arr) => {
+                    return arr.reduce((list, elem, i) => {
+                        const { key } = elem
+                        list.push(elem)
+                        if (i !== arr.length - 1) {
+                            list.push(<span key={key + '-comma'}>,&nbsp;</span>)
+                        }
+                        return list
+                    }, [])
+                }
+                for (const pgm of allMembers) {
+                    if (pgm.member_type === 'moder') {
+                        moders.push(makeLink(pgm))
+                    } else {
+                        members.push(makeLink(pgm))
+                    }
+                }
+                moders = addCommas(moders)
+                members = addCommas(members)
+            }
+        }
         return <React.Fragment>
-            <div className='row' style={{ marginTop: '0rem', marginBottom: '2rem' }}>
+            <div className='row' style={{ marginTop: '0rem' }}>
                 <div className='column small-12' style={{paddingTop: 5, }}>
                     <span style={{ fontSize: '110%' }}>
                         {tt('create_group_jsx.final_desc')}
                     </span>
+                    {moders.length ? <div style={{ marginTop: '0.75rem' }}>
+                        {tt('create_group_jsx.moders_list')}&nbsp;{moders}
+                    </div> : null}
+                    {members.length ? <div style={{ marginTop: '0.75rem' }}>
+                        {tt('create_group_jsx.members_list')}&nbsp;{members}
+                    </div> : null}
                     {submitError ? <div className='error' style={{ marginTop: '0.5rem' }}>
                         {this.decorateSubmitError(submitError)}
                         </div> : null}
                 </div>
             </div>
+
+            <GroupCost cost={cost} />
         </React.Fragment>
     }
 }
@@ -49,9 +98,17 @@ export default connect(
         const currentUser = state.user.getIn(['current'])
         const username = currentUser && currentUser.get('username')
 
+        const { newGroup } = ownProps
+        let currentGroup
+        if (newGroup) {
+            currentGroup = newGroup
+        }
+        const group = currentGroup && state.global.getIn(['groups', currentGroup.name])
+
         return {
             ...ownProps,
             username,
+            group,
         }
     },
     dispatch => ({

src/components/modules/groups/GroupMembers.jsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { Field, ErrorMessage, } from 'formik'
 import tt from 'counterpart'
-import { api } from 'golos-lib-js'
 import { validateAccountName } from 'golos-lib-js/lib/utils'
 
 import g from 'app/redux/GlobalReducer'
@@ -14,25 +13,7 @@ import LoadingIndicator from 'app/components/elements/LoadingIndicator'
 import { getGroupMeta, getGroupTitle } from 'app/utils/groups'
 
 export async function validateMembersStep(values, errors) {
-    /*if (!values.admin) {
-        errors.admin = tt('g.required')
-    } else {
-        const nameError = validateAccountName(values.admin)
-        if (nameError.error) {
-            errors.admin = tt('account_name.' + nameError.error)
-        } else {
-            try {
-                let accs = await api.getAccountsAsync([values.admin])
-                accs = accs[0]
-                if (!accs) {
-                    errors.admin = tt('g.username_does_not_exist')
-                }
-            } catch (err) {
-                console.error(err)
-                errors.admin = 'Blockchain unavailable :('
-            }
-        }
-    }*/
+    // nothing yet...
 }
 
 class GroupMembers extends React.Component {