{"size": 1041, "ext": "js", "max_stars_repo_path": "src/components/requests/RequestList.js", "max_stars_repo_name": "krispingal/book_rentals", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/requests/RequestList.js", "max_issues_repo_name": "krispingal/book_rentals", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/requests/RequestList.js", "max_forks_repo_name": "krispingal/book_rentals", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.6590909091, "max_line_length": 99, "alphanum_fraction": 0.6436119116}
import React from 'react';
import { connect } from 'react-redux';
import { fetchRequests } from '../../actions';

class RequestList extends React.Component {
	componentDidMount() {
		this.props.fetchRequests();
	}

	renderList() {
		return this.props.requests.map(request => {
			return (
				<div className="item" key={request.id}>
					<i className="large middle aligned icon camera" />
					<div className="content">
						<div className="ui medium header">{request.title}</div>
						<div className="requestListingType">Listing option : {request.renting ? 'Rent' : 'Buy'}</div>
					</div>
				</div>
			);
		});
	}

	render() {
		return (
			<div>
				<h1 className="ui grey header center aligned">
					Requests for books from your fellow ASU students
				</h1>
				<div className="ui relaxed divided list">
					{this.renderList()}
				</div>
			</div>
		);
	}
}

const mapStateToProps = (state) => {
	return { 
		requests: Object.values(state.requests),
	};
}

export default connect(mapStateToProps, { fetchRequests })(RequestList);