From 5d150a82fec78862954742e81561535639146877 Mon Sep 17 00:00:00 2001
From: 1aerostorm <aerostorm1@gmail.com>
Date: Sat, 6 Jul 2024 20:10:26 +0300
Subject: [PATCH] HF 30 - Private group, some fixes

---
 .../elements/common/AccountName/index.jsx     | 45 ++++++++++++++++++-
 src/components/modules/CreateGroup.jsx        |  5 ++-
 src/components/modules/groups/GroupName.jsx   | 14 +++++-
 3 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/src/components/elements/common/AccountName/index.jsx b/src/components/elements/common/AccountName/index.jsx
index 11cf7c5a..8f0e6c70 100644
--- a/src/components/elements/common/AccountName/index.jsx
+++ b/src/components/elements/common/AccountName/index.jsx
@@ -8,10 +8,16 @@ import Userpic from 'app/components/elements/Userpic'
 class AccountName extends React.Component {
     constructor(props) {
         super(props)
+        this.state = {
+            defaultOptions: [],
+            isLoading: true,
+        }
+        this.ref = React.createRef()
     }
 
     lookupAccounts = async (value) => {
         try {
+            //await new Promise(resolve => setTimeout(resolve, 2000))
             const { includeFrozen, filterAccounts } = this.props
             const accNames = await api.lookupAccountsAsync(value.toLowerCase(), 6, {
                 include_frozen: includeFrozen,
@@ -33,16 +39,53 @@ class AccountName extends React.Component {
         }
     }
 
+    onMenuOpen = async (e) => {
+        const { current } = this.ref
+        if (!current) { console.warn('No AsyncSelect ref'); return; }
+        const target = current.inputRef
+        if (!target) { console.warn('No inputRef'); return; }
+        const { value } = target
+        if (!value) {
+            this.setState({
+                isLoading: true,
+                defaultOptions: []
+            }, async () => {
+                const defaultOptions = await this.lookupAccounts('')
+                this.setState({
+                    isLoading: false,
+                    defaultOptions
+                })
+            })
+        }
+    }
+
+    testIt = (e) => {
+        e.preventDefault()
+        console.log(this.state.dop)
+        if (this.state.dop === true)
+        this.setState({
+            dop: []
+        }); else this.setState({
+            dop: true
+        })
+    }
+
     render() {
         const { onChange, className, ...rest } = this.props
+        const { defaultOptions, isLoading } = this.state
+        // isOptionSelected = false disables blue bg if opened not first time
         return <AsyncSelect
             placeholder={tt('g.name')}
             loadingMessage={() => tt('account_name_jsx.loading')}
             noOptionsMessage={() => tt('account_name_jsx.no_options')}
 
             loadOptions={this.lookupAccounts}
-            defaultOptions={true}
+            isLoading={isLoading}
+            defaultOptions={defaultOptions}
             cacheOptions={false}
+            onMenuOpen={this.onMenuOpen}
+            ref={this.ref}
+            isOptionSelected={() => false}
 
             className={'AccountName ' + (className || ' ')}
             getOptionLabel={(option) => {
diff --git a/src/components/modules/CreateGroup.jsx b/src/components/modules/CreateGroup.jsx
index b238b77c..6c755e20 100644
--- a/src/components/modules/CreateGroup.jsx
+++ b/src/components/modules/CreateGroup.jsx
@@ -77,6 +77,7 @@ class CreateGroup extends React.Component {
             const gbgBalance = Asset(sbd_balance)
             if (gbgBalance.gte(cost)) {
                 this.setState({
+                    cost,
                     loaded: true
                 })
                 return
@@ -179,7 +180,7 @@ class CreateGroup extends React.Component {
     }
 
     render() {
-        const { step, loaded, createError, validators, submitError } = this.state
+        const { step, loaded, createError, validators, submitError, cost } = this.state
 
         let form
         if (!loaded) {
@@ -218,7 +219,7 @@ class CreateGroup extends React.Component {
             return (
         <Form>
 
-            {!isSubmitting ? (step === 'name' ? <GroupName values={values} applyFieldValue={applyFieldValue} /> :
+            {!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} /> :
diff --git a/src/components/modules/groups/GroupName.jsx b/src/components/modules/groups/GroupName.jsx
index 686865cd..35029ccd 100644
--- a/src/components/modules/groups/GroupName.jsx
+++ b/src/components/modules/groups/GroupName.jsx
@@ -79,7 +79,7 @@ export default class GroupName extends React.Component {
     }
 
     render() {
-        const { values } = this.props
+        const { values, cost } = this.props
         return <React.Fragment>
             <div className='row' style={{ marginTop: '1.0rem', marginBottom: '1.0rem' }}>
                 <div className='column small-5' style={{paddingTop: 5}}>
@@ -147,6 +147,18 @@ export default class GroupName extends React.Component {
                     <ErrorMessage name='is_encrypted' component='div' className='error' />
                 </div>
             </div>
+
+            {cost ? <div className='row' style={{ marginTop: '1.0rem', 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' }}>
+                            {tt('create_group_jsx.gbg_too_low')}
+                            <span style={{ color: '#0078C4' }}>{cost.floatString}</span>.
+                        </span>
+                    </b>
+                </div>
+            </div> : null}
         </React.Fragment>
     }
 }