EntityHome.jsx

// @flow
import React from 'react';
import {
	Container,
	Row,
	Col,
	ListGroup,
	ListGroupItem,
	Button,
	ButtonGroup,
	Card,
	CardHeader,
	CardBody,
} from 'reactstrap';

import {
	Switch,
	Route,
} from 'react-router-dom';

import type { BeatEntity } from '@helpers/beat.js';
import { pluralize } from '@helpers/beat.js';

import EntityListContainer from './EntityList.jsx';
import NewEntityModal from './NewEntityModal.jsx';
import EntityDetailContainer from './EntityDetail.jsx';
import SearchBar from './SearchBar.jsx';

type Props = {
	entity: BeatEntity,
};

type State = {
	newOpen: boolean,
};

class EntityHome extends React.Component<Props, State> {
	constructor(props: Props) {
		super(props);
	}

	state = {
		newOpen: false,
	}

	toggleNew = () => this.setState({ newOpen: !this.state.newOpen });

	render () {
		return (
			<Switch>
				<Route exact path={'/:entity/:name+'} component={EntityDetailContainer} />
				<Route>
					<Container>
						<Row className='mb-3'>
							<Col>
								<div className='d-flex'>
									<h3>{ pluralize(this.props.entity) }</h3>
									<SearchBar
										entity={this.props.entity}
									/>
									<div className='ml-auto'>
										<Button outline color='success' onClick={this.toggleNew}>New</Button>
										<NewEntityModal
											toggle={this.toggleNew}
											isOpen={this.state.newOpen}
											entity={this.props.entity}
											nameOrVersion={true}
										/>
									</div>
								</div>
							</Col>
						</Row>
						<Row>
							<Col>
								<EntityListContainer entity={this.props.entity} />
							</Col>
						</Row>
					</Container>
				</Route>
			</Switch>
		);
	}
}

export default EntityHome;