mocc a mammt

This commit is contained in:
Gregorio
2019-03-04 14:19:03 +01:00
parent 546396c7cc
commit 4d5e96a0e8
+25 -31
View File
@@ -3,6 +3,7 @@ import { Col, Media, Card } from 'react-bootstrap'; // eslint-disable-line no-un
import axios from 'axios'; // 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 { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
import moment from "moment"; import moment from "moment";
var _ = require('lodash');
class popGlobaleAssoluta extends React.Component { class popGlobaleAssoluta extends React.Component {
state = { state = {
@@ -14,7 +15,7 @@ class popGlobaleAssoluta extends React.Component {
componentDidMount() { componentDidMount() {
// let listSiti = ['1828', '1829', '1838', '1839', '1846', '1822', '1847', '1831', '1827', '1848', '1824', '1830', '1836', '1850', '1849', '1851', '1861', '1823', '1863', '1834', '1904', '1906', '1901', '1862', '1859', '1841', '1905', '1864', '1840', '1860', '1858', '1835', '1911', '1913', '1826', '1855', '1907', '1912', '1903', '1915', '1854', '1910']; // let listSiti = ['1828', '1829', '1838', '1839', '1846', '1822', '1847', '1831', '1827', '1848', '1824', '1830', '1836', '1850', '1849', '1851', '1861', '1823', '1863', '1834', '1904', '1906', '1901', '1862', '1859', '1841', '1905', '1864', '1840', '1860', '1858', '1835', '1911', '1913', '1826', '1855', '1907', '1912', '1903', '1915', '1854', '1910'];
let listSiti = ['1828', '1838', '1839', '1846', '1831', '1827', '1823', '1863', '1834', '1901'];//, '1859', '1841', '1905', '1864', '1860', '1858', '1913', '1855', '1912', '1915', '1854', '1910']; let listSiti = ['1828', '1838','1839', '1846', '1831', '1827', '1823', '1863', '1834', '1901'];//, '1859', '1841', '1905', '1864', '1860', '1858', '1913', '1855', '1912', '1915', '1854', '1910'];
Promise.all( Promise.all(
listSiti.map( listSiti.map(
el => fetch(`http://site${el}.tw.cs.unibo.it/globpop?id=${this.props.match.params.id}`) el => fetch(`http://site${el}.tw.cs.unibo.it/globpop?id=${this.props.match.params.id}`)
@@ -26,42 +27,35 @@ class popGlobaleAssoluta extends React.Component {
/* do something with res here... */ /* do something with res here... */
console.log(res) console.log(res)
let tmp = res.map(x => x.recommended); let tmp = res.map(x => x.recommended);
// console.log( ) //let tmp2 =tmp.filter(el=>el.length > 0).map(el => el.map(el1 => el1.videoID || el1.videoId) )
let tmp2 =tmp.filter(el=>el.length > 0).map(el => el.map(el1 => el1.videoID || el1.videoId) ) console.log(...tmp)
console.log(tmp2) this.getThumbnailsNames(tmp);
}); });
} }
// METODI // METODI
getThumbnailsNames(reccomended) { getThumbnailsNames(reccomended) {
let idToLookFor = reccomended.map(item => item.videoID); console.log(reccomended)
let tmp2 =reccomended.filter(el=>el.length > 0).map(el => el.map(el1 => el1.videoID || el1.videoId) )
let idToLookFor =[].concat(...tmp2);
idToLookFor.filter(el=>el.videoID !== undefined || el.videoId !== undefined)
axios.get('https://www.googleapis.com/youtube/v3/videos', { axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: { params: {
part: 'snippet', part: 'snippet',
id: idToLookFor.toString(), id: _.uniq(idToLookFor).slice(0,50).toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title)' fields: 'items(id,snippet/thumbnails/high,snippet/title)'
} }
}) })
.then( .then(
res1 => { res1 => {
res1.data.items.map(resCurrentValue => {
Object.defineProperties(
reccomended.find(videoItem => {
return videoItem.videoID === resCurrentValue.id;
}),
{
'thumbnail':
{ value: resCurrentValue.snippet.thumbnails.medium.url },
'name':
{ value: resCurrentValue.snippet.title }
});
});
this.setState({ this.setState({
isLoaded: true, items: res1.data.items,
items: reccomended isLoaded: true,
}); });
console.log(res1)
}) })
} }
@@ -93,14 +87,14 @@ class popGlobaleAssoluta extends React.Component {
search: "?ref=popGlobaleAssoluta" search: "?ref=popGlobaleAssoluta"
}} }}
> >
<Card.Img <Card.Img
src={item.thumbnail} src={item.snippet.thumbnails.high.url}
alt={'Thumbnail of ' + item.name} alt={'Thumbnail of ' + item.snippet.title}
/> />
<Card.ImgOverlay> <Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white"> <Card.Title className="bg-dark d-inline text-white">
{item.name}<br /> {item.snippet.title}<br />
{item.lastSelected}<br /> {item.snippet.channelTitle}<br />
<span>Reccomender: popGlobaleAssoluta</span> <span>Reccomender: popGlobaleAssoluta</span>
</Card.Title> </Card.Title>
</Card.ImgOverlay> </Card.ImgOverlay>
@@ -125,12 +119,12 @@ class popGlobaleAssoluta extends React.Component {
width={240} width={240}
height={120} height={120}
className="align-self-center mr-3 img-fluid" className="align-self-center mr-3 img-fluid"
src={item.thumbnail} src={item.snippet.thumbnails.high.url}
alt={'Thumbnail of ' + item.name} alt={'Thumbnail of ' + item.snippet.title}
/> />
<Media.Body> <Media.Body>
{item.name}<br /> <h5>{item.snippet.title}</h5>
{item.lastSelected} <br /> <p> {item.snippet.channelTitle}</p>
<p>Reccomender: popGlobaleAssoluta</p> <p>Reccomender: popGlobaleAssoluta</p>
</Media.Body> </Media.Body>
</Link> </Link>