sms verification: simplify code

- moved the steps into named exports - moved the store creation into the Accounts component - fix a linting issue
2016-11-15 16:59:10 +01:00 · 2016-11-15 16:59:10 +01:00 · aa8fc554fe
commit aa8fc554fe
parent 3e879aac35
4 changed files with 55 additions and 57 deletions
--- a/js/src/modals/SMSVerification/SMSVerification.js
+++ b/js/src/modals/SMSVerification/SMSVerification.js
@ -21,14 +21,13 @@ import ContentClear from 'material-ui/svg-icons/content/clear';

 import { Button, IdentityIcon, Modal } from '../../ui';

-import VerificationStore from './store';
-const {
+import {
  GATHERING_DATA, GATHERED_DATA,
  POSTING_REQUEST, POSTED_REQUEST,
  REQUESTING_SMS, REQUESTED_SMS,
  POSTING_CONFIRMATION, POSTED_CONFIRMATION,
  DONE
-} = VerificationStore;
+} from './store';

 import GatherData from './GatherData';
 import SendRequest from './SendRequest';
@ -38,12 +37,9 @@ import Done from './Done';

@observer
 export default class SMSVerification extends Component {
-  static contextTypes = {
-    api: PropTypes.object.isRequired
-  }
-
  static propTypes = {
-    account: PropTypes.string,
+    store: PropTypes.any.isRequired,
+    account: PropTypes.string.isRequired,
    onClose: PropTypes.func.isRequired
  }

@ -55,25 +51,13 @@ export default class SMSVerification extends Component {
    [DONE]: 4
  }

-  state = {
-    store: null
-  }
-
  componentDidMount () {
-    const { api } = this.context;
-    const { account } = this.props;
-
-    const store = new VerificationStore(api, account);
-    this.setState({ store }, () => {
-      store.gatherData();
-    });
+    this.props.store.gatherData();
  }

  render () {
-    const { store } = this.state;
-    if (!store) return null;
-    const step = SMSVerification.uiSteps[store.step];
-    const { error, isStepValid } = store;
+    const step = SMSVerification.uiSteps[this.props.store.step];
+    const { error, isStepValid } = this.props.store;

    return (
      <Modal
@ -90,8 +74,7 @@ export default class SMSVerification extends Component {
  }

  renderDialogActions (step, error, isStepValid) {
-    const { onClose, account } = this.props;
-    const { store } = this.state;
+    const { store, account, onClose } = this.props;

    const cancel = (
      <Button
@ -147,7 +130,7 @@ export default class SMSVerification extends Component {
      fee, isNumberValid, isVerified, hasRequested,
      requestTx, isCodeValid, confirmationTx,
      setNumber, setConsentGiven, setCode
-    } = this.state.store;
+    } = this.props.store;

    if (step === 4) {
      return (<Done />);
@ -162,7 +145,7 @@ export default class SMSVerification extends Component {
      return (<SendRequest step={ step } tx={ requestTx } />);
    }
    if (step === 0) {
-      const { setNumber, setConsentGiven } = this.state.store;
+      const { setNumber, setConsentGiven } = this.props.store;
      return (
        <GatherData
          fee={ fee } isNumberValid={ isNumberValid }
--- a/js/src/modals/SMSVerification/post-to-verification-server.js
+++ b/js/src/modals/SMSVerification/post-to-verification-server.js
@ -31,7 +31,7 @@ const postToVerificationServer = (query) => {
  })
  .catch((err) => {
    console.error('foooo', err.stack);
-    throw err
+    throw err;
  });
 };

--- a/js/src/modals/SMSVerification/store.js
+++ b/js/src/modals/SMSVerification/store.js
@ -29,18 +29,18 @@ import postToVerificationServer from './post-to-verification-server';

 const validCode = /^[A-Z0-9_-]{7,14}$/i;

-export default class VerificationStore {
-  static GATHERING_DATA = 'gathering-data';
-  static GATHERED_DATA = 'gathered-data';
-  static POSTING_REQUEST = 'posting-request';
-  static POSTED_REQUEST = 'posted-request';
-  static REQUESTING_SMS = 'requesting-sms';
-  static REQUESTED_SMS = 'requested-sms';
-  static QUERY_CODE = 'query-code';
-  static POSTING_CONFIRMATION = 'posting-confirmation';
-  static POSTED_CONFIRMATION = 'posted-confirmation';
-  static DONE = 'done';
+export const GATHERING_DATA = 'gathering-data';
+export const GATHERED_DATA = 'gathered-data';
+export const POSTING_REQUEST = 'posting-request';
+export const POSTED_REQUEST = 'posted-request';
+export const REQUESTING_SMS = 'requesting-sms';
+export const REQUESTED_SMS = 'requested-sms';
+export const QUERY_CODE = 'query-code';
+export const POSTING_CONFIRMATION = 'posting-confirmation';
+export const POSTED_CONFIRMATION = 'posted-confirmation';
+export const DONE = 'done';

+export default class VerificationStore {
  @observable step = null;
  @observable error = null;

@ -61,23 +61,23 @@ export default class VerificationStore {
  }

  @computed get isStepValid () {
-    if (this.step === VerificationStore.DONE) {
+    if (this.step === DONE) {
      return true;
    }
    if (this.error) {
      return false;
    }

-    if (this.step === VerificationStore.GATHERED_DATA) {
+    if (this.step === GATHERED_DATA) {
      return this.fee && this.isVerified === false && this.isNumberValid && this.consentGiven;
    }
-    if (this.step === VerificationStore.REQUESTED_SMS) {
+    if (this.step === REQUESTED_SMS) {
      return this.requestTx;
    }
-    if (this.step === VerificationStore.QUERY_CODE) {
+    if (this.step === QUERY_CODE) {
      return this.isCodeValid;
    }
-    if (this.step === VerificationStore.POSTED_CONFIRMATION) {
+    if (this.step === POSTED_CONFIRMATION) {
      return this.confirmationTx;
    }
    return false;
@ -107,7 +107,7 @@ export default class VerificationStore {

  @action gatherData = () => {
    const { contract, account } = this;
-    this.step = VerificationStore.GATHERING_DATA;
+    this.step = GATHERING_DATA;

    const fee = contract.instance.fee.call()
      .then((fee) => {
@ -135,7 +135,7 @@ export default class VerificationStore {

    Promise.all([ fee, isVerified, hasRequested ])
    .then(() => {
-      this.step = VerificationStore.GATHERED_DATA;
+      this.step = GATHERED_DATA;
    });
  }

@ -147,7 +147,7 @@ export default class VerificationStore {

    let chain = Promise.resolve();
    if (!hasRequested) {
-      this.step = VerificationStore.POSTING_REQUEST;
+      this.step = POSTING_REQUEST;
      chain = request.estimateGas(options, [])
        .then((gas) => {
          options.gas = gas.mul(1.2).toFixed(0);
@ -160,18 +160,18 @@ export default class VerificationStore {
        })
        .then((txHash) => {
          this.requestTx = txHash;
-          this.step = VerificationStore.POSTED_REQUEST;
+          this.step = POSTED_REQUEST;
          return waitForConfirmations(api, txHash, 1);
        });
    }

    chain
      .then(() => {
-        this.step = VerificationStore.REQUESTING_SMS;
+        this.step = REQUESTING_SMS;
        return postToVerificationServer({ number, address: account });
      })
      .then(() => {
-        this.step = VerificationStore.REQUESTED_SMS;
+        this.step = REQUESTED_SMS;
      })
      .catch((err) => {
        this.error = 'Failed to request a confirmation SMS: ' + err.message;
@ -179,7 +179,7 @@ export default class VerificationStore {
  }

  @action queryCode = () => {
-    this.step = VerificationStore.QUERY_CODE;
+    this.step = QUERY_CODE;
  }

  @action sendConfirmation = () => {
@ -190,7 +190,7 @@ export default class VerificationStore {
    const options = { from: account };
    const values = [ token ];

-    this.step = VerificationStore.POSTING_CONFIRMATION;
+    this.step = POSTING_CONFIRMATION;
    confirm.estimateGas(options, values)
      .then((gas) => {
        options.gas = gas.mul(1.2).toFixed(0);
@ -203,11 +203,11 @@ export default class VerificationStore {
      })
      .then((txHash) => {
        this.confirmationTx = txHash;
-        this.step = VerificationStore.POSTED_CONFIRMATION;
+        this.step = POSTED_CONFIRMATION;
        return waitForConfirmations(api, txHash, 2);
      })
      .then(() => {
-        this.step = VerificationStore.DONE;
+        this.step = DONE;
      })
      .catch((err) => {
        this.error = 'Failed to send the verification code: ' + err.message;
@ -215,6 +215,6 @@ export default class VerificationStore {
  }

  @action done = () => {
-    this.step = VerificationStore.DONE;
+    this.step = DONE;
  }
 }
--- a/js/src/views/Account/account.js
+++ b/js/src/views/Account/account.js
@ -30,9 +30,15 @@ import shapeshiftBtn from '../../../assets/images/shapeshift-btn.png';
 import Header from './Header';
 import Transactions from './Transactions';

+import VerificationStore from '../../modals/SMSVerification/store';
+
 import styles from './account.css';

 class Account extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
  static propTypes = {
    params: PropTypes.object,
    accounts: PropTypes.object,
@ -47,10 +53,19 @@ class Account extends Component {
    showEditDialog: false,
    showFundDialog: false,
    showVerificationDialog: false,
+    verificationStore: null,
    showTransferDialog: false,
    showPasswordDialog: false
  }

+  componentDidMount () {
+    const { api } = this.context;
+    const { address } = this.props.params;
+
+    const store = new VerificationStore(api, address);
+    this.setState({ verificationStore: store });
+  }
+
  render () {
    const { accounts, balances, isTest } = this.props;
    const { address } = this.props.params;
@ -162,12 +177,12 @@ class Account extends Component {
      return null;
    }

+    const store = this.state.verificationStore;
    const { address } = this.props.params;

-    // TODO: pass props
    return (
      <SMSVerification
-        account={ address }
+        store={ store } account={ address }
        onClose={ this.onVerificationClose }
      />
    );