<commit_before>import React from 'react'
import Component from './component';

import AppActions from '../action/app';

import ProjectOverview from './projectOverview';

import ProjectStore from '../store/project';

export default class Projects extends Component {
	/**
	 *
	 */
	constructor () {
		super();

		this._bind('onProjectStoreChange');

		this.state = ProjectStore.getAll();
	}

	/**
	 *
	 */
	componentDidMount () {
		ProjectStore.addChangeListener(this.onProjectStoreChange);
	}

	/**
	 *
	 */
	componentWillUnmount () {
		ProjectStore.removeChangeListener(this.onProjectStoreChange);
	}

	/**
	 *
	 */
	render () {
		const projectList = this.state.projects.map((project, i) => {
			return (
				<li key={i} className='projectShort' onClick={this.createOnProjectClickHandler(project)}>
					<span>{project.name}</span>
				</li>
			);
		});

		return (
			<div className='projectsContainer'>
				<div className='projectListContainer'>
					<ul className='projectList' onClick={this.onProjectClick}>
						<li className='rootProject' onClick={this.createOnProjectClickHandler(null)}>
							<span>{'Projects'}</span>
						</li>

						{projectList}
					</ul>
				</div>

				<ProjectOverview project={this.state.currentProject} />
			</div>
		);
	}

	/**
	 *
	 */
	onProjectStoreChange () {
		this.setState(ProjectStore.getAll());
	}

	/**
	 *
	 */
	onClick () {
		AppActions.dumpStore('Project');
	}

	/**
	 *
	 */
	createOnProjectClickHandler (project) {
		return () => {
			AppActions.selectProject(project);
		};
	}
}<commit_msg>Updating classnames to be more reusable.  Also moving state to getState() function for consistency.<commit_after>import React from 'react'
import Component from './component';

import AppActions from '../action/app';

import ProjectOverview from './projectOverview';

import ProjectStore from '../store/project';

function getState () {
	return {
		currentProject: ProjectStore.getCurrentProject(),
		projects: ProjectStore.getProjects()
	};
}

export default class Projects extends Component {
	/**
	 *
	 */
	constructor () {
		super();

		this._bind('onProjectStoreChange');

		this.state = getState();
	}

	/**
	 *
	 */
	componentDidMount () {
		ProjectStore.addChangeListener(this.onProjectStoreChange);
	}

	/**
	 *
	 */
	componentWillUnmount () {
		ProjectStore.removeChangeListener(this.onProjectStoreChange);
	}

	/**
	 *
	 */
	render () {
		const projectList = this.state.projects.map((project, i) => {
			return (
				<li key={i} className='itemShort' onClick={this.createOnProjectClickHandler(project)}>
					<span>{project.name}</span>
				</li>
			);
		});

		return (
			<div className='pageContainer'>
				<div className='listContainer'>
					<ul className='list' onClick={this.onProjectClick}>
						<li className='itemShort rootItem' onClick={this.createOnProjectClickHandler(null)}>
							<span>{'Projects'}</span>
						</li>

						{projectList}
					</ul>
				</div>

				<div className={'contentContainer'}>
					<ProjectOverview project={this.state.currentProject} />
				</div>
			</div>
		);
	}

	/**
	 *
	 */
	onProjectStoreChange () {
		this.setState(getState());
	}

	/**
	 *
	 */
	onClick () {
		AppActions.dumpStore('Project');
	}

	/**
	 *
	 */
	createOnProjectClickHandler (project) {
		return () => {
			AppActions.selectProject(project);
		};
	}
}
{'fraction_non_alphanumeric': 0.16216216216216217, 'fraction_numerical': 0.0, 'mean_word_length': 3.4532085561497325, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, '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': '2809514', 'n_tokens_mistral': 1226, 'n_tokens_neox': 1020, 'n_words': 172}