reccomender similarity genere

-modificato VideoInfo per far funzionare il reccomender

src/Suggestion.js

@@ -9,7 +9,7 @@ import popGlobaleAssoluta from './reccomenders/popGlobaleAssoluta';
 import Recent from './reccomenders/Recent';
 import similarityArtist from './reccomenders/similarityArtist';
 import popLocaleAss from './reccomenders/popLocaleAss';
-import genreSimilarity from "./reccomenders/genreSimilarity";
+import genreSimilarity from './reccomenders/genreSimilarity';
 
 // and so on..
 
@@ -39,6 +39,7 @@ class Suggestion extends Component {
     return (
       <React.Fragment>
             <Switch>
+              <Route path='/video/:id/genreSimilarity' component={genreSimilarity} />
               <Route path='/video/:id/vitali' component={fvitali} />
               <Route path='/search/:query' component={Search} />
               <Route path='/video/:id/random' component={Random} />

src/TopBar.js

@@ -47,7 +47,7 @@ class TopBar extends Component {
 									</Link>
 								
 								
-									<Link to={{ pathname: `/video/${localStorage['lastId']}/...` }} className="text-dark nav-link">
+									<Link to={{ pathname: `/video/${localStorage['lastId']}/genreSimilarity` }} className="text-dark nav-link">
 										Genre
 									</Link>
 								

src/VideoInfo.js

@@ -50,7 +50,9 @@ class VideoInfo extends React.Component {
                     comments: commentThreadResponse.data.items,
                     isLoaded: true
                 });
-                //localStorage.setItem('lastTopic',videosResponse.data.items[0])
+                let index = videosResponse.data.items[0].topicDetails.relevantTopicIds.indexOf('/m/04rlf');
+                videosResponse.data.items[0].topicDetails.relevantTopicIds.splice(index, 1);
+                localStorage.setItem('lastTopic',videosResponse.data.items[0].topicDetails.relevantTopicIds);
             }), error => {
                 console.error(error);
                 this.setState({

src/Wikipedia.js

@@ -193,7 +193,7 @@ class Wikipedia extends Component {
 				}
 				return new Promise ((resolve,reject) => {
 					timerId1 = window.setInterval(()=>{
-						if((this.state.wikipedia !== 'undefined') && (this.state.wikidataQ !== 'undefined') && (this.state.wikidata !== 'undefined'))
+						if((this.state.wikipedia === 'undefined') || (this.state.wikidataQ === 'undefined') || (this.state.wikidata === 'undefined'))
 							resolve({
 								artist: this.state.wikipedia.info.artist.toString(),
 					genre: this.state.wikidataQ[this.state.wikidata.claims["P136"][0].mainsnak.datavalue.value.id].labels.en.value.toString()

src/index.js

@@ -14,6 +14,7 @@ localStorage['currentVideoInfo']? function(){}() : localStorage.setItem('current
     'artist':'Seven Nation Army',
     'genre':'Rock'
 }));
+localStorage['lastTopic']? function(){}() : localStorage.setItem('lastTopic','/m/04rlf');
 
 ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
 registerServiceWorker();

src/reccomenders/genreSimilarity.js

@@ -1,20 +1,31 @@
 import React, { Component } from 'react';
 import axios from 'axios';
+import {Card, Col, Tab, Tabs} from "react-bootstrap";
+import createpageToken from 'youtube-page-token';
+import {Link} from "react-router-dom";
+import moment from "moment";
 
 class genreSimilarity extends Component {
     state={
-        videoId : localStorage['lastId'],
-        //videoTopic : localStorage['lastTopic'],
         items : []
+    };
+
+    ISO_8601parse(a) {
+        return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
     }
 
     componentDidMount() {
+        let pos = Math.floor(Math.random() * 100);
+        let pageToken = createpageToken(pos);
+
         axios.get("https://www.googleapis.com/youtube/v3/search", {
             params: {
                 'part': 'snippet',
-                'topicId': this.videoTopic,
+                'topicId': localStorage['lastTopic'],
                 'type': 'video',
                 'maxResults': '21',
+                'order' : 'viewCount',
+                'pageToken' : pageToken,
                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
             }
         }).then(
@@ -22,17 +33,41 @@ class genreSimilarity extends Component {
                 this.setState({
                     items: response.data.items,
                 })
-                console.log(response);
             },
             error => {
                 console.error(error);
             }
         )
-        console.log("dfadfsd");
     }
 
     render(){
-        return(3);
+        const ISO_8601parse = this.ISO_8601parse;
+        return (<React.Fragment>
+            {this.state.items.map(function (item,index) {
+                return(
+                    <Col key={index} md='4'>
+                        <Card>
+                            <Link
+                                to={{
+                                    pathname: '/video/' + item.id.videoId,
+                                }}
+                            >
+                                <Card.Img
+                                    src={item.snippet.thumbnails.high.url}
+                                    alt={'Thumbnail of ' + item.snippet.title}
+                                />
+                                <Card.ImgOverlay>
+                                    <Card.Title className="bg-dark d-inline text-white">
+                                        {item.snippet.title}<br/>
+                                        {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
+                                    </Card.Title>
+                                </Card.ImgOverlay>
+                            </Link>
+                        </Card>
+                    </Col>
+                )
+            })}
+        </React.Fragment> );
     }
 }