tecnologiabanana/src/App.js

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
import 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars
import { Row, Col, Button, Collapse } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
import VideoInfo from './VideoInfo';
import {ReactHeight} from 'react-height';
import './css/App.css';

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			isInfoToggled: false,
			maxHeight: null,
			navHeight: null
		};
}

	render() {
		return (
			<React.Fragment>
				<ReactHeight className="row" onHeightReady={height => this.setState({navHeight:height})}>
				<TopBar />
				</ReactHeight>
					<ReactHeight className="upperSection px-2 row" onHeightReady={height => this.setState({maxHeight:height})}>
					<Col xs="12" lg={this.state.isInfoToggled ? { span: 6, offset: 1, order: 2 } : { span: 7, offset: 1, order: 2 }} className="align-content-center pt-2 p-1 pr-2">
						<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
					</Col>
					<Col xs="12" lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }} style={{ 'overflow': "auto", 'max-height': this.state.maxHeight }} className="w-75 h-100 py-2 p-0 p-sm-0">
						<div className='d-flex justify-content-center pt-2'>
							<Button variant="outline-light"
								onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
								className="w-75 align-content-center"
								aria-controls="infovideo-collapse"
								aria-expanded={this.state.isInfoToggled}>
								{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
							</Button>
						</div>
						<Collapse in={this.state.isInfoToggled}>
							<div className="pt-2" id="infovideo-collapse">
								<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
							</div>
						</Collapse>
					</Col>
					</ReactHeight>
				<Row style={{"max-height": 'calc(99vh - '+this.state.maxHeight+'px - '+this.state.navHeight+'px)'}} className='downSection'>
					<Switch>
						<Route exact path='/' component={VideoList} />
						<Route render={() => <div>URL not found</div>} />
					</Switch>
				</Row>
			</React.Fragment>
		);
	}
}

export default App;