1  import PropTypes from "prop-types";
 2  import React from 'react';
 3  import {
 4    InputGroup,
 5    Card,
 6    CardBody,
 7    CardHeader,
 8    Col,
 9    FormGroup,
10    Input,
11    Row,
12    InputGroupAddon,
13    Label
14  } from 'reactstrap';
15  import CopyButton from './CopyButton';
16  
17  import { calculateUnits } from '../services/unitConverter';
18  
19  class Converter extends React.Component {
20    constructor(props) {
21      super(props);
22      this.state = { etherConversions: []};
23    }
24  
25    componentDidMount() {
26      this.setState({etherConversions: calculateUnits(this.props.baseEther, 'Ether')});
27    }
28  
29    handleOnChange(event, key) {
30      const newUnits = calculateUnits(event.target.value, key);
31      this.setState({etherConversions: newUnits});
32      const newBaseEther = newUnits.find(unit => unit.key === 'ether');
33      this.props.updateBaseEther(newBaseEther.value);
34    }
35  
36    render() {
37      return(
38        <Row className="justify-content-md-center">
39          <Col xs="12" sm="9" lg="9">
40            <Card>
41              <CardHeader>
42                <strong>Ether Converter</strong>
43              </CardHeader>
44              <CardBody>
45                {
46                  this.state.etherConversions.map(unit => (
47                    <FormGroup key={unit.key}>
48                      <Label htmlFor={unit.name}>{unit.name}</Label>
49                      <InputGroup>
50                        <Input id={unit.name} placeholder={unit.name} value={unit.value} onChange={e => this.handleOnChange(e, unit.key)} />
51                        <InputGroupAddon addonType="append">
52                          <CopyButton text={unit.value} title="Copy value to clipboard" size={2}/>
53                        </InputGroupAddon>
54                      </InputGroup>
55                    </FormGroup>
56                  ))
57                }
58              </CardBody>
59            </Card>
60          </Col>
61        </Row>
62      );
63    }
64  }
65  
66  Converter.propTypes = {
67    baseEther: PropTypes.string,
68    updateBaseEther: PropTypes.func
69  };
70  
71  export default Converter;