aggiornata top bar

src/TopBar.js

@@ -9,6 +9,7 @@ import {
 } from 'react-bootstrap'; //eslint-disable-next-line
 import { Link, withRouter } from 'react-router-dom';
 import './css/TopBar.css';
+import './reccomenders/fvitali'
 // import PropTypes from "prop-types";
 
 class TopBar extends Component {
@@ -42,47 +43,37 @@ class TopBar extends Component {
 					<Navbar.Collapse id="basic-navbar-nav">
 						<Nav className="mr-auto">
 							<Link to="/" className="text-light nav-link">Home</Link>
-							<Link to="/link" className="text-light nav-link">Vitali</Link>
+							<Link to={{
+    							pathname: "/fvitali",
+    							search: "?sort=name",
+   								hash: "#the-hash",
+    							state: { fromDashboard: true }
+  							}} className="text-light nav-link">Vitali</Link>
 							<Link to="/link" className="text-light nav-link">Recent</Link>
 							<Link to="/link" className="text-light nav-link">Random</Link>
 							<Link to="/link" className="text-light nav-link">Related</Link>
 							{ <NavDropdown title="Similarity" id="basic-nav-dropdown" >
-								<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+								<NavDropdown.Item href="#action/3.1">
+									Artist
+								</NavDropdown.Item>
 								<NavDropdown.Item href="#action/3.2">
-									Another action
+									Genre
-								</NavDropdown.Item>
-								<NavDropdown.Item href="#action/3.3">
-									Something
-								</NavDropdown.Item>
-								<NavDropdown.Divider />
-								<NavDropdown.Item href="#action/3.4">
-									Separated link
 								</NavDropdown.Item>
 							</NavDropdown> }
 							{ <NavDropdown title="Popolarità locale" id="basic-nav-dropdown" >
-								<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+								<NavDropdown.Item href="#action/3.1">
+									Assoluta
+								</NavDropdown.Item>
 								<NavDropdown.Item href="#action/3.2">
-									Another action
+									Relativa
-								</NavDropdown.Item>
-								<NavDropdown.Item href="#action/3.3">
-									Something
-								</NavDropdown.Item>
-								<NavDropdown.Divider />
-								<NavDropdown.Item href="#action/3.4">
-									Separated link
 								</NavDropdown.Item>
 							</NavDropdown> }
 							{ <NavDropdown title="Popolarità globale" id="basic-nav-dropdown" >
-								<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
+							<NavDropdown.Item href="#action/3.1">
+									Assoluta
+								</NavDropdown.Item>
 								<NavDropdown.Item href="#action/3.2">
-									Another action
+									Relativa
-								</NavDropdown.Item>
-								<NavDropdown.Item href="#action/3.3">
-									Something
-								</NavDropdown.Item>
-								<NavDropdown.Divider />
-								<NavDropdown.Item href="#action/3.4">
-									Separated link
 								</NavDropdown.Item>
 							</NavDropdown> }
 							{ <NavDropdown title="Progetti" id="basic-nav-dropdown" >
@@ -98,6 +89,7 @@ class TopBar extends Component {
 									Separated link
 								</NavDropdown.Item>
 							</NavDropdown> }
+							
 						</Nav>
 						<form className="form-inline" onSubmit={this.handleSubmit}>
 							<FormControl

src/reccomenders/fvitali.js

@@ -1,22 +1,146 @@
-import React, { Component } from 'react';
+//http://site1825.tw.cs.unibo.it/TW/globpop fvitali
-import PropTypes from 'prop-types';
+//http://site1825.tw.cs.unibo.it/video.json originale videolist
 
-axios.get('http://site1825.tw.cs.unibo.it/TW/globpop',
+import React from 'react';
-  {
+import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
-    id:  videoID // variabile con videoid
+import axios from 'axios'; // eslint-disable-line no-unused-vars
-  })
+import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
-  .then(
+/*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
-  response => { // notazione moderna javascript per indicare function(response){}
+
-                // function(response){}  ==  response => {}
+class fvitali extends React.Component {
-    console.log(response);
+	constructor(props) {
-    console.info(response.data);
+		super(props);
+		this.state = {
+			error: null,
+			isLoaded: false,
+			items: [],
+			headers: null
+		};
+		this.getThumbnails = this.getThumbnails.bind(this);
+	}
+
+	componentDidMount() {
+		axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', {
+			'params':{
+				'id':this.props.videoID
+			}
+		}).then(
+			response => {
+				//this.shuffleArray(response.data);
+				//this.getThumbnails(response.data);
+				console.info ('a',response.data);
+				this.setState({
+					isLoaded: true, 
+					items:response.data,
+				});
+			},
+			// Note: it's important to handle errors here
+			// instead of a catch() block so that we don't swallow
+			// exceptions from actual bugs in components.
+			error => {
+				console.error(error);
+				this.setState({
+					isLoaded: true,
+					error
+				});
+			}
+		);
+	}
+
+	// METODI
+	getThumbnails(videoItems) {
+		let idToLookFor = videoItems.map(item => item.videoID);
+		let finalChunk = (videoItems.length % 50) + 100;
+		axios
+			.all([
+				// chain 3 parallel get
+				axios.get('https://www.googleapis.com/youtube/v3/videos', {
+					params: {
+						part: 'snippet',
+						id: idToLookFor.slice(0, 50).toString(),
+						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
+						fields: 'items(id,snippet/thumbnails/medium)'
+					}
+				}),
+				axios.get('https://www.googleapis.com/youtube/v3/videos', {
+					//chain multiple get into promises
+					params: {
+						part: 'snippet',
+						id: idToLookFor.slice(50, 100).toString(),
+						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
+						fields: 'items(id,snippet/thumbnails/medium)'
+					}
+				}),
+				axios.get('https://www.googleapis.com/youtube/v3/videos', {
+					//chain multiple get into promises
+					params: {
+						part: 'snippet',
+						id: idToLookFor.slice(100, finalChunk).toString(),
+						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
+						fields: 'items(id,snippet/thumbnails/medium)'
+					}
+				})
+			])
+			.then(
+				axios.spread((res1, res2, res3) => {
+					let allres = [].concat(
+						res1.data.items,
+						res2.data.items,
+						res3.data.items
+					);
+					allres.map(resCurrentValue => {
+						Object.defineProperty(
+							videoItems.find(videoItem => {
+								return videoItem.videoID === resCurrentValue.id;
+							}),
+							'thumbnail',
+							{ value: resCurrentValue.snippet.thumbnails.medium.url }
+						);
+					});
+					this.setState({
+						isLoaded: true,
+						items: videoItems
+					});
+				})
+			);
+	}
+
+	shuffleArray(videoarray) {
+		for (let i = videoarray.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[videoarray[i], videoarray[j]] = [videoarray[j], videoarray[i]]; // eslint-disable-line no-param-reassign
+		}
+		// Durstenfeld shuffle.
+		// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
+	}
+
+	render() {
+		const { error, isLoaded, items, headers } = this.state;
+		if (error) {
+			return (
+				<React.Fragment>
+					Error: {error.message} -- Cannot get {error.config.url}
+				</React.Fragment>
+			);
+		} else if (!isLoaded) {
+			return (
+				<React.Fragment>
+					<Col>
+						<p className="text-center">Loading...</p>
+					</Col>
+				</React.Fragment>
+			);
+		} else {
+			return (
+				<React.Fragment>
+					{items.reccomender}{items.site}{items.lastWatched}
+					{items.recommended.map(raccomandato=>(<li>{raccomandato.videoID.toString()}</li>))}
+
+				</React.Fragment>
+			);
+		}
+	}
+}
+
+export default fvitali;
 
-  },
-// Note: it's important to handle errors here
-// instead of a catch() block so that we don't swallow
-// exceptions from actual bugs in components.
-  error => {
-    console.error(error);
-  }
-);
-export default fvitali;