Archived
Compare commits
5
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c7b4f0c347 | ||
|
|
2b58b105dd | ||
|
|
b0dbba7673 | ||
|
|
ea18c64925 | ||
|
|
2bca56b881 |
Generated
+31
-30
@@ -839,6 +839,21 @@
|
||||
"to-fast-properties": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"@c0b41/ytclear": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@c0b41/ytclear/-/ytclear-1.0.0.tgz",
|
||||
"integrity": "sha512-XRlrOlcUZhFURt6x1G1q40Oq4SvYr3j0NAcZeahx4N3em8eAY8831jPjeRBT+nQd762yYINanlfUX2uaG3UaaA==",
|
||||
"requires": {
|
||||
"minimist": "^1.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"minimist": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
|
||||
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@csstools/convert-colors": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
|
||||
@@ -5488,8 +5503,7 @@
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@@ -5507,13 +5521,11 @@
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@@ -5526,18 +5538,15 @@
|
||||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@@ -5640,8 +5649,7 @@
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@@ -5651,7 +5659,6 @@
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@@ -5664,20 +5671,17 @@
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.2.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.1",
|
||||
"yallist": "^3.0.0"
|
||||
@@ -5694,7 +5698,6 @@
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@@ -5767,8 +5770,7 @@
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@@ -5778,7 +5780,6 @@
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@@ -5854,8 +5855,7 @@
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -5885,7 +5885,6 @@
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@@ -5903,7 +5902,6 @@
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@@ -5942,13 +5940,11 @@
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.2",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -14968,6 +14964,11 @@
|
||||
"resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
|
||||
"integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
|
||||
},
|
||||
"wikidata-sdk": {
|
||||
"version": "5.15.9",
|
||||
"resolved": "https://registry.npmjs.org/wikidata-sdk/-/wikidata-sdk-5.15.9.tgz",
|
||||
"integrity": "sha512-I40/v7vW3gw1aLZ9/Yao4+I5ETPoOgE+3dt4rQxJkS510ow4nPb6DTtvA95zppmtDMDSNCNA1a7HN6FNRtAFQg=="
|
||||
},
|
||||
"wikijs": {
|
||||
"version": "4.8.1",
|
||||
"resolved": "https://registry.npmjs.org/wikijs/-/wikijs-4.8.1.tgz",
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@c0b41/ytclear": "^1.0.0",
|
||||
"axios": "^0.18.0",
|
||||
"bootstrap": "^4.1.3",
|
||||
"express": "^4.16.4",
|
||||
@@ -13,6 +14,7 @@
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-scripts": "2.1.1",
|
||||
"react-youtube": "^7.8.0",
|
||||
"wikidata-sdk": "^5.15.9",
|
||||
"wikijs": "^4.8.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
+1
-1
@@ -19,7 +19,7 @@
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>react-4</title>
|
||||
<title>HazeTv</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
+109
-100
@@ -1,114 +1,123 @@
|
||||
import React, { Component } from 'react';
|
||||
// import PropTypes from 'prop-types';
|
||||
import Wikipedia from './areainfo/Wikipedia';
|
||||
import { Col, Tabs, Tab } from 'react-bootstrap';
|
||||
import axios from 'axios';
|
||||
import React, { Component } from 'react';
|
||||
// import PropTypes from 'prop-types';
|
||||
import Wikipedia from './areainfo/Wikipedia';
|
||||
import { Col, Tabs, Tab } from 'react-bootstrap';
|
||||
import axios from 'axios';
|
||||
const ytclear = require('@c0b41/ytclear');
|
||||
|
||||
class VideoInfo extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
error: null,
|
||||
isLoaded: false,
|
||||
VideoDetails: {},
|
||||
videoId: '0J2QdDbelmY'
|
||||
};
|
||||
class VideoInfo extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
error: null,
|
||||
isLoaded: false,
|
||||
VideoDetails: {},
|
||||
videoId: '0J2QdDbelmY',
|
||||
others: {}
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
componentWillMount() {
|
||||
if (this.props.match.params.id) {
|
||||
if (this.props.match.params.id === this.state.videoId) {
|
||||
} else {
|
||||
this.setState({ videoId: this.props.match.params.id });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
if(this.props.match.params.id){
|
||||
if(this.props.match.params.id === this.state.videoId){}
|
||||
else{
|
||||
this.setState({videoId: this.props.match.params.id});
|
||||
}
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
axios
|
||||
.get('https://www.googleapis.com/youtube/v3/videos', {
|
||||
params: {
|
||||
part: 'snippet,contentDetails,statistics,topicDetails',
|
||||
id: this.state.videoId,
|
||||
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
})
|
||||
.then(
|
||||
response => {
|
||||
this.setState((state, props) => {
|
||||
return {
|
||||
VideoDetails: response.data.items[0],
|
||||
isLoaded: true,
|
||||
others: {
|
||||
artist: ytclear(response.data.items[0].snippet.title).split('-')[0],
|
||||
title: ytclear(response.data.items[0].snippet.title).split('-')[1]
|
||||
}
|
||||
};
|
||||
});
|
||||
},
|
||||
error => {
|
||||
console.error(error);
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
error
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
axios.get('https://www.googleapis.com/youtube/v3/videos', {
|
||||
params: {
|
||||
'part': 'snippet,contentDetails,statistics,topicDetails',
|
||||
'id': this.state.videoId,
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
}).then(response => {
|
||||
this.setState({
|
||||
VideoDetails: response.data.items[0],
|
||||
isLoaded: true});
|
||||
}, error => {
|
||||
console.error(error);
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
error
|
||||
});
|
||||
});
|
||||
}
|
||||
// componentWillReceiveProps(nextProps) {
|
||||
|
||||
// componentWillReceiveProps(nextProps) {
|
||||
// }
|
||||
|
||||
// }
|
||||
// shouldComponentUpdate(nextProps, nextState) {
|
||||
|
||||
// shouldComponentUpdate(nextProps, nextState) {
|
||||
// }
|
||||
|
||||
// }
|
||||
componentWillUpdate(nextProps, nextState) {
|
||||
// console.info('nextProps',nextProps);
|
||||
// console.info('nextState',nextState);
|
||||
if (nextProps.match.params.id === this.state.videoId) {
|
||||
} else if (nextProps.match.params.id) {
|
||||
this.setState({ videoId: nextProps.match.params.id });
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUpdate(nextProps, nextState) {
|
||||
// console.info('nextProps',nextProps);
|
||||
// console.info('nextState',nextState);
|
||||
if(nextProps.match.params.id === this.state.videoId){}
|
||||
else if( nextProps.match.params.id){
|
||||
this.setState({videoId: nextProps.match.params.id});
|
||||
}
|
||||
}
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
// console.info('prevProps',prevProps);
|
||||
// console.info('prevState',prevState);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
// console.info('prevProps',prevProps);
|
||||
// console.info('prevState',prevState);
|
||||
}
|
||||
// componentWillUnmount() {
|
||||
|
||||
// componentWillUnmount() {
|
||||
// }
|
||||
|
||||
// }
|
||||
render() {
|
||||
const { error, isLoaded, VideoDetails } = 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>
|
||||
|
||||
<Wikipedia
|
||||
title={
|
||||
this.props.location.state
|
||||
? this.props.location.state.title
|
||||
: this.state.others.title
|
||||
}
|
||||
artist={
|
||||
this.props.location.state
|
||||
? this.props.location.state.artist
|
||||
: this.state.others.artist
|
||||
}
|
||||
videoId={this.props.match.params.id}
|
||||
/>
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { error, isLoaded, VideoDetails } = 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>
|
||||
<Col className='border border-dark' lg={{span:7}}>
|
||||
{/* codice per tabs reccomenders */}
|
||||
<Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
|
||||
<Tab eventKey="a" title="A">
|
||||
<Wikipedia query={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title } />
|
||||
</Tab>
|
||||
<Tab eventKey="b" title="B">
|
||||
<p>{}</p>
|
||||
</Tab>
|
||||
<Tab eventKey="c" title="C">
|
||||
<p>C</p>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</Col>
|
||||
<Col className='border border-dark' lg={{span:4, offset:1}}>
|
||||
<p>2</p>
|
||||
</Col>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
VideoInfo.propTypes = {};
|
||||
|
||||
VideoInfo.propTypes = {
|
||||
|
||||
};
|
||||
|
||||
export default VideoInfo;
|
||||
export default VideoInfo;
|
||||
|
||||
+1
-1
@@ -129,7 +129,7 @@ class VideoList extends React.Component {
|
||||
pathname: '/video/' + item.videoID,
|
||||
state: {
|
||||
artist: item.artist,
|
||||
title: item.title +' '+ item.artist
|
||||
title: item.title
|
||||
}
|
||||
}}>
|
||||
{/* {item.artist} - {item.title} {item.videoID} {item.category} */}
|
||||
|
||||
+175
-71
@@ -1,94 +1,198 @@
|
||||
import React, { Component } from 'react';
|
||||
// import PropTypes from 'prop-types';
|
||||
import wikijs from 'wikijs';
|
||||
import wdk from 'wikidata-sdk';
|
||||
import axios from 'axios';
|
||||
import { Table } from 'react-bootstrap';
|
||||
import moment from 'moment';
|
||||
|
||||
class Wikipedia extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: {},
|
||||
infobox: {},
|
||||
error: null,
|
||||
isLoaded: false
|
||||
};
|
||||
this.getWikiBox = this.getWikiBox.bind(this);
|
||||
this.raffina = this.raffina.bind(this);
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
wikidata: null,
|
||||
wikipedia: null,
|
||||
musicbrainz: null,
|
||||
spareobj: {},
|
||||
error: null,
|
||||
isLoaded: false
|
||||
};
|
||||
this.filterWikipediaRes = this.filterWikipediaRes.bind(this);
|
||||
this.ISO_8601toYYYY = this.ISO_8601toYYYY.bind(this);
|
||||
this.getWikidataPage = this.getWikidataPage.bind(this);
|
||||
}
|
||||
|
||||
getWikiBox(name){
|
||||
wikijs()
|
||||
.page(name)
|
||||
.then(page => page.fullInfo())
|
||||
.then(infobox => console.log('infobox', infobox)
|
||||
//this.setState({ infobox })
|
||||
);
|
||||
//console.log('infobox', this.state.infobox)
|
||||
}
|
||||
ISO_8601toYYYY(a) {
|
||||
return moment(a, [moment.ISO_8601, 'YYYY']).format('YYYY');
|
||||
}
|
||||
|
||||
raffina(results){
|
||||
console.log('raffina',results);
|
||||
return results[0];
|
||||
}
|
||||
filterWikipediaRes(results) {
|
||||
console.log('filterWikipediaRes', results);
|
||||
return results[0];
|
||||
}
|
||||
|
||||
// componentWillMount() {
|
||||
getWikidataPage(wikidataPXXXXResID) {
|
||||
return axios.get(wdk.getEntities(wikidataPXXXXResID, 'en'))
|
||||
.then(wikidataPage => {
|
||||
this.setState({
|
||||
wikidata: wikidataPage.data.entities[Object.keys(wikidataPage.data.entities)[0]]
|
||||
})
|
||||
}, error => console.error(error))
|
||||
.finally(() => {
|
||||
console.log(this.state.wikidata)
|
||||
if (this.state.wikidata.sitelinks.enwiki)
|
||||
wikijs()
|
||||
.page(this.state.wikidata.sitelinks.enwiki.title)
|
||||
.then(page => Promise.all([page.fullInfo(), page.summary()]))
|
||||
.then(wikipediaRes => this.setState({
|
||||
wikipedia: {
|
||||
"desc": wikipediaRes[1],
|
||||
"info": wikipediaRes[0].general
|
||||
}
|
||||
}))
|
||||
.finally(() => console.log(this.state.wikipedia));
|
||||
});
|
||||
}
|
||||
|
||||
// }
|
||||
componentWillMount() {
|
||||
const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
|
||||
axios.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property
|
||||
.then(wikidataP1651Res => {
|
||||
if (wikidataP1651Res.data.results.bindings.length) { // got a match
|
||||
this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP1651Res.data))// set in state wikidata
|
||||
.then(() => {
|
||||
console.log(this.state.wikidata.claims.P435[0].mainsnak.datavalue.value)
|
||||
axios.get(`${musicbrainzBaseUrl}/work/${this.state.wikidata.claims.P435[0].mainsnak.datavalue.value}`, { // get musicbrainz info
|
||||
params: {
|
||||
'inc': 'artist-rels url-rels',
|
||||
'limit': 1,
|
||||
'offset': 0,
|
||||
'fmt': 'json'
|
||||
}
|
||||
}).then(musicbrainzRes1 => this.setState({ isLoaded: true, musicbrainz: musicbrainzRes1.data }));
|
||||
});
|
||||
|
||||
componentWillMount() {
|
||||
wikijs().find(this.props.query, this.raffina).then(data => {
|
||||
this.setState({
|
||||
data,
|
||||
isLoaded: true
|
||||
});
|
||||
console.log(data.html());
|
||||
//this.getWikiBox(data.results[0]);
|
||||
}, error => {
|
||||
console.error(error);
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
error
|
||||
});
|
||||
});
|
||||
}
|
||||
} else { //oof
|
||||
axios.get(`${musicbrainzBaseUrl}/work`, {
|
||||
params: {
|
||||
'query': this.props.title,
|
||||
'limit': 1,
|
||||
'offset': 0,
|
||||
'fmt': 'json'
|
||||
}
|
||||
}).then(musicbrainzRes => {
|
||||
this.setState({ musicbrainz: musicbrainzRes.data.works[0] });
|
||||
axios.all([
|
||||
axios.get(wdk.getReverseClaims('P435', musicbrainzRes.data.works[0].id)), // P435 is musicbrainz id
|
||||
axios.get(`${musicbrainzBaseUrl}/work/${musicbrainzRes.data.works[0].id}`, { // get musicbrainz info
|
||||
params: {
|
||||
'inc': 'artist-rels url-rels',
|
||||
'fmt': 'json'
|
||||
}
|
||||
})
|
||||
]).then(
|
||||
axios.spread((wikidataP435Res, musicbrainzWorkRes) => {
|
||||
if (wikidataP435Res.data.results.bindings.length) // found a match
|
||||
this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP435Res.data)); // set the result in the state
|
||||
else if (musicbrainzWorkRes.data.relations.find(currentRel => currentRel.type === "wikidata")) { // found wikidata on music brainz
|
||||
let a = musicbrainzWorkRes.data.relations.find(currentRel => currentRel.type === "wikidata");
|
||||
let wikidataEntityRegEx = new RegExp("[^/]+$"); // match last part of url https://regex101.com/r/0wCQHY/1
|
||||
this.getWikidataPage(wikidataEntityRegEx.exec(a.url.resource)).then(() => this.setState({ isLoaded: true }));
|
||||
}
|
||||
else { // oof
|
||||
wikijs().find(this.props.title).then(data => console.log('asd', data)) // find by props.title
|
||||
}
|
||||
})
|
||||
)
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// componentWillReceiveProps(nextProps) {
|
||||
}
|
||||
|
||||
// }
|
||||
componentDidMount() {
|
||||
}
|
||||
|
||||
// shouldComponentUpdate(nextProps, nextState) {
|
||||
// componentWillReceiveProps(nextProps) {
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
// componentWillUpdate(nextProps, nextState) {
|
||||
// shouldComponentUpdate(nextProps, nextState) {
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
// componentDidUpdate(prevProps, prevState) {
|
||||
// componentWillUpdate(nextProps, nextState) {
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
// componentWillUnmount() {
|
||||
// componentDidUpdate(prevProps, prevState) {
|
||||
|
||||
// }
|
||||
// }
|
||||
|
||||
render() {
|
||||
const { data, error, isLoaded } = 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 (
|
||||
<div>
|
||||
{/* <p>risultato ricerca wikipedia: { data.results[0] }</p> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
// componentWillUnmount() {
|
||||
|
||||
// }
|
||||
|
||||
render() {
|
||||
const { wikidata, wikipedia, musicbrainz, error, isLoaded } = this.state;
|
||||
const ISO_8601toYYYY = this.ISO_8601toYYYY;
|
||||
if (error) {
|
||||
return <React.Fragment>Error: {error.message}</React.Fragment>;
|
||||
} else if (!isLoaded) {
|
||||
return <React.Fragment>Loading...</React.Fragment>;
|
||||
} else {
|
||||
let keys = {
|
||||
wikipedia: Object.keys(this.state.wikipedia.info),
|
||||
wikidata: Object.keys(this.state.wikidata.claims)
|
||||
}
|
||||
return (
|
||||
<Table striped bordered hover size="sm">
|
||||
<tbody>
|
||||
{
|
||||
keys.wikipedia.map(key => (
|
||||
<tr>
|
||||
<td>{key}</td>
|
||||
<td>{wikipedia.info[key].toLocaleString()}</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
{
|
||||
keys.wikidata.map(key => (
|
||||
<tr>
|
||||
<td>{`${key} - ${wikidata.claims[key][0].mainsnak.datatype}`}</td>
|
||||
<td>{
|
||||
typeof wikidata.claims[key][0].mainsnak.datavalue.value === "string" ?
|
||||
wikidata.claims[key][0].mainsnak.datavalue.value :
|
||||
typeof wikidata.claims[key][0].mainsnak.datavalue.value.id === "string" ?
|
||||
wikidata.claims[key][0].mainsnak.datavalue.value.id :
|
||||
typeof wikidata.claims[key][0].mainsnak.datavalue.value.time === "string" ?
|
||||
ISO_8601toYYYY(wikidata.claims[key][0].mainsnak.datavalue.value.time.toString()) :
|
||||
""
|
||||
}</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
{
|
||||
musicbrainz.relations.map(relation => {
|
||||
if (relation["target-type"] === "artist")
|
||||
return (<tr>
|
||||
<td>{relation.type}</td>
|
||||
<td>{relation.artist.name}</td>
|
||||
</tr>);
|
||||
else if (relation["target-type"] === "url")
|
||||
return (<tr>
|
||||
<td>{relation.type}</td>
|
||||
<td><a href={relation.url.resource}>{relation.type}</a></td>
|
||||
</tr>)
|
||||
else
|
||||
return ("");
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Wikipedia;
|
||||
export default Wikipedia;
|
||||
|
||||
Reference in New Issue
Block a user