From 10d54b51e6ddcd5b470d5a5bd970159d78a2c860 Mon Sep 17 00:00:00 2001
From: Giampiero Galeazzi <simone.ferrari1@outlook.com>
Date: Sat, 2 Mar 2019 11:20:15 +0100
Subject: [PATCH] reccomender similarity genere -modificato VideoInfo per far
 funzionare il reccomender

---
 src/Suggestion.js                   |  3 +-
 src/TopBar.js                       |  2 +-
 src/VideoInfo.js                    |  4 ++-
 src/Wikipedia.js                    |  2 +-
 src/index.js                        |  1 +
 src/reccomenders/genreSimilarity.js | 47 +++++++++++++++++++++++++----
 6 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/Suggestion.js b/src/Suggestion.js
index 438b117..06d6322 100644
--- a/src/Suggestion.js
+++ b/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} />
diff --git a/src/TopBar.js b/src/TopBar.js
index b0d4992..2a402ba 100644
--- a/src/TopBar.js
+++ b/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>
 								
diff --git a/src/VideoInfo.js b/src/VideoInfo.js
index cddbd61..91e687e 100644
--- a/src/VideoInfo.js
+++ b/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({
diff --git a/src/Wikipedia.js b/src/Wikipedia.js
index ba61a56..cdc4326 100644
--- a/src/Wikipedia.js
+++ b/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()
diff --git a/src/index.js b/src/index.js
index fb68207..319cba9 100644
--- a/src/index.js
+++ b/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();
diff --git a/src/reccomenders/genreSimilarity.js b/src/reccomenders/genreSimilarity.js
index 2f24ea6..b4f31f8 100644
--- a/src/reccomenders/genreSimilarity.js
+++ b/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> );
     }
 }