riorganizzazione files, gestione id videoplayer e videoinfo

src/VideoList.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
 import axios from 'axios'; // eslint-disable-line no-unused-vars
 import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
+import './css/VideoList.css';
 /*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
 
 class VideoList extends React.Component {
@@ -13,16 +14,14 @@ class VideoList extends React.Component {
 			items: [],
 			headers: null
 		};
+		this.getThumbnails = this.getThumbnails.bind(this);
 	}
 
 	componentDidMount() {
 		axios.get('http://site1825.tw.cs.unibo.it/video.json').then(
 			response => {
 				this.shuffleArray(response.data);
-				this.setState({
-					headers: response.config
-				});
-				return this.getThumbnails(response.data);
+				this.getThumbnails(response.data);
 			},
 			// Note: it's important to handle errors here
 			// instead of a catch() block so that we don't swallow
@@ -37,51 +36,7 @@ class VideoList extends React.Component {
 		);
 	}
 
-	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>Loading...</React.Fragment>;
-		} else {
-			return (
-				<React.Fragment>
-					{items.map(item => (
-						<Col key={item.videoID} lg="4" md="6">
-							<Card className="my-1">
-								<Link to={{ pathname: '/video/' + item.videoID }}>
-									<ListGroup>
-										<ListGroup.Item className="bg-secondary text-white">
-											{item.artist} - {item.title}
-										</ListGroup.Item>
-										<ListGroup.Item>
-											<span className="bg-info text-white">
-												{' '}
-												{item.videoID}
-											</span>{' '}
-											{item.category}
-										</ListGroup.Item>
-									</ListGroup>
-								</Link>
-							</Card>
-						</Col>
-					))}
-				</React.Fragment>
-			);
-		}
-	}
-	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
-	}
+// METODI
 	getThumbnails(videoItems) {
 		let idToLookFor = videoItems.map(item => item.videoID);
 		let finalChunk = (videoItems.length % 50) + 100;
@@ -122,7 +77,7 @@ class VideoList extends React.Component {
 						res2.data.items,
 						res3.data.items
 					);
-					allres.forEach(resCurrentValue => {
+					allres.map(resCurrentValue => {
 						Object.defineProperty(
 							videoItems.find(videoItem => {
 								return videoItem.videoID === resCurrentValue.id;
@@ -131,13 +86,61 @@ class VideoList extends React.Component {
 							{ value: resCurrentValue.snippet.thumbnails.medium.url }
 						);
 					});
+					this.setState({
+						isLoaded: true,
+						items: videoItems
+					});
 				})
 			);
-		return 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.map(item => (
+						<Col key={item.videoID} lg={{ span: 3 }} md="6">
+							<Card className="my-1 carta">
+								<Link to={{ pathname: '/video/' + item.videoID }}>
+									{/* {item.artist} - {item.title}		{item.videoID}					{item.category} */}
+									<Card.Img src={item.thumbnail} alt={'Thumbnail of '+item.title } />
+									<Card.ImgOverlay>
+										<Card.Title className="bg-dark d-inline text-white">
+											{item.artist} - {item.title}
+										</Card.Title>
+									</Card.ImgOverlay>
+								</Link>
+							</Card>
+						</Col>
+					))}
+				</React.Fragment>
+			);
+		}
 	}
 }
 
-export default VideoList;
+export default VideoList;