Recent Reccomender

src/areainfo/Suggestion.js

@@ -6,6 +6,7 @@ import Related from '../reccomenders/Related';
 import Search from '../reccomenders/Search';
 import fvitali from '../reccomenders/fvitali';
 import popGlobaleAssoluta from '../reccomenders/popGlobaleAssoluta';
+import Recent from '../reccomenders/Recent';
 
 // and so on..
 
@@ -40,6 +41,8 @@ class Suggestion extends Component {
         <Route path='/search/:query' component={Search} />
         <Route path='/video/:id/random' component={Random} />
         <Route path='/video/:id/popGlobalAssoluta' component={popGlobaleAssoluta} />
+        <Route path='/video/:id/recent' component={Recent} />
+
         {/* lasciare questo per ultimo */}
           <Route component={Related} /> 
         </Switch>

src/reccomenders/Recent.js

@@ -0,0 +1,146 @@
+//http://site1825.tw.cs.unibo.it/TW/globpop fvitali
+//http://site1825.tw.cs.unibo.it/video.json originale videolist
+
+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
+/*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
+import moment from "moment";
+
+class Recent extends React.Component {
+		state = {
+			error: null,
+			isLoaded: false,
+			items: [],
+			headers: null
+		};
+
+		ISO_8601parse(a) {
+			return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
+		}
+	
+	componentDidMount() {
+	// 	axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', {
+	// 		'params':{
+	// 			'id':this.props.id
+	// 		}
+	// 	}).then(
+	// 		response => {
+	// 			//this.shuffleArray(response.data);			
+	// 			console.info ('a',response.data);
+			this.getThumbnailsNames(JSON.parse(localStorage.getItem('lastWatched')) );
+	// 							console.info(response.data.recommended); 
+	// 			// 				this.setState({
+	// 			// 	isLoaded: true, 
+	// 			// 	items:response.data.recommended,
+	// 			// });
+
+	// 		},
+	// 		// 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
+	getThumbnailsNames(recentVideoList) {
+		let idToLookFor = recentVideoList.map(item => item.id);
+				axios.get('https://www.googleapis.com/youtube/v3/videos', {
+					params: {
+						part: 'snippet',
+						id: idToLookFor.toString(),
+						key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
+						fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
+					}
+				})
+
+			.then(
+				res1 => {
+					res1.data.items.map(resCurrentValue => 
+						Object.defineProperties(
+							recentVideoList.find(videoItem => {
+								return videoItem.id === resCurrentValue.id;
+							}),
+							{
+							'thumbnail':
+							{ value: resCurrentValue.snippet.thumbnails.medium.url },
+							'name':
+							{value: resCurrentValue.snippet.title}
+						})
+					);
+					this.setState({
+						isLoaded: true,
+						items: recentVideoList
+					});
+				})
+	}
+
+
+
+	/*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 recentVideoList = JSON.parse(localStorage.getItem('lastWatched')) 
+		const { error, isLoaded, items } = 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 md="4">
+                            <Card key={item.id}>
+                                <Link
+                                    to={{
+                                        pathname: '/video/' + item.id,
+                                    }}
+                                >
+                                    <Card.Img
+                                        src={item.thumbnail}
+                                        alt={'Thumbnail of ' + item.name}
+                                    />
+                                    <Card.ImgOverlay>
+                                        <Card.Title className="bg-dark d-inline text-white">
+                                             {item.name}<br/>
+                                             {item.lastSelected}
+                                        </Card.Title>
+                                    </Card.ImgOverlay>
+                                </Link>
+                            </Card>
+                        </Col>))}
+
+				</React.Fragment>
+			);
+		}
+	}
+}
+
+
+
+export default Recent;

src/reccomenders/fvitali.js

@@ -64,7 +64,7 @@ class fvitali extends React.Component {
 
 			.then(
 				res1 => {
-					res1.data.items.map(resCurrentValue => {
+					res1.data.items.map(resCurrentValue => 
 						Object.defineProperties(
 							reccomended.find(videoItem => {
 								return videoItem.videoID === resCurrentValue.id;
@@ -74,8 +74,8 @@ class fvitali extends React.Component {
 							{ value: resCurrentValue.snippet.thumbnails.medium.url },
 							'name':
 							{value: resCurrentValue.snippet.title}
-						});
+						})
-					});
+					);
 					this.setState({
 						isLoaded: true,
 						items: reccomended
@@ -95,8 +95,7 @@ class fvitali extends React.Component {
 	}*/
 
 	render() {
-		const ISO_8601parse = this.ISO_8601parse;
+		const { error, isLoaded, items } = this.state;
-		const { error, isLoaded, items, headers } = this.state;
 		if (error) {
 			return (
 				<React.Fragment>
@@ -115,7 +114,7 @@ class fvitali extends React.Component {
 			return (
 				<React.Fragment>
 					{items.map(item=>( <Col md="4">
-                            <Card>
+                            <Card key={item.videoID}>
                                 <Link
                                     to={{
                                         pathname: '/video/' + item.videoID,