tecnologiabanana/src/reccomenders/Random.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import axios from "axios";
import createpageToken from 'youtube-page-token';
import {Card} from "react-bootstrap";
import {Link} from "react-router-dom";

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': '21',
                'pageToken' : pageToken,
                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
            }
        }).then(
            response => {
                this.setState({
                    items : response.data.items,
                })
            },
            error => {
                console.error(error);
            }
        )
    }

    render(){
        return (
            <div style={{width: '100rem',height:'100rem'}}>
                {this.state.items.map(function (item,index) {
                    return(
                        <div key={index} style={{margin: '1rem',float: 'left'}}>
                            <Card>
                                <Link
                                    to={{
                                        pathname: '/video/' + item.id.videoId,
                                    }}
                                >
                                    <Card.Img
                                        src={item.snippet.thumbnails.high.url}
                                        alt={'Thumbnail of ' + item.title}
                                        style={{width:'30rem',height:'20rem'}}
                                    />
                                    <Card.ImgOverlay>
                                        <Card.Title className="bg-dark d-inline text-white">
                                            {item.snippet.title}<br/>
                                            {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
                                        })}
                                        </Card.Title>
                                    </Card.ImgOverlay>
                                </Link>
                            </Card>
                        </div>
                    )
                })}
            </div>
        );
    }
}
export default RecommenderRandom;