text: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  
  import CategoryButton from './Skills/CategoryButton';
  import SkillBar from './Skills/SkillBar';
  
  const handleProps = ({ categories, skills, levels }) => ({
    buttons: categories.map((cat) => cat.name).reduce((obj, key) => ({
      ...obj,
      [key]: false,
    }), { All: true }),
    skills,
    levels,
  });
  
  class Skills extends Component {
    constructor(props) {
      super(props);
      this.state = handleProps(
        {
          categories: props.categories,
          skills: props.skills,
          levels: props.levels,
        },
      );
    }
  
    getRows() {
      // search for true active categories
      const actCat = Object.keys(this.state.buttons).reduce((cat, key) => (
        this.state.buttons[key] ? key : cat
      ), 'All');
  
      return this.state.skills.sort((a, b) => {
        let ret = 0;
        if (a.competency > b.competency) ret = -1;
        else if (a.competency < b.competency) ret = 1;
        else if (a.category[0] > b.category[0]) ret = -1;
        else if (a.category[0] < b.category[0]) ret = 1;
        else if (a.title > b.title) ret = 1;
        else if (a.title < b.title) ret = -1;
        return ret;
      }).filter((skill) => (actCat === 'All' || skill.category.includes(actCat)))
        .map((skill) => (
          <SkillBar
            categories={this.props.categories}
            data={skill}
            key={skill.title}
          />
        ));
    }
  
    getButtons() {
      return Object.keys(this.state.buttons).map((key) => (
        <CategoryButton
          label={key}
          key={key}
          active={this.state.buttons}
          handleClick={this.handleChildClick}
        />
      ));
    }
  
    handleChildClick = (label) => {
      this.setState((prevState) => {
        // Toggle button that was clicked. Turn all other buttons off.
        const buttons = Object.keys(prevState.buttons).reduce((obj, key) => ({
          ...obj,
          [key]: (label === key) && !prevState.buttons[key],
        }), {});
        // Turn on 'All' button if other buttons are off
        buttons.All = !Object.keys(prevState.buttons).some((key) => buttons[key]);
        return { buttons };
      });
    }
  
    render() {
      return (
        <div className="skills">
          <div className="link-to" id="skills" />
          <div className="title">
            <h3>Skills</h3>
            <h4>Note: I use the following definitions for &quot;skill&quot; ratings.</h4>
            <ol className="skill-level-container">
              {this.state.levels.map((level) => (
                <li key={level.level}>
                  <h5>{level.title}</h5>
                  <p><i>{level.description}</i></p>
                </li>
              ))}
            </ol>
          </div>
          <div className="skill-button-container">
            {this.getButtons()}
          </div>
          <div className="skill-row-container">
            {this.getRows()}
          </div>
        </div>
      );
    }
  }
  
  Skills.propTypes = {
    skills: PropTypes.arrayOf(PropTypes.shape({
      title: PropTypes.string,
      competency: PropTypes.number,
      category: PropTypes.arrayOf(PropTypes.string),
    })),
    categories: PropTypes.arrayOf(PropTypes.shape({
      name: PropTypes.string,
      color: PropTypes.string,
    })),
    levels: PropTypes.arrayOf(PropTypes.shape({
      level: PropTypes.number,
      title: PropTypes.string,
      description: PropTypes.string,
    })),
  };
  
  Skills.defaultProps = {
    skills: [],
    categories: [],
    levels: [],
  };
  
  export default Skills;
  