wikipedia integration

package.json

@@ -3,13 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@c0b41/ytclear": "^1.0.0",
     "axios": "latest",
     "body-parser": "^1.18.3",
-    "@c0b41/ytclear": "^1.0.0",
     "bootstrap": "^4.1.3",
     "express": "^4.16.4",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
+    "moment": "^2.23.0",
+    "moment-duration-format": "^2.2.2",
     "react": "^16.6.1",
     "react-app-polyfill": "^0.1.3",
     "react-bootstrap": "^1.0.0-beta.2",

src/VideoInfo.js

@@ -5,6 +5,7 @@ import {Col, Tabs, Tab, ListGroup, ListGroupItem} from 'react-bootstrap';
 import axios from 'axios';
 import Linkify from "react-linkify";
 import Card from "react-bootstrap/lib/Card";
+const ytclear = require('@c0b41/ytclear');
 
 class VideoInfo extends Component {
   constructor(props) {
@@ -37,7 +38,11 @@ class VideoInfo extends Component {
       }
     }).then(response => {
       this.setState({
-        VideoDetails: response.data.items,
+				VideoDetails: response.data.items,
+				others: {
+					artist: ytclear(response.data.items[0].snippet.title).split('-')[0],
+					title: ytclear(response.data.items[0].snippet.title).split('-')[1]
+				},
         isLoaded: true});
   }, error => {
       console.error(error);

src/areainfo/Wikipedia.js

@@ -15,7 +15,9 @@ class Wikipedia extends Component {
 			musicbrainz: null,
 			spareobj: {},
 			error: null,
-			isLoaded: false
+			isWikiLoaded: false,
+			isWDataLoaded: false,
+			isMBLoaded: false
 		};
 		this.filterWikipediaRes = this.filterWikipediaRes.bind(this);
 		this.ISO_8601toYYYY = this.ISO_8601toYYYY.bind(this);
@@ -34,24 +36,28 @@ class Wikipedia extends Component {
 	getWikidataPage(wikidataPXXXXResID) {
 		return axios.get(wdk.getEntities(wikidataPXXXXResID, 'en'))
 			.then(wikidataPage => {
+				let wikidatatmp = wikidataPage.data.entities[Object.keys(wikidataPage.data.entities)[0]];
 				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)
+					wikidata: wikidatatmp,
+					isWDataLoaded: true
+				});
+				if (wikidatatmp.sitelinks.enwiki)
 					wikijs()
-						.page(this.state.wikidata.sitelinks.enwiki.title)
+						.page(wikidatatmp.sitelinks.enwiki.title)
 						.then(page => Promise.all([page.fullInfo(), page.summary()]))
 						.then(wikipediaRes => this.setState({
 							wikipedia: {
 								"desc": wikipediaRes[1],
 								"info": wikipediaRes[0].general
-							}
+							},
+							isWikiLoaded: true
 						}))
-						.finally(() => console.log(this.state.wikipedia));
-			});
+			}, error => console.error(error))
+			// .then(() => {
+			// 	console.log(this.state.wikidata)
+
+			// 		.then(() => console.log(this.state.wikipedia));
+			// });
 	}
 
 	componentWillMount() {
@@ -69,7 +75,7 @@ class Wikipedia extends Component {
 									'offset': 0,
 									'fmt': 'json'
 								}
-							}).then(musicbrainzRes1 => this.setState({ isLoaded: true, musicbrainz: musicbrainzRes1.data }));
+							}).then(musicbrainzRes1 => this.setState({ musicbrainz: musicbrainzRes1.data, isMBLoaded: true }));
 						});
 
 				} else { //oof
@@ -81,7 +87,7 @@ class Wikipedia extends Component {
 							'fmt': 'json'
 						}
 					}).then(musicbrainzRes => {
-						this.setState({ musicbrainz: musicbrainzRes.data.works[0] });
+						this.setState({musicbrainz: musicbrainzRes.data.works[0], isMBLoaded: true });
 						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 
@@ -97,7 +103,7 @@ class Wikipedia extends Component {
 								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 }));
+									this.getWikidataPage(wikidataEntityRegEx.exec(a.url.resource)) //.then(() => this.setState({ isWikiLoaded: true }));
 								}
 								else { // oof
 									wikijs().find(this.props.title).then(data => console.log('asd', data)) // find by props.title
@@ -134,11 +140,11 @@ class Wikipedia extends Component {
 	// }
 
 	render() {
-		const { wikidata, wikipedia, musicbrainz, error, isLoaded } = this.state;
+		const { wikidata, wikipedia, musicbrainz, error, isWikiLoaded, isWDataLoaded, isMBLoaded } = this.state;
 		const ISO_8601toYYYY = this.ISO_8601toYYYY;
 		if (error) {
 			return <React.Fragment>Error: {error.message}</React.Fragment>;
-		} else if (!isLoaded) {
+		} else if (!isWikiLoaded || !isWDataLoaded || !isMBLoaded) {
 			return <React.Fragment>Loading...</React.Fragment>;
 		} else {
 			let keys = {