[Registry dApp] Actions not available before selecting accounts (#3032)

* Removed hasAccount from actions, now in Application [RegDapp] (#2931)

* Linting issues

js/src/dapps/registry/Application/application.css

@@ -37,3 +37,15 @@
   font-size: 80%;
   background-color: #f0f0f0;
 }
+
+.actions {
+  margin: 1em;
+
+  * {
+    font-size: 1.3rem !important;
+  }
+
+  > * {
+    padding-bottom: 0 !important;
+  }
+}

js/src/dapps/registry/Application/application.js

@@ -20,6 +20,7 @@ import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
 const muiTheme = getMuiTheme(lightBaseTheme);
 
 import CircularProgress from 'material-ui/CircularProgress';
+import { Card, CardText } from 'material-ui/Card';
 import styles from './application.css';
 import Accounts from '../Accounts';
 import Events from '../Events';
@@ -57,9 +58,7 @@ export default class Application extends Component {
       accounts, contacts,
       contract, fee,
       lookup,
-      events,
-      names,
-      records
+      events
     } = this.props;
 
     return (
@@ -71,8 +70,9 @@ export default class Application extends Component {
         { contract && fee ? (
           <div>
             <Lookup { ...lookup } accounts={ accounts.all } contacts={ contacts } actions={ actions.lookup } />
-            <Names { ...names } fee={ fee } actions={ actions.names } />
-            <Records { ...records } actions={ actions.records } />
+
+            { this.renderActions() }
+
             <Events { ...events } accounts={ accounts.all } contacts={ contacts } actions={ actions.events } />
             <p className={ styles.address }>
               The Registry is provided by the contract at <code>{ contract.address }.</code>
@@ -85,4 +85,34 @@ export default class Application extends Component {
     );
   }
 
+  renderActions () {
+    const {
+      actions,
+      accounts,
+      fee,
+      names,
+      records
+    } = this.props;
+
+    const hasAccount = !!accounts.selected;
+
+    if (!hasAccount) {
+      return (
+        <Card className={ styles.actions }>
+          <CardText>
+            Please select a valid account in order
+            to execute actions.
+          </CardText>
+        </Card>
+      );
+    }
+
+    return (
+      <div>
+        <Names { ...names } fee={ fee } actions={ actions.names } />
+        <Records { ...records } actions={ actions.records } />
+      </div>
+    );
+  }
+
 }

js/src/dapps/registry/Names/names.js

@@ -77,7 +77,6 @@ export default class Names extends Component {
   static propTypes = {
     actions: PropTypes.object.isRequired,
     fee: PropTypes.object.isRequired,
-    hasAccount: PropTypes.bool.isRequired,
     pending: PropTypes.bool.isRequired,
     queue: PropTypes.array.isRequired
   }
@@ -89,20 +88,18 @@ export default class Names extends Component {
 
   render () {
     const { action, name } = this.state;
-    const { fee, hasAccount, pending, queue } = this.props;
+    const { fee, pending, queue } = this.props;
 
     return (
       <Card className={ styles.names }>
         <CardHeader title={ 'Manage Names' } />
         <CardText>
-          { !hasAccount
-            ? (<p className={ styles.noSpacing }>Please select an account first.</p>)
-            : (action === 'reserve'
-                ? (<p className={ styles.noSpacing }>
-                  The fee to reserve a name is <code>{ fromWei(fee).toFixed(3) }</code>ETH.
-                </p>)
-                : (<p className={ styles.noSpacing }>To drop a name, you have to be the owner.</p>)
-              )
+          { (action === 'reserve'
+              ? (<p className={ styles.noSpacing }>
+                The fee to reserve a name is <code>{ fromWei(fee).toFixed(3) }</code>ETH.
+              </p>)
+              : (<p className={ styles.noSpacing }>To drop a name, you have to be the owner.</p>)
+            )
           }
           <TextField
             hintText='name'
@@ -110,7 +107,7 @@ export default class Names extends Component {
             onChange={ this.onNameChange }
           />
           <DropDownMenu
-            disabled={ !hasAccount || pending }
+            disabled={ pending }
             value={ action }
             onChange={ this.onActionChange }
           >
@@ -118,7 +115,7 @@ export default class Names extends Component {
             <MenuItem value='drop' primaryText='drop this name' />
           </DropDownMenu>
           <RaisedButton
-            disabled={ !hasAccount || pending }
+            disabled={ pending }
             className={ styles.spacing }
             label={ action === 'reserve' ? 'Reserve' : 'Drop' }
             primary

js/src/dapps/registry/Names/reducers.js

@@ -15,16 +15,11 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 const initialState = {
-  hasAccount: false,
   pending: false,
   queue: []
 };
 
 export default (state = initialState, action) => {
-  if (action.type === 'accounts select') {
-    return { ...state, hasAccount: !!action.address };
-  }
-
   if (action.type === 'names reserve start') {
     return { ...state, pending: true };
   }

js/src/dapps/registry/Records/records.js

@@ -11,7 +11,6 @@ export default class Records extends Component {
 
   static propTypes = {
     actions: PropTypes.object.isRequired,
-    hasAccount: PropTypes.bool.isRequired,
     pending: PropTypes.bool.isRequired,
     name: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
@@ -21,7 +20,7 @@ export default class Records extends Component {
   state = { name: '', type: 'A', value: '' };
 
   render () {
-    const { hasAccount, pending } = this.props;
+    const { pending } = this.props;
     const name = this.state.name || this.props.name;
     const type = this.state.type || this.props.type;
     const value = this.state.value || this.props.value;
@@ -30,10 +29,10 @@ export default class Records extends Component {
       <Card className={ styles.records }>
         <CardHeader title={ 'Manage Entries of a Name' } />
         <CardText>
-          { !hasAccount
-            ? (<p className={ styles.noSpacing }>Please select an account first.</p>)
-            : (<p className={ styles.noSpacing }>You can only modify entries of names that you previously registered.</p>)
-          }
+          <p className={ styles.noSpacing }>
+            You can only modify entries of names that you previously registered.
+          </p>
+
           <TextField
             className={ styles.spacing }
             hintText='name'
@@ -48,7 +47,7 @@ export default class Records extends Component {
             onChange={ this.onValueChange }
           />
           <RaisedButton
-            disabled={ !hasAccount || pending }
+            disabled={ pending }
             className={ styles.spacing }
             label='Save'
             primary

js/src/dapps/registry/Records/reducers.js

@@ -1,14 +1,9 @@
 const initialState = {
-  hasAccount: false,
   pending: false,
   name: '', type: '', value: ''
 };
 
 export default (state = initialState, action) => {
-  if (action.type === 'accounts select') {
-    return { ...state, hasAccount: !!action.address };
-  }
-
   if (action.type === 'records update start') {
     return {
       ...state,