tecnologiabanana/src/reccomenders/Random.js

import React, { Component } from 'react';
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 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 */

        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);
            }
        )
    }

    render(){
        const opts = {
            height: '250',
            width: '250',
            playerVars: {
                autoplay: 0
            }
        };
        return (
            <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;