sco/tecnologiabanana
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

aggiornata top bar

Browse Source
This commit is contained in:
Gregorio
2019-01-20 18:31:46 +01:00
parent 3c84183b5f
commit 323adb209b
2 changed files with 164 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/TopBar.js
+20 -28
View File
@@ -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
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">
Something
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
Genre
</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
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">
Something
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
Relativa
</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
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">
Something
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
Relativa
</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
+144 -20
View File
@@ -1,22 +1,146 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
//http://site1825.tw.cs.unibo.it/TW/globpop fvitali
//http://site1825.tw.cs.unibo.it/video.json originale videolist
axios.get('http://site1825.tw.cs.unibo.it/TW/globpop',
{
id: videoID // variabile con videoid
})
.then(
response => { // notazione moderna javascript per indicare function(response){}
// function(response){} == response => {}
console.log(response);
console.info(response.data);
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"] }] */
class fvitali extends React.Component {
constructor(props) {
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;