succo ace

src/App.js

@@ -1,30 +1,50 @@
 import React from 'react';
-import { Route, Switch } 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 { Route, Switch, withRouter, matchPath } 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 VideoList from './VideoList';
 import Suggestion from './areainfo/Suggestion';
 import { ReactHeight } from 'react-height';
 import './css/App.css';
 
 class App extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			playerHeight: null,
-			navHeight: null,
-			blackbgHeight: null,
-			isInfoToggled: false
-		};
+	state = {
+		playerHeight: null,
+		navHeight: null,
+		blackbgHeight: null,
+		isInfoToggled: false,
+		videoId: localStorage['lastId']?localStorage['lastId']:'0J2QdDbelmY'
+	};
+
+// 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() {
+
+	render() {
 		return (
 			<React.Fragment>
-				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
+				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
 					<TopBar />
 				</ReactHeight>
 				<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" >
@@ -33,7 +53,7 @@ render() {
 						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 })}>
-							<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> {/* change component to children */}
+							<VideoPlayer videoId={this.state.videoId}/>
 						</ReactHeight>
 					</Col>
 					<Col
@@ -42,18 +62,18 @@ render() {
 						className="p-0 p-sm-0"
 						style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
 						<div class="d-flex justify-content-center">
-						<Button
-							variant="outline-light"
-							onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
-							className="pt-1 "
-							aria-controls="infovideo-collapse"
-							aria-expanded={this.state.isInfoToggled}>
-							{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
-						</Button>
-						</div>	
+							<Button
+								variant="outline-light"
+								onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
+								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 path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} />
+								<VideoInfo videoId={this.state.videoId} />
 							</div>
 						</Collapse>
 					</Col>
@@ -70,4 +90,4 @@ render() {
 	}
 }
 
-export default App;
+export default withRouter(App);