import React, { Component } from 'react';
import PropTypes from 'prop-types';
import RankedTrait from './RankedTrait';
import Focus from './Focus';
import Section from './Section';
import {
  attributeTraitNames,
  attributeMaxDots,
  attributesRankDots
} from '../constants/characterOptions';

class Attributes extends Component {
  static propTypes = {
    attributes: PropTypes.object.isRequired,
    attributeBonus: PropTypes.number.isRequired,
    foci: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
    setRank: PropTypes.func.isRequired,
    setFocus: PropTypes.func.isRequired,
    purchaseOrUnpurchaseDot: PropTypes.func.isRequired
  };

  handleRankChange = (trait, dotsFromRank) => {
    this.props.setRank('attributes', trait, dotsFromRank);
  };

  handleFocusChange = (attribute, focus) => {
    this.props.setFocus(attribute, focus);
  };

  handleOnClick = trait => {
    this.props.purchaseOrUnpurchaseDot('attributes', trait);
  };

  render() {
    const { attributes, attributeBonus, foci } = this.props;

    const traits = attributeTraitNames.map(name => (
      <div key={name} className="col-sm-4">
        <RankedTrait
          name={name}
          maxDots={attributeMaxDots}
          rankDots={attributesRankDots}
          traitState={attributes[name]}
          onRankChange={this.handleRankChange}
          onClick={this.handleOnClick}
        />
        <Focus
          attribute={name}
          foci={foci[name]}
          value={attributes[name].focus}
          onChange={this.handleFocusChange}
        />
      </div>
    ));

    return (
      <Section
        header="Attributes"
        footer={
          <React.Fragment>Attribute Bonus: {attributeBonus}</React.Fragment>
        }
      >
        <div className="row">{traits}</div>
      </Section>
    );
  }
}

export default Attributes;

@@ -9,23 +9,8 @@
 eact
-, %7B Component %7D
  fro
@@ -277,383 +277,146 @@
 ';%0A%0A
-class Attributes extends Component %7B%0A  static propTypes = %7B%0A    attributes: PropTypes.object.isRequired,%0A    attributeBonus: PropTypes.number.isRequired,%0A    foci: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)).isRequired,%0A    setRank: PropTypes.func.isRequired,%0A    setFocus: PropTypes.func.isRequired,%0A    purchaseOrUnpurchaseDot: PropTypes.func.isRequired%0A  %7D;%0A%0A 
+export default function Attributes(%7B%0A  attributes,%0A  attributeBonus,%0A  foci,%0A  setRank,%0A  setFocus,%0A  purchaseOrUnpurchaseDot%0A%7D) %7B%0A  const
  han
@@ -462,27 +462,16 @@
 %3E %7B%0A    
-this.props.
 setRank(
@@ -510,24 +510,30 @@
 k);%0A  %7D;%0A%0A  
+const 
 handleFocusC
@@ -568,27 +568,16 @@
 %3E %7B%0A    
-this.props.
 setFocus
@@ -604,16 +604,22 @@
   %7D;%0A%0A  
+const 
 handleOn
@@ -645,19 +645,8 @@
     
-this.props.
 purc
@@ -697,85 +697,8 @@
 %7D;%0A%0A
-  render() %7B%0A    const %7B attributes, attributeBonus, foci %7D = this.props;%0A%0A  
   co
@@ -744,18 +744,16 @@
 me =%3E (%0A
-  
     %3Cdiv
@@ -792,18 +792,16 @@
 %3E%0A      
-  
 %3CRankedT
@@ -813,18 +813,16 @@
         
- 
- 
 name=%7Bna
@@ -817,34 +817,32 @@
     name=%7Bname%7D%0A
-  
         maxDots=
@@ -868,18 +868,16 @@
         
- 
- 
 rankDots
@@ -894,26 +894,24 @@
 esRankDots%7D%0A
-  
         trai
@@ -944,18 +944,16 @@
         
-  
 onRankCh
@@ -954,29 +954,24 @@
 RankChange=%7B
-this.
 handleRankCh
@@ -984,18 +984,16 @@
         
-  
 onClick=
@@ -993,21 +993,16 @@
 nClick=%7B
-this.
 handleOn
@@ -1010,31 +1010,27 @@
 lick%7D%0A      
-  
 /%3E%0A
-  
       %3CFocus
@@ -1038,18 +1038,16 @@
         
-  
 attribut
@@ -1051,26 +1051,24 @@
 bute=%7Bname%7D%0A
-  
         foci
@@ -1089,18 +1089,16 @@
         
-  
 value=%7Ba
@@ -1128,18 +1128,16 @@
         
- 
- 
 onChange
@@ -1142,13 +1142,8 @@
 ge=%7B
-this.
 hand
@@ -1159,31 +1159,27 @@
 ange%7D%0A      
-  
 /%3E%0A
-  
     %3C/div%3E%0A 
@@ -1181,19 +1181,15 @@
 iv%3E%0A
-  
   ));%0A%0A
-  
   re
@@ -1199,18 +1199,16 @@
 n (%0A    
- 
- 
 %3CSection
@@ -1208,18 +1208,16 @@
 Section%0A
-  
       he
@@ -1240,18 +1240,16 @@
 %22%0A      
-  
 footer=%7B
@@ -1249,18 +1249,16 @@
 ooter=%7B%0A
-  
         
@@ -1334,22 +1334,16 @@
     
-  
 %7D%0A    
- 
- 
 %3E%0A
-  
     
@@ -1384,18 +1384,16 @@
 iv%3E%0A    
-  
 %3C/Sectio
@@ -1401,43 +1401,334 @@
 %3E%0A  
- 
- 
 );%0A
-  %7D%0A%7D%0A%0Aexport default Attributes
+%7D%0A%0AAttributes.propTypes = %7B%0A  attributes: PropTypes.object.isRequired,%0A  attributeBonus: PropTypes.number.isRequired,%0A  foci: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)).isRequired,%0A  setRank: PropTypes.func.isRequired,%0A  setFocus: PropTypes.func.isRequired,%0A  purchaseOrUnpurchaseDot: PropTypes.func.isRequired%0A%7D
 ;%0A

Rewrite Attributes as function component