msg

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",

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 {
+class RecommenderRandom extends Component{
     constructor(props){
         super(props);
-
+        this.state={
-  }
+            items : [],
-
+        };
-  componentWillMount() {
-
     }
 
     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 */
 
+        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(
-  componentWillReceiveProps(nextProps) {
+            response => {
-
+                this.setState({
+                    items : response.data.items,
+                })
+            },
+            error => {
+                console.error(error);
             }
-
+        )
-  shouldComponentUpdate(nextProps, nextState) {
-
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-
-  }
-
-  componentWillUnmount() {
-
     }
 
     render(){
+        const opts = {
+            height: '250',
+            width: '250',
+            playerVars: {
+                autoplay: 0
+            }
+        };
         return (
-      <div>
+            <div style={{overflow: 'auto',overflowY : 'scroll'}}>
-
+                {this.state.items.map(function (item,index) {
+                    return(
+                            <div key={index} style={{margin: '1rem',float: 'left',clear : 'left'}}>
+                                <YouTube
+                                    videoId={item.id.videoId}
+                                    opts={opts}
+                                />
+                                <div style={{marginLeft : '10rem',float : 'right',maxWidth:'40rem'}}>
+                                    <h3>{item.snippet.title}</h3>
+                                    <h4>{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
+                                    })}
+                                    </h4>
+                                    <p style={{fontSize: 'large'}}>{item.snippet.description}<br/>~Recommended as a Random Video~</p>
+                                </div>
+                            </div>
+                    )
+                })}
             </div>
         );
     }
 }
-
+export default RecommenderRandom;
-Random.propTypes = {
-
-};
-
-export default Random;