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,115 +1,115 @@
-import React, { Component } from 'react';
-// import PropTypes from 'prop-types';
-import Wikipedia from './areainfo/Wikipedia';
-import { Col, Tabs, Tab } from 'react-bootstrap';
-import axios from 'axios';
+  import React, { Component } from 'react';
+  // import PropTypes from 'prop-types';
+  import Wikipedia from './areainfo/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: {},
-      videoId: '0J2QdDbelmY'
-    };
+  class VideoInfo extends Component {
+    constructor(props) {
+      super(props);
+      this.state={	
+        error: null,
+        isLoaded: false,
+        VideoDetails: {},
+        videoId: '0J2QdDbelmY'
+      };
 
-  }
-
-  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.state.videoId,
-        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+    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});
       }
-    }).then(response => {
-      this.setState({
-        VideoDetails: response.data.items[0],
-        isLoaded: true});
-  }, error => {
-      console.error(error);
-      this.setState({
-        isLoaded: true,
-        error
+    }
+    }
+
+    componentDidMount() {
+      axios.get('https://www.googleapis.com/youtube/v3/videos', {
+        params: {
+          'part': 'snippet,contentDetails,statistics,topicDetails',
+          'id': this.state.videoId,
+          '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) {
-    // console.info('nextProps',nextProps);
-    // console.info('nextState',nextState);
-    if(nextProps.match.params.id === this.state.videoId){}
-    else{
-      this.setState({videoId: nextProps.match.params.id});
-      
+    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) {
+      console.info('prevProps',prevProps);
+      console.info('prevState',prevState);
+    }
+
+    // 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 (
+        <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={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title } />
+    </Tab>
+    <Tab eventKey="b" title="B">
+      <p>{}</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>
+      );
+    }
     }
   }
 
-  componentDidUpdate(prevProps, prevState) {
-		console.info('prevProps',prevProps);
-		console.info('prevState',prevState);
-  }
+  VideoInfo.propTypes = {
 
-  // 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 (
-      <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 = {
-
-};
-
-export default VideoInfo;
+  export default VideoInfo;

src/VideoList.js

@@ -125,18 +125,25 @@ 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>
 						</Col>
-					))}
+					))} 
 				</React.Fragment>
 			);
 		}

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() {
-    wikijs().search(this.props.query).then(data => {
+  componentWillMount() {
+    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>
     );
       }