bozza infovideo e wikipedia

src/App.js

@@ -5,7 +5,7 @@ import { Row, Col } from 'react-bootstrap'; // eslint-disable-line no-unused-var
 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 Test from './Test';
+import VideoInfo from './VideoInfo';
 import './App.css';
 
 class App extends React.Component {
@@ -24,10 +24,9 @@ class App extends React.Component {
 				</Row>
 				<Row>
 					<Switch>				
-						<Route path="/wikipedia" component={Test} />
+					<Route path="/video/:id" component={VideoInfo} />
 					<Route exact path='/' component={VideoList} />
 					</Switch>
-					
 				</Row>
 			</React.Fragment>
 		);

src/Test.js

@@ -1,50 +0,0 @@
-import React, { Component } from 'react';
-import wikijs from 'wikijs';
-//import PropTypes from 'prop-types';
-
-class Test extends Component {
-  constructor(props) {
-    super(props);
-
-  }
-
-  componentWillMount() {
-
-  }
-
-  componentDidMount() {
-    wikijs.find('star wars').then(data => console.log(data.results.length));
-  }
-
-  componentWillReceiveProps(nextProps) {
-
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-
-  }
-
-  componentWillUnmount() {
-
-  }
-
-  render() {
-    return (
-      <div>
-
-      </div>
-    );
-  }
-}
-Test.propTypes = {
-
-};
-export default Test;

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>
+      <React.Fragment>
-
+        <Col className='border border-dark' lg={{span:7}}>
-      </div>
+        {/* 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 = {

src/Wikipedia.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+// import PropTypes from 'prop-types';
+import wikijs from 'wikijs';
+
+class Wikipedia extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data : {},
+      error: null,
+      isLoaded: false
+     
+    };
+
+  }
+
+  // componentWillMount() {
+
+  // }
+
+  componentDidMount() {
+    wikijs().search(this.props.query,1).then(data => {
+      this.setState({
+        data, 
+        isLoaded: true
+      });
+      console.log(data);
+    }, error => {
+      console.error(error);
+      this.setState({
+        isLoaded: true,
+        error
+      });
+    });
+  }
+
+  // componentWillReceiveProps(nextProps) {
+
+  // }
+
+  // shouldComponentUpdate(nextProps, nextState) {
+
+  // }
+
+  // componentWillUpdate(nextProps, nextState) {
+
+  // }
+
+  // componentDidUpdate(prevProps, prevState) {
+
+  // }
+
+  // componentWillUnmount() {
+
+  // }
+
+  render() {
+    const { data, error, isLoaded } = 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>
+      <p>risultato ricerca wikipedia: { data.results[0] }</p>
+      </div>
+    );
+      }
+  }
+}
+
+export default Wikipedia;