riorganizzazione files, gestione id videoplayer e videoinfo

src/VideoInfo.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 // import PropTypes from 'prop-types';
-import Wikipedia from './Wikipedia';
+import Wikipedia from './areainfo/Wikipedia';
 import { Col, Tabs, Tab } from 'react-bootstrap';
 import axios from 'axios';
 
@@ -10,20 +10,26 @@ class VideoInfo extends Component {
     this.state={	
       error: null,
 			isLoaded: false,
-      VideoDetails: {}
+      VideoDetails: {},
+      videoId: '0J2QdDbelmY'
     };
 
   }
 
-  // componentWillMount() {
-
-  // }
+  componentWillMount() {
+    if(this.props.match.params.id){
+    if(this.props.match.params.id === this.state.videoId){}
+    else{
+      this.setState({videoId: this.props.match.params.id});
+    }
+  }
+  }
 
   componentDidMount() {
     axios.get('https://www.googleapis.com/youtube/v3/videos', {
       params: {
         'part': 'snippet,contentDetails,statistics,topicDetails',
-        'id': this.props.match.params.id,
+        'id': this.state.videoId,
         'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
       }
     }).then(response => {
@@ -47,13 +53,20 @@ class VideoInfo extends Component {
 
   // }
 
-  // componentWillUpdate(nextProps, nextState) {
+  componentWillUpdate(nextProps, nextState) {
+    // console.info('nextProps',nextProps);
+    // console.info('nextState',nextState);
+    if(nextProps.match.params.id === this.state.videoId){}
+    else{
+      this.setState({videoId: nextProps.match.params.id});
+      
+    }
+  }
 
-  // }
-
-  // componentDidUpdate(prevProps, prevState) {
-
-  // }
+  componentDidUpdate(prevProps, prevState) {
+		console.info('prevProps',prevProps);
+		console.info('prevState',prevState);
+  }
 
   // componentWillUnmount() {