<commit_before>/*
 * The main component for the skills page.
 */

import React, {Component, PropTypes} from 'react';
import {StyleSheet, css} from 'aphrodite';

import Colors, {hexWithAlpha} from '../../data/Colors';
import {Blurb, Heading, Link, LinkButton} from '../../Components';
import {skillPropType, createSkillsData} from './skillsData';

// Use the `image` and `extraResources` skills properties to determine
// the set of resources to preload.
Link.registerPreloadResources('/skills', () =>
    createSkillsData().reduce((acc, group) => [
        ...acc,
        ...group.reduce((acc, {image, extraResources}) => [
            ...acc,
            image,
            ...(extraResources || []),
        ], []),
    ], []));

export default class SkillsPage extends Component {

    render() {
        return <div>
            <Heading level={1}>Skills</Heading>
            <SkillsMasterDetailView />
        </div>;
    }

}

/*
 * A component that renders the skill data as blurbs. This is suitable
 * for users that can't interact with the `SkillsMasterDetailView`
 * (which is the preferred view).
 */
class SkillsStaticView extends Component {

    static propTypes = {}

    constructor() {
        super();
        this.flatSkills = createSkillsData().reduce(
            (acc, group) => [...acc, ...group], []);
    }

    render() {
        const alternator = Blurb.makeAlternator();
        return <div>
            {this.flatSkills.map((skill, i) =>
                <Blurb
                    key={i}
                    name={skill.displayName || skill.name}
                    image={skill.image}
                    imagePosition={alternator()}
                >
                    {skill.description}
                </Blurb>)}
        </div>;
    }

}

/*
 * A stateful component that renders the skills data by linking
 * `SkillSelector`s to `SkillView`s, showing (at most) one skill
 * description at a time.
 */
class SkillsMasterDetailView extends Component {

    static propTypes = {}

    constructor() {
        super();
        this.skills = createSkillsData();
        this.state = {
            activeGroup: null,
            activeIndex: null,
        };
    }

    render() {
        const skills = this.skills;
        return <div>
            <p>
                Please select a programming language, computer system, or
                miscellaneous skill below to get a brief description of my
                experience.
            </p>
            {skills.map((group, i) =>
                <div key={i}>
                    {this._renderMasterView(group, i)}
                    {this._renderDetailView(group, i)}
                </div>)}
        </div>;
    }

    _renderMasterView(group, groupIndex) {
        const isActive = groupIndex === this.state.activeGroup;
        return <SkillSelector<commit_msg>Forward properties to the skills views<commit_after>/*
 * The main component for the skills page.
 */

import React, {Component, PropTypes} from 'react';
import {StyleSheet, css} from 'aphrodite';

import Colors, {hexWithAlpha} from '../../data/Colors';
import {Blurb, Heading, Link, LinkButton} from '../../Components';
import {skillPropType, createSkillsData} from './skillsData';

// Use the `image` and `extraResources` skills properties to determine
// the set of resources to preload.
Link.registerPreloadResources('/skills', () =>
    createSkillsData().reduce((acc, group) => [
        ...acc,
        ...group.reduce((acc, {image, extraResources}) => [
            ...acc,
            image,
            ...(extraResources || []),
        ], []),
    ], []));

export default class SkillsPage extends Component {

    render() {
        return <div>
            <Heading level={1}>Skills</Heading>
            <SkillsMasterDetailView />
        </div>;
    }

}

/*
 * A component that renders the skill data as blurbs. This is suitable
 * for users that can't interact with the `SkillsMasterDetailView`
 * (which is the preferred view).
 *
 * All properties are forwarded to the root component.
 */
class SkillsStaticView extends Component {

    constructor() {
        super();
        this.flatSkills = createSkillsData().reduce(
            (acc, group) => [...acc, ...group], []);
    }

    render() {
        const alternator = Blurb.makeAlternator();
        return <div {...this.props}>
            {this.flatSkills.map((skill, i) =>
                <Blurb
                    key={i}
                    name={skill.displayName || skill.name}
                    image={skill.image}
                    imagePosition={alternator()}
                >
                    {skill.description}
                </Blurb>)}
        </div>;
    }

}

/*
 * A stateful component that renders the skills data by linking
 * `SkillSelector`s to `SkillView`s, showing (at most) one skill
 * description at a time.
 *
 * All properties are forwarded to the root component.
 */
class SkillsMasterDetailView extends Component {

    constructor() {
        super();
        this.skills = createSkillsData();
        this.state = {
            activeGroup: null,
            activeIndex: null,
        };
    }

    render() {
        const skills = this.skills;
        return <div {...this.props}>
            <p>
                Please select a programming language, computer system, or
                miscellaneous skill below to get a brief description of my
                experience.
            </p>
            {skills.map((group, i) =>
                <div key={i}>
                    {this._renderMasterView(group, i)}
                    {this._renderDetailView(group, i)}
                </div>)}
        </div>;
    }

    _renderMasterView(group, groupIndex) {
        const isActive = groupIndex === this.state.activeGroup;
        return <SkillSelector
{'fraction_non_alphanumeric': 0.1262219173383639, 'fraction_numerical': 0.0003429943405933802, 'mean_word_length': 1.87857847976308, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1857887', 'n_tokens_mistral': 1582, 'n_tokens_neox': 1539, 'n_words': 442}