added token queries per tla or address (#2123)

js/src/dapps/tokenreg/Actions/Query/index.js

@@ -0,0 +1 @@
+export default from './query';

js/src/dapps/tokenreg/Actions/Query/query.js

@@ -0,0 +1,176 @@
+import React, { Component, PropTypes } from 'react';
+
+import { Dialog, FlatButton, SelectField, MenuItem } from 'material-ui';
+
+import InputText from '../../Inputs/Text';
+import Loading from '../../Loading';
+
+import { SIMPLE_TOKEN_ADDRESS_TYPE, SIMPLE_TLA_TYPE } from '../../Inputs/validation';
+
+import styles from '../actions.css';
+
+const initState = {
+  queryKey: 'tla',
+  form: {
+    valid: false,
+    value: ''
+  }
+};
+
+export default class QueryAction extends Component {
+
+  static propTypes = {
+    show: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    handleQueryToken: PropTypes.func.isRequired,
+
+    loading: PropTypes.bool.isRequired,
+    data: PropTypes.object,
+    notFound: PropTypes.bool
+  }
+
+  state = initState;
+
+  render () {
+    return (
+      <Dialog
+        title={ 'search for a token' }
+        open={ this.props.show }
+        className={ styles.dialog }
+        onRequestClose={ this.onClose }
+        actions={ this.renderActions() } >
+        { this.renderContent() }
+      </Dialog>
+    );
+  }
+
+  renderActions () {
+    let { loading, data, notFound } = this.props;
+
+    if (loading) {
+      return (
+        <FlatButton
+          label='Loading...'
+          primary
+          disabled />
+      );
+    }
+
+    let complete = data || notFound;
+
+    if (complete) {
+      return ([
+        <FlatButton
+          label='Close'
+          primary
+          onTouchTap={ this.onClose } />
+      ]);
+    }
+
+    const isValid = this.state.form.valid;
+
+    return ([
+      <FlatButton
+        label='Cancel'
+        primary
+        onTouchTap={ this.onClose } />,
+      <FlatButton
+        label='Query'
+        primary
+        disabled={ !isValid }
+        onTouchTap={ this.onQuery } />
+    ]);
+  }
+
+  renderContent () {
+    let { loading, notFound, data } = this.props;
+
+    if (loading) {
+      return (
+        <Loading size={ 1 } />
+      );
+    }
+
+    if (notFound) {
+      return (
+        <p>No token has been found in the registry...</p>
+      );
+    }
+
+    if (data) {
+      return this.renderData();
+    }
+
+    return this.renderForm();
+  }
+
+  renderData () {
+    let { data } = this.props;
+
+    return (
+      <pre>{ JSON.stringify(data, null, 4) }</pre>
+    );
+  }
+
+  renderForm () {
+    return (
+      <div>
+        <SelectField
+          floatingLabelText='Select which field to query'
+          fullWidth
+          value={ this.state.queryKey }
+          onChange={ this.onQueryKeyChange }>
+          <MenuItem value='tla' label='TLA' primaryText='TLA' />
+          <MenuItem value='address' label='Address' primaryText='Address' />
+        </SelectField>
+
+        {
+          this.state.queryKey !== 'tla'
+          ? (<InputText
+            key={ 0 }
+
+            floatingLabelText="Token's address"
+            hintText='0xdeadbeef...'
+
+            validationType={ SIMPLE_TOKEN_ADDRESS_TYPE }
+            onChange={ this.onChange } />)
+          : (<InputText
+            key={ 1 }
+
+            floatingLabelText="Token's TLA"
+            hintText='GAV'
+
+            validationType={ SIMPLE_TLA_TYPE }
+            onChange={ this.onChange } />)
+        }
+      </div>
+    );
+  }
+
+  onQueryKeyChange = (event, index, queryKey) => {
+    this.setState({
+      queryKey,
+      form: { valid: false, value: '' }
+    });
+  }
+
+  onChange = (valid, value) => {
+    this.setState({
+      form: {
+        valid, value
+      }
+    });
+  }
+
+  onQuery = () => {
+    let { queryKey, form } = this.state;
+
+    this.props.handleQueryToken(queryKey, form.value);
+  }
+
+  onClose = () => {
+    this.setState(initState);
+    this.props.onClose();
+  }
+
+}

js/src/dapps/tokenreg/Actions/Register/register.js

@@ -40,7 +40,7 @@ const initState = {
   }
 };
 
