openethereum/js/src/ui/Certifications/certifications.js
Nicolas Gotchac 52b4ce0dd7 Use Webpack Aliases (#3711)
* Adds aliases to Webpack Build

* Use `ui` Webpack alias

* Use `views` alias

* Use `modals` aliase

* Use `providers` aliase

* Use `contracts` aliase

* Use '~' aliase

* from `ui` to from `~/ui`

* from  to from

* from `modals` to from `~/modals`

* from `providers` to from `~/redux/providers`

* from `contracts` to from `~/contracts`

* Updated Webpack App config
2016-12-05 11:47:13 +01:00

88 lines
2.6 KiB
JavaScript

// Copyright 2015, 2016 Ethcore (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { hashToImageUrl } from '~/redux/providers/imagesReducer';
import { fetchCertifications } from '~/redux/providers/certifications/actions';
import defaultIcon from '../../../assets/images/certifications/unknown.svg';
import styles from './certifications.css';
class Certifications extends Component {
static propTypes = {
account: PropTypes.string.isRequired,
certifications: PropTypes.array.isRequired,
dappsUrl: PropTypes.string.isRequired,
fetchCertifications: PropTypes.func.isRequired
}
componentWillMount () {
const { account, fetchCertifications } = this.props;
fetchCertifications(account);
}
render () {
const { certifications } = this.props;
if (certifications.length === 0) {
return null;
}
return (
<div className={ styles.certifications }>
{ certifications.map(this.renderCertification) }
</div>
);
}
renderCertification = (certification) => {
const { name, title, icon } = certification;
const { dappsUrl } = this.props;
const classNames = `${styles.certification} ${!icon ? styles.noIcon : ''}`;
const img = icon ? dappsUrl + hashToImageUrl(icon) : defaultIcon;
return (
<div className={ classNames } key={ name }>
<img className={ styles.icon } src={ img } />
<div className={ styles.text }>{ title || name }</div>
</div>
);
}
}
function mapStateToProps (_, initProps) {
const { account } = initProps;
return (state) => {
const certifications = state.certifications[account] || [];
return { certifications };
};
}
function mapDispatchToProps (dispatch) {
return bindActionCreators({ fetchCertifications }, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Certifications);