diff --git a/package.json b/package.json index dedacce..33452a6 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,9 @@ "react-router-dom": "^4.3.1", "react-scripts": "2.1.1", "react-youtube": "^7.8.0", - "wikijs": "^4.8.1" + "wikijs": "^4.8.1", + "axios": "latest", + "axios": "latest" }, "scripts": { "start": "react-scripts start", diff --git a/src/reccomenders/Random.js b/src/reccomenders/Random.js index 0fa8de7..8b7e7e4 100644 --- a/src/reccomenders/Random.js +++ b/src/reccomenders/Random.js @@ -1,51 +1,75 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import './App.css'; +import 'bootstrap/dist/css/bootstrap.css'; +import axios from "axios"; +import createpageToken from 'youtube-page-token'; +import YouTube from "react-youtube"; -class Random extends Component { - constructor(props) { - super(props); +class RecommenderRandom extends Component{ + constructor(props){ + super(props); + this.state={ + items : [], + }; + } - } + componentDidMount(){ + let pos = Math.floor(Math.random() * 500); + let pageToken = createpageToken(pos); /* createPageToken(pos) restituisce il pageToken relativo al numero + di pagina che gli viene passato(in questo caso pos) che verrai poi usato + come paramentro da axios per ottenere una determinata pagina di risultati */ - componentWillMount() { + axios.get("https://www.googleapis.com/youtube/v3/search", { + params: { + 'part': 'snippet', + 'topicId' : '/m/04rlf', //Filtro per la musica.In questo caso il valore รจ quello della parent directory + 'type' : 'video', //che contiene tutti i generi di musica + 'maxResults': '20', + 'pageToken' : pageToken, + 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' + } + }).then( + response => { + this.setState({ + items : response.data.items, + }) + }, + error => { + console.error(error); + } + ) + } - } - - componentDidMount() { - - } - - componentWillReceiveProps(nextProps) { - - } - - shouldComponentUpdate(nextProps, nextState) { - - } - - componentWillUpdate(nextProps, nextState) { - - } - - componentDidUpdate(prevProps, prevState) { - - } - - componentWillUnmount() { - - } - - render() { - return ( -
- -
- ); - } + render(){ + const opts = { + height: '250', + width: '250', + playerVars: { + autoplay: 0 + } + }; + return ( +
+ {this.state.items.map(function (item,index) { + return( +
+ +
+

{item.snippet.title}

+

{item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){ + return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani + })} +

+

{item.snippet.description}
~Recommended as a Random Video~

+
+
+ ) + })} +
+ ); + } } - -Random.propTypes = { - -}; - -export default Random; \ No newline at end of file +export default RecommenderRandom; \ No newline at end of file