bozza infovideo e wikipedia

src/VideoInfo.js

@@ -1,47 +1,98 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
+import Wikipedia from './Wikipedia';
+import { Col, Tabs, Tab } from 'react-bootstrap';
+import axios from 'axios';
 
 class VideoInfo extends Component {
   constructor(props) {
     super(props);
+    this.state={	
+      error: null,
+			isLoaded: false,
+      VideoDetails: {}
+    };
 
   }
 
-  componentWillMount() {
+  // componentWillMount() {
 
-  }
+  // }
 
   componentDidMount() {
-
+    axios.get('https://www.googleapis.com/youtube/v3/videos', {
+      params: {
+        'part': 'snippet,contentDetails,statistics,topicDetails',
+        'id': this.props.match.params.id,
+        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+      }
+    }).then(response => {
+      this.setState({
+        VideoDetails: response.data.items[0],
+        isLoaded: true});
+  }, error => {
+      console.error(error);
+      this.setState({
+        isLoaded: true,
+        error
+      });
+    });
   }
 
-  componentWillReceiveProps(nextProps) {
+  // componentWillReceiveProps(nextProps) {
 
-  }
+  // }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  // shouldComponentUpdate(nextProps, nextState) {
 
-  }
+  // }
 
-  componentWillUpdate(nextProps, nextState) {
+  // componentWillUpdate(nextProps, nextState) {
 
-  }
+  // }
 
-  componentDidUpdate(prevProps, prevState) {
+  // componentDidUpdate(prevProps, prevState) {
 
-  }
+  // }
 
-  componentWillUnmount() {
+  // componentWillUnmount() {
 
-  }
+  // }
 
   render() {
+    const { error, isLoaded, VideoDetails } = this.state;
+    if (error) {
+			return (
+				<React.Fragment>
+					Error: {error.message} -- Cannot get {error.config.url}
+				</React.Fragment>
+			);
+		} else if (!isLoaded) {
+			return <React.Fragment>Loading...</React.Fragment>;
+		} else {
     return (
-      <div>
-
-      </div>
+      <React.Fragment>
+        <Col className='border border-dark' lg={{span:7}}>
+        {/* codice per tabs reccomenders */}
+        <Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
+  <Tab eventKey="a" title="A">
+    <Wikipedia query={ VideoDetails.snippet.title } />
+  </Tab>
+  <Tab eventKey="b" title="B">
+    <p>B</p>
+  </Tab>
+  <Tab eventKey="c" title="C">
+  <p>C</p>
+  </Tab>
+</Tabs>
+        </Col>
+        <Col className='border border-dark'  lg={{span:4, offset:1}}>
+        <p>2</p>
+        </Col>
+      </React.Fragment>
     );
   }
+  }
 }
 
 VideoInfo.propTypes = {