Spaghetti_code example 请不要写出意大利面条式代码

updatePassword.tsx

import RichButton from 'components/InputField/RichButton'
import ButtonStyle from 'components/InputField/RichButton.scss'
import SingleLineTextField from 'components/InputField/SingleLineTextField'
import { t } from 'i18n'
import { uniqueId } from 'lodash'
import * as React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import classes from './UpdatePassword.scss'
/* tslint:disable jsx-no-lambda */

interface States {
  method: number
  step: number
  initialAnimation?: boolean
}

export default class UpdatePassword extends React.PureComponent<{}, States> {
  constructor (props: {}) {
    super(props)
    this.state = {
      method: 0,
      step: 1
    }
  }

  public render () {
    return (
      <div className={classes.updatePasswordComponentRoot}>
        <div>
          <span className={classes.title}>
            {t('updatePassword')}
          </span>
          {
            this.state.method > 0 &&
            <span className={classes.floatRight}>
              <RichButton
                onClick={() => this.setPages(0, 0)}
              >
              {t('previous')}
              </RichButton>
            </span>
          }
        </div>
        <ReactCSSTransitionGroup
          /* definition: scss/transition.scss */
          transitionName='windows-like'
          transitionAppear={this.state.initialAnimation}
          transitionAppearTimeout={500}
          transitionEnterTimeout={500}
          transitionLeave={false} // This must be false to make sure that element can be leave.
        >
          {this.pages(this.state.method, this.state.step)}
        </ReactCSSTransitionGroup>
      </div>
    )
  }

  private setPages (method: number = 0, step: number = 0) {
    this.setState({ method, step })
  }

  private pages (method: number = 0, step: number = 0) {
    const provideNewOne = (
      <>
        <SingleLineTextField type='password' autoFocus={true} title={t('updatePasswordNewOne')}/>
        <SingleLineTextField type='password' autoFocus={true} title={t('updatePasswordNewOneRepeat')}/>
        <div className={classes.confirmButtonOuter}>
          <RichButton>
            {t('ok')}
          </RichButton>
        </div>
      </>
    )
    let payload = <></>
    if (method === 1) {
      if (step === 1) {
        payload = (
          <>
            <SingleLineTextField
              type='password'
              autoFocus={true}
              title={t('updatePasswordOldPassword')}
            />
            <div className={classes.confirmButtonOuter}>
              <RichButton>
                {t('ok')}
              </RichButton>
            </div>
          </>
        )
      } else if (step === 2) {
        payload = provideNewOne
      } else {
        this.setPages(0, 0)
      }
    } else if (method === 2) {
      if (step === 1) {
        payload = (
          <>
            <SingleLineTextField type='email' autoFocus={true} title={t('email')}/>
            <div className={classes.confirmButtonOuter}>
            <RichButton
            >
              {t('ok')}
            </RichButton>
            </div>
          </>
        )
      } else if (step === 2) {
        payload = provideNewOne
      } else {
        this.setPages(0, 0)
      }
    } else {
      payload = (
        <>
          <RichButton
            size='large'
            onClick={() => this.setPages(1, 1)}
          >
            {t('updatePasswordUseOldOne')}
          </RichButton>
          <RichButton
            size='large'
            onClick={() => this.setPages(2, 1)}
          >
            {t('updatePasswordUseEmail')}
          </RichButton>
        </>
      )
    }
    return (
      <div key={uniqueId()}>
        {this.stepNaviBarProvider()}
        <div className={classes.fieldGroup}>
          {payload}
        </div>
      </div>
    )
  }

  private stepNaviBarProvider () {
    const steps = [
      [
        t('updatePasswordProvideOldOne'),
        t('updatePasswordProvideNewOne')
      ],
      [
        t('updatePasswordProvideEmail'),
        t('updatePasswordProvideNewOne')
      ]
    ]
    const element = [
      <span key={-1}>{t('selectCredential')}</span>
    ]
    if (this.state.method === 0) {
      return <span className={classes.naviBar}>{element}</span>
    }
    for (let i = 0; i < this.state.step; i++) {
      element.push(<span key={uniqueId('splitter')}> &gt; </span>)
      element.push(<span key={i + 1}>{steps[this.state.method - 1][i]}</span>)
    }
    return <span className={classes.naviBar}>{element}</span>
  }
}