<commit_before>import React, {Component} from 'react';
import {readDir, FilterContent} from '../../utils/FileUtils';

// main HomePage class
class Listing extends Component {

	constructor (props) {
		super(props);
	}

	componentWillReceiveProps = (nextProps) => {
		if(nextProps.mainStore.currentPath != this.props.mainStore.currentPath) {
			this.updateFiles(nextProps.mainStore.currentPath);
		}
	}

	componentDidMount () {
		this.updateFiles(this.props.mainStore.currentPath);	
	}

	updateFiles = (path) => {
		this._readDir(path, (files) => {
			if(files && files.length) {
				FilterContent(files).then(values => {
					let filteredFiles = values.filter((file) => {
						return file.isDirectory || file.isImage
					}).map((file) => {
						return file;
					})
					this.props.updateFiles(filteredFiles)
				})
			}
		});
	}

	_readDir = (path, cb) => {
		if(path) {
			readDir(path)
				.then((files) => {
					cb(files);
				})
		} else {
			cb([]);
		}
	}

	renderFiles = (files) => {
		return files.map((file, index) => {
			return <p key={index} onClick={file.isDirectory && (() => this.props.updatePath(file.file.path))}> {file.file.filename} </p>
		})
	}

	render(){
		const {files, currentPath} = this.props.mainStore;
		return (
			<div><commit_msg>Preview Images<commit_after>import React, {Component} from 'react';
import {readDir, FilterContent} from '../../utils/FileUtils';
import Paper from 'material-ui/Paper';

const style = {
  height: 100,
  width: 100,
  margin: 20,
  textAlign: 'center',
  display: 'inline-block',
};


// main HomePage class
class Listing extends Component {

	constructor (props) {
		super(props);
	}

	componentWillReceiveProps = (nextProps) => {
		if(nextProps.mainStore.currentPath != this.props.mainStore.currentPath) {
			this.updateFiles(nextProps.mainStore.currentPath);
		}
	}

	componentDidMount () {
		this.updateFiles(this.props.mainStore.currentPath);	
	}

	updateFiles = (path) => {
		this._readDir(path, (files) => {
			if(files && files.length) {
				FilterContent(files).then(values => {
					let filteredFiles = values.filter((file) => {
						return file.isDirectory || file.isImage
					}).map((file) => {
						return file;
					})
					this.props.updateFiles(filteredFiles)
				})
			}
		});
	}

	_readDir = (path, cb) => {
		if(path) {
			readDir(path)
				.then((files) => {
					cb(files);
				})
		} else {
			cb([]);
		}
	}

	renderFiles = (files) => {
		return files.map((file, index) => {
			return (
				<div>
					{file.isDirectory ? 
						<Paper key={index} onClick={() => this.props.updatePath(file.file.path)} style={style} zDepth={1}>
							<div>
								{file.file.filename}
							</div>
						</Paper>
					: 	<Paper key={index} style={style} zDepth={1}>
							<img style={{width:100}} src={file.file.path}  />
						</Paper>
					}
				</div>
			)
		})
	}

	render(){
		const {files, currentPath} = this.props.mainStore;
		return (
			<div>
{'fraction_non_alphanumeric': 0.17542662116040955, 'fraction_numerical': 0.004436860068259386, 'mean_word_length': 3.0651872399445215, 'pattern_counts': {'":': 0, '<': 16, '<?xml version=': 0, '>': 38, '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': '790163', 'n_tokens_mistral': 1231, 'n_tokens_neox': 1002, 'n_words': 175}