-export default class ActionTransfer extends Component {
+export default class RegisterAction extends Component {
 
   static propTypes = {
     show: PropTypes.bool,

js/src/dapps/tokenreg/Actions/actions.js

@@ -71,3 +71,54 @@ export const registerToken = (tokenData) => (dispatch, getState) => {
       dispatch(setRegisterError(e));
     });
 };
+
+export const SET_QUERY_LOADING = 'SET_QUERY_LOADING';
+export const setQueryLoading = (isLoading) => ({
+  type: SET_QUERY_LOADING,
+  isLoading
+});
+
+export const SET_QUERY_RESULT = 'SET_QUERY_RESULT';
+export const setQueryResult = (data) => ({
+  type: SET_QUERY_RESULT,
+  data
+});
+
+export const SET_QUERY_NOT_FOUND = 'SET_QUERY_NOT_FOUND';
+export const setQueryNotFound = () => ({
+  type: SET_QUERY_NOT_FOUND
+});
+
+export const QUERY_RESET = 'QUERY_RESET';
+export const queryReset = () => ({
+  type: QUERY_RESET
+});
+
+export const queryToken = (key, query) => (dispatch, getState) => {
+  let state = getState();
+  let contractInstance = state.status.contract.instance;
+
+  let contractFunc = (key === 'tla') ? 'fromTLA' : 'fromAddress';
+
+  dispatch(setQueryLoading(true));
+
+  contractInstance[contractFunc]
+    .call({}, [ query ])
+    .then((result) => {
+      let data = {
+        id: result[0],
+        address: result[1],
+        base: result[2],
+        name: result[3],
+        owner: result[4]
+      };
+
+      dispatch(setQueryResult(data));
+      dispatch(setQueryLoading(false));
+    }, () => {
+      dispatch(setQueryNotFound());
+      dispatch(setQueryLoading(false));
+    });
+};
+
+

js/src/dapps/tokenreg/Actions/component.js

@@ -1,34 +1,41 @@
 import React, { Component, PropTypes } from 'react';
 
 import { RaisedButton } from 'material-ui';
+import ActionSearchIcon from 'material-ui/svg-icons/action/search';
 import ContentSendIcon from 'material-ui/svg-icons/content/send';
 
 import Register from './Register';
+import Query from './Query';
 
 import styles from './actions.css';
 
-const REGISTER = 'REGISTER';
+const REGISTER_ACTION = 'REGISTER_ACTION';
+const QUERY_ACTION = 'QUERY_ACTION';
 
 export default class Actions extends Component {
 
   static propTypes = {
     handleRegisterToken: PropTypes.func,
     handleRegisterClose: PropTypes.func,
+    register: PropTypes.object,
 
-    register: PropTypes.object
+    handleQueryToken: PropTypes.func,
+    handleQueryClose: PropTypes.func,
+    query: PropTypes.object
   };
 
   state = {
     show: {
-      [ REGISTER ]: false
+      [ REGISTER_ACTION ]: false,
+      [ QUERY_ACTION ]: false
     }
   }
 
   constructor () {
     super();
 
-    this.onRegisterClose = this.onRegisterClose.bind(this);
-    this.onShow = this.onShow.bind(this, REGISTER);
+    this.onShowRegister = this.onShow.bind(this, REGISTER_ACTION);
+    this.onShowQuery = this.onShow.bind(this, QUERY_ACTION);
   }
 
   render () {
@@ -39,25 +46,44 @@ export default class Actions extends Component {
           icon={ <ContentSendIcon /> }
           label='Register Token'
           primary
-          onTouchTap={ this.onShow } />
+          onTouchTap={ this.onShowRegister } />
+
+        <RaisedButton
+          className={ styles.button }
+          icon={ <ActionSearchIcon /> }
+          label='Search Token'
+          primary
+          onTouchTap={ this.onShowQuery } />
 
         <Register
-          show={ this.state.show[ REGISTER ] }
+          show={ this.state.show[ REGISTER_ACTION ] }
           onClose={ this.onRegisterClose }
           handleRegisterToken={ this.props.handleRegisterToken }
           { ...this.props.register } />
+
+        <Query
+          show={ this.state.show[ QUERY_ACTION ] }
+          onClose={ this.onQueryClose }
+          handleQueryToken={ this.props.handleQueryToken }
+          { ...this.props.query } />
       </div>
     );
   }
 
-  onRegisterClose () {
-    this.onHide(REGISTER);
+  onRegisterClose = () => {
+    this.onHide(REGISTER_ACTION);
     this.props.handleRegisterClose();
   }
 
+  onQueryClose = () => {
+    this.onHide(QUERY_ACTION);
+    this.props.handleQueryClose();
+  }
+
   onShow (key) {
     this.setState({
       show: {
+        ...this.state.show,
         [ key ]: true
       }
     });
@@ -66,6 +92,7 @@ export default class Actions extends Component {
   onHide (key) {
     this.setState({
       show: {
+        ...this.state.show,
         [ key ]: false
       }
     });

js/src/dapps/tokenreg/Actions/container.js

@@ -3,9 +3,7 @@ import { connect } from 'react-redux';
 
 import Actions from './component';
 
-import { registerToken, registerReset } from './actions';
-
-// import { loadTokens, queryTokenMeta } from './actions';
+import { registerToken, registerReset, queryToken, queryReset } from './actions';
 
 class TokensContainer extends Component {
 
@@ -17,9 +15,9 @@ class TokensContainer extends Component {
 }
 
 const mapStateToProps = (state) => {
-  const { register } = state.actions;
+  const { register, query } = state.actions;
 
-  return { register };
+  return { register, query };
 };
 
 const mapDispatchToProps = (dispatch) => {
@@ -29,6 +27,12 @@ const mapDispatchToProps = (dispatch) => {
     },
     handleRegisterClose: () => {
       dispatch(registerReset());
+    },
+    handleQueryToken: (key, query) => {
+      dispatch(queryToken(key, query));
+    },
+    handleQueryClose: () => {
+      dispatch(queryReset());
     }
   };
 };