{"size": 2631, "ext": "js", "max_stars_repo_path": "web/src/routes/workspace/views/account-settings/account-settings.view.js", "max_stars_repo_name": "seccom/kpass", "max_stars_repo_stars_event_min_datetime": "2017-01-14T15:50:15.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-01T09:26:36.000Z", "max_issues_repo_path": "web/src/routes/workspace/views/account-settings/account-settings.view.js", "max_issues_repo_name": "seccom/kpass", "max_issues_repo_issues_event_min_datetime": "2017-01-14T15:03:18.000Z", "max_issues_repo_issues_event_max_datetime": "2017-07-27T15:03:28.000Z", "max_forks_repo_path": "web/src/routes/workspace/views/account-settings/account-settings.view.js", "max_forks_repo_name": "seccom/kpass", "max_forks_repo_forks_event_min_datetime": "2017-02-03T07:02:46.000Z", "max_forks_repo_forks_event_max_datetime": "2019-03-29T08:51:28.000Z"}
{"max_stars_count": 110, "max_issues_count": 4, "max_forks_count": 11, "avg_line_length": 24.1376146789, "max_line_length": 68, "alphanum_fraction": 0.5800076017}
import React, { Component, PropTypes } from 'react'
import { I18n, Translate } from 'react-redux-i18n'
import cx from 'classnames'

import { getFileUrl } from 'utils'
import { Button, Input, Upload, toast } from 'uis'
import { Avatar } from 'views'

import './account-settings.view.styl'

export class AccountSettings extends Component {

  static propTypes = {
    className: PropTypes.string,
    userMe: PropTypes.object,
    actions: PropTypes.object
  }

  getRootClassnames () {
    return cx(
      'accountSettingsView',
      this.props.className
    )
  }

  handleUploadAvatarChange = (upload) => {
    const { updateUser } = this.props.actions
    const status = upload.file.status
    const body = upload.file.response

    if (status === 'error') {
      toast.error({
        message: I18n.t('accountSettings.uploadAvatarFailed')
      })
    }

    if (status === 'done') {
      updateUser({
        body
      })
      toast.success({
        message: I18n.t('accountSettings.uploadAvatarSucceed')
      })
    }
  }

  renderSettingAvatar () {
    const { userMe } = this.props

    return (
      <div className={'settingsSectionItem'}>
        <div className={'settingsSectionItemLabel'}>
          <Translate value={'member.avatar'} />
        </div>
        <div className={'settingsSectionItemContent'}>
          <Avatar url={getFileUrl(userMe.avatar)} size={'larger'} />
          <Upload
            url={'avatar'}
            accept={'image/*'}
            onChange={this.handleUploadAvatarChange}
          >
            <Button ghost size={'small'}>
              <Translate value={'accountSettings.uploadAvatar'} />
            </Button>
          </Upload>
        </div>
      </div>
    )
  }

  renderSettingName () {
    const { userMe } = this.props

    return (
      <div className={'settingsSectionItem'}>
        <div className={'settingsSectionItemLabel'}>
          <Translate value={'member.name'} />
        </div>
        <div className={'settingsSectionItemContent'}>
          <Input value={userMe.id} disabled />
        </div>
      </div>
    )
  }

  renderPublicProfileSection () {
    return (
      <div className={'settingsSection'}>
        <div className={'settingsSectionTitle'}>
          <Translate value={'accountSettings.publicProfile'} />
        </div>
        <div className={'settingsSectionContent'}>
          {this.renderSettingAvatar()}
          {this.renderSettingName()}
        </div>
      </div>
    )
  }

  render () {
    return (
      <div className={this.getRootClassnames()}>
        {this.renderPublicProfileSection()}
      </div>
    )
  }

}
