non mi ricordo cosa ho fatto

package-lock.json

@@ -5854,7 +5854,8 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5946,7 +5947,8 @@
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },

src/TopBar.js

@@ -44,7 +44,7 @@ class TopBar extends Component {
 						<Nav className="mr-auto">
 							<Link to="/" className="text-light nav-link">Home</Link>
 							<Link to="/link" className="text-light nav-link">link</Link>
-							<NavDropdown title="arnaldo" id="basic-nav-dropdown" >
+							{/* <NavDropdown title="arnaldo" id="basic-nav-dropdown" >
 								<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
 								<NavDropdown.Item href="#action/3.2">
 									Another action
@@ -56,7 +56,7 @@ class TopBar extends Component {
 								<NavDropdown.Item href="#action/3.4">
 									Separated link
 								</NavDropdown.Item>
-							</NavDropdown>
+							</NavDropdown> */}
 						</Nav>
 						<form className="form-inline" onSubmit={this.handleSubmit}>
 							<FormControl

src/VideoInfo.js

@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+  import React, { Component } from 'react';
-// import PropTypes from 'prop-types';
+  // import PropTypes from 'prop-types';
-import Wikipedia from './areainfo/Wikipedia';
+  import Wikipedia from './areainfo/Wikipedia';
-import { Col, Tabs, Tab } from 'react-bootstrap';
+  import { Col, Tabs, Tab } from 'react-bootstrap';
-import axios from 'axios';
+  import axios from 'axios';
 
-class VideoInfo extends Component {
+  class VideoInfo extends Component {
     constructor(props) {
       super(props);
       this.state={	
@@ -89,15 +89,15 @@ class VideoInfo extends Component {
           {/* codice per tabs reccomenders */}
           <Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
     <Tab eventKey="a" title="A">
-    <Wikipedia query={ VideoDetails.snippet.title } />
+      <Wikipedia query={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title } />
     </Tab>
     <Tab eventKey="b" title="B">
-    <p>B</p>
+      <p>{}</p>
     </Tab>
     <Tab eventKey="c" title="C">
     <p>C</p>
     </Tab>
-</Tabs>
+  </Tabs>
           </Col>
           <Col className='border border-dark'  lg={{span:4, offset:1}}>
           <p>2</p>
@@ -106,10 +106,10 @@ class VideoInfo extends Component {
       );
     }
     }
-}
+  }
 
-VideoInfo.propTypes = {
+  VideoInfo.propTypes = {
 
-};
+  };
 
-export default VideoInfo;
+  export default VideoInfo;

src/VideoList.js

@@ -125,13 +125,20 @@ class VideoList extends React.Component {
 					{items.map(item => (
 						<Col key={item.videoID} lg={{ span: 3 }} md="6">
 							<Card className="my-1 carta">
-								<Link to={{ pathname: '/video/' + item.videoID }}>
+								<Link to={{
+									 pathname: '/video/' + item.videoID, 
+									 state: {
+										 artist: item.artist,
+										 title: item.title +' '+ item.artist
+										}
+									 }}>
 									{/* {item.artist} - {item.title}		{item.videoID}					{item.category} */}
 									<Card.Img src={item.thumbnail} alt={'Thumbnail of '+item.title } />
 									<Card.ImgOverlay>
 										<Card.Title className="bg-dark d-inline text-white">
 											{item.artist} - {item.title}
 										</Card.Title>
+										<p className='d-table d-lg-none card-text bg-dark text-white'>{item.category}</p>
 									</Card.ImgOverlay>
 								</Link>
 							</Card>

src/VideoPlayer.js

@@ -27,7 +27,7 @@ class VideoPlayer extends Component {
 
 	}
 
-	componentDidMount(){
+	componentWillMount(){
 		if(this.props.match.params.id)
 			this.setState((state, props) => { return { videoId: props.match.params.id  }});
 			
@@ -70,7 +70,7 @@ class VideoPlayer extends Component {
 		// console.warn(event.target.getDuration());
 	}
 	_onStateChange(event) {
-		// console.info('statechange: ', event)
+		// console.info('statechange: ', event.data)
 	}
 }
 

src/areainfo/Wikipedia.js

@@ -12,29 +12,36 @@ class Wikipedia extends Component {
       isLoaded: false
     };
 this.getWikiBox = this.getWikiBox.bind(this);
+this.raffina = this.raffina.bind(this);
   }
 
   getWikiBox(name){
     wikijs()
     .page(name)
     .then(page => page.fullInfo())
-    .then(infobox => console.log(infobox)
+    .then(infobox => console.log('infobox', infobox)
       //this.setState({ infobox })
     );
     //console.log('infobox', this.state.infobox)
   }
 
+  raffina(results){
+    console.log('raffina',results);
+    return results[0];
+  }
+
   // componentWillMount() {
 
   // }
 
-  componentDidMount() {
+  componentWillMount() {
-    wikijs().search(this.props.query).then(data => {
+    wikijs().find(this.props.query, this.raffina).then(data => {
       this.setState({
         data, 
         isLoaded: true
       });
-      console.log(data);
+      console.log(data.html());
+      //this.getWikiBox(data.results[0]);
     }, error => {
       console.error(error);
       this.setState({
@@ -77,7 +84,7 @@ this.getWikiBox = this.getWikiBox.bind(this);
       } else {
       return (
       <div>
-      <p>risultato ricerca wikipedia: { data.results[0] }</p>
+        {/* <p>risultato ricerca wikipedia: { data.results[0] }</p> */}
       </div>
     );
       }