import React, { Component } from 'react';
import PropTypes from 'prop-types';
import CatalogListContainer from './CatalogListContainer';
import Spinner from '../Spinner';

export default class ContentBody extends Component {
	componentDidMount() {
		const { catalogFetched, getCatalog } = this.props;
		// this fetches the entire catalog, no matter if the list of a single item is opened
		if (!catalogFetched) {
			getCatalog();
		}
	}
	render() {
		const { pending } = this.props;
		return (
			<div className={`ContentBody${pending ? ' loading' : ''}`}>
				{pending ? <Spinner /> : <CatalogListContainer />}
			</div>
		);
	}
}
ContentBody.propTypes = {
	pending: PropTypes.bool.isRequired,
	catalogFetched: PropTypes.bool.isRequired,
	getCatalog: PropTypes.func.isRequired
};