tecnologiabanana/src/App.js

import React from 'react';
import { Route, Switch, withRouter, matchPath, HashRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import { Row, Col, Button, Collapse } from 'react-bootstrap';
import TopBar from './TopBar';
import VideoPlayer from './VideoPlayer';
import VideoInfo from './VideoInfo';
import VideoList from './VideoList';
import Suggestion from './areainfo/Suggestion';
import { ReactHeight } from 'react-height';
import './css/App.css';


class App extends React.Component {
	state = {
		playerHeight: null,
		navHeight: null,
		blackbgHeight: null,
		dirtyBg: true,
		isInfoToggled: false,
		videoId: localStorage['lastId']
	};

// componentDidMount(){

// }

// componentDidUpdate(prevProps, prevState) {
	
// }

static getDerivedStateFromProps(nextProps, prevState) {
	let idMatch = matchPath(nextProps.location.pathname, {
		path: "/video/:id",
		exact: true,
		strict: false
	});
	if(idMatch && idMatch.params.id !== prevState.videoId){ 
		localStorage.setItem('lastId', idMatch.params.id)
		return {videoId: idMatch.params.id }; 
		}
	return null;
}


	render() {
		return (
			<React.Fragment>
				{/* <HashRouter/> */}
				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
					<TopBar />
				</ReactHeight>
				<ReactHeight dirty={this.state.dirtyBg} onHeightReady={height => this.setState({ blackbgHeight: height, dirtyBg: false })} className="row upperSection p-2 px-5" >
					<Col
						xs="12"
						lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
						className="align-content-center pt-2 p-1 pr-2">
						<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
							<VideoPlayer videoId={this.state.videoId}/>
						</ReactHeight>
					</Col>
					<Col
						xs="12"
						lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
						className="p-0 p-sm-0"
						style={window.innerWidth < 992 ? { 'overflow': "auto", 'display':'fixed' , 'maxHeight':this.state.playerHeight*1.4+'px'} : { 'overflow': "auto" , 'maxHeight':`${this.state.playerHeight}px`}}> 
						{/* true = style for xs ;; false = style for lg */}
						<div className="d-flex justify-content-center">
							<Button
								variant="outline-light"
								onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled, dirtyBg: true })}
								className="pt-1 "
								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-1" id="infovideo-collapse">
								<Route render={(props)=> <VideoInfo {...props} videoId={this.state.videoId}/>} />
							</div>
						</Collapse>
					</Col>
				</ReactHeight>
				<Row style={{ "maxHeight": `calc(98vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
					<Switch>
						<Route exact path='/' component={VideoList} />
						<Route path={"/video/:id"} component={Suggestion} />
						<Route path={"/search/:query"} component={Suggestion} />
						<Route render={() => <div>URL not found</div>} />
					</Switch>
				</Row>
			</React.Fragment>
		);
	}
}

export default withRouter(App);