succo ace

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
@@ -26,4 +27,3 @@ yarn-error.log*
 .vs/
 db.json
 
-package-lock.json

db.json

@@ -17,8 +17,8 @@
     },
     {
       "id": "0J2QdDbelmY",
-      "timesWatched": 1,
+      "timesWatched": 2,
-      "lastWatched": "2018-12-02T20:49:32.498Z"
+      "lastWatched": "2019-01-09T15:11:09.976Z"
     },
     {
       "id": "unRjK82bDLw",

node-entry.js

@@ -1,14 +1,23 @@
 const express = require('express');
+const compression = require('compression')
 const bodyParser = require('body-parser');
 const low = require('lowdb');
 const lodashId = require('lodash-id');
 const FileAsync = require('lowdb/adapters/FileAsync');
 const app = express(); // app is an instance of express
 
+app.use(compression()); // enables gzip compression
 app.use(bodyParser.urlencoded({ extended: false })) // parse application/x-www-form-urlencoded
 app.use(bodyParser.json()) // parse application/json
 app.use(express.static(__dirname + '/build')); // serve static build site
 
+
+app.get('/a', (req, res) => { 
+res.send(process.env);
+
+});
+
+
 // Create database instance and start server
 // const adapter = new FileAsync(__dirname + '/db.json');
 low(new FileAsync(__dirname + '/db.json')) // production

package.json

@@ -7,7 +7,10 @@
     "axios": "latest",
     "body-parser": "^1.18.3",
     "bootstrap": "^4.1.3",
+    "compression": "^1.7.3",
+    "dotenv": "^6.2.0",
     "express": "^4.16.4",
+    "get-artist-title": "^1.1.1",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
     "moment": "^2.23.0",
@@ -20,7 +23,7 @@
     "react-height": "^3.0.0",
     "react-linkify": "^0.2.2",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.1",
+    "react-scripts": "^2.1.3",
     "react-youtube": "^7.8.0",
     "wikidata-sdk": "^5.15.9",
     "wikijs": "^4.8.1",

src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom'; 
+import { Route, Switch, withRouter, matchPath } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.css';
 import { Row, Col, Button, Collapse } from 'react-bootstrap';
 import TopBar from './TopBar';
@@ -11,20 +11,40 @@ import { ReactHeight } from 'react-height';
 import './css/App.css';
 
 class App extends React.Component {
-	constructor(props) {
+	state = {
-		super(props);
-		this.state = {
 		playerHeight: null,
 		navHeight: null,
 		blackbgHeight: null,
-			isInfoToggled: false
+		isInfoToggled: false,
+		videoId: localStorage['lastId']?localStorage['lastId']:'0J2QdDbelmY'
 	};
+
+// componentDidMount(){
+
+// }
+
+// componentDidUpdate(prevProps, prevState) {
+	
+// }
+
+static getDerivedStateFromProps(nextProps, prevState) {
+	let idMatch = matchPath(nextProps.location.pathname, {
+		path: "/video/:id",
+		exact: true,
+		strict: false
+	});
+	if(idMatch && idMatch.params.id !== prevState.videoId){ 
+		localStorage.setItem('lastId', idMatch.params.id)
+		return {videoId: idMatch.params.id }; 
+		}
+	return null;
 }
 
-render() {
+
+	render() {
 		return (
 			<React.Fragment>
-				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
+				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
 					<TopBar />
 				</ReactHeight>
 				<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" >
@@ -33,7 +53,7 @@ render() {
 						lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
 						className="align-content-center pt-2 p-1 pr-2">
 						<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
-							<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> {/* change component to children */}
+							<VideoPlayer videoId={this.state.videoId}/>
 						</ReactHeight>
 					</Col>
 					<Col
@@ -53,7 +73,7 @@ render() {
 						</div>
 						<Collapse in={this.state.isInfoToggled}>
 							<div className="pt-1" id="infovideo-collapse">
-								<Route path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} />
+								<VideoInfo videoId={this.state.videoId} />
 							</div>
 						</Collapse>
 					</Col>
@@ -70,4 +90,4 @@ render() {
 	}
 }
 
-export default App;
+export default withRouter(App);

src/TopBar.js

@@ -27,7 +27,6 @@ class TopBar extends Component {
 		});
 	}
 	handleSubmit(event) {
-		//alert(this.state.query);
 		event.preventDefault();
 		event.target.reset();
 		this.props.history.push('/search/'+this.state.query);

src/VideoInfo.js

@@ -1,39 +1,94 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Wikipedia from './areainfo/Wikipedia';
 import { Tabs, Tab, Table } from 'react-bootstrap';
+import { withRouter } from 'react-router-dom';
 import axios from 'axios';
 import Linkify from "react-linkify";
 import Card from "react-bootstrap/lib/Card";
 import moment from 'moment';
 import momentDurationFormat from 'moment-duration-format';
 import './css/VideoInfo.scss';
+const ytclear = require('@c0b41/ytclear');
 
-class VideoInfo extends Component {
+class VideoInfo extends React.Component {
-    constructor(props) {
+
-        super(props);
+    state = {
-        this.state = {
         error: null,
         isLoaded: false,
         VideoDetails: {},
-            videoId: '0J2QdDbelmY',
+        videoId: '',
-            comments: []
+        comments: [],
+        others: {}
     };
-        this.momentDuration = this.momentDuration.bind(this);
-        this.ISO_8601parse = this.ISO_8601parse.bind(this);
-    }
 
     momentDuration(duration) {
         return moment.duration(duration).format('hh:mm:ss');
     }
+
     ISO_8601parse(a) {
         return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
     }
 
+    isArtistOrTitle(a){
+        // switch(parseInt(b)){
+        //     case 1:
             
+        //         break;
+        //     case 2:
 
-    componentDidMount() {
+        //         break;
-        console.log('didmount', this.state.videoId)
+        //     default: 
+        //         break;
+        // }
         axios.all([
+            axios.get("https://musicbrainz.org/ws/2/work", {
+                params: {
+                    query: `work:${a[0]} AND artist:${a[1]}`,
+                    //artist: a[1],
+                    fmt: "json",
+                    limit: 1,
+                    inc: "aliases"
+                }}),
+                axios.get("https://musicbrainz.org/ws/2/work", {
+                    params: {
+                        query: `work:${a[1]} AND artist:${a[0]}`,
+                    //    artist: a[0],
+                        fmt: "json",
+                        limit: 1,
+                        inc: "aliases"
+
+                    }})
+            ])
+            .then(axios.spread((response1, response2) => { 
+                    console.log(response1.data, response2.data);
+                    axios.all([
+                        axios.get(`https://musicbrainz.org/ws/2/work/${response1.data.works[0].id}`,{
+                            params:{
+                                fmt:'json',
+                                limit:1,
+                                inc: 'aliases'
+                            }
+                        }),
+                        axios.get(`https://musicbrainz.org/ws/2/work/${response2.data.works[0].id}`,{
+                            params:{
+                                fmt:'json',
+                                limit:1,
+                                inc: 'recording-rels'
+                            }
+                        }),
+                    ]).then(axios.spread((responseA1,responseA2)=>{
+                        console.log(responseA1.data, responseA2.data);
+
+                    }))
+                }),
+                error => { }
+            );
+            }
+        
+    
+
+    getInfoComments() {
+        return axios.all([
             axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
                 params: {
                     'part': 'snippet,contentDetails,statistics,topicDetails',
@@ -49,9 +104,14 @@ class VideoInfo extends Component {
                 }
             })])
             .then(axios.spread((videosResponse, commentThreadResponse) => {
+                this.isArtistOrTitle(ytclear(videosResponse.data.items[0].snippet.title).split('-'));
                 this.setState({
                     VideoDetails: videosResponse.data.items[0],
                     comments: commentThreadResponse.data.items,
+                    others: {
+                        artist: null,
+                        title: videosResponse.data.items[0].snippet.title
+                    },
                     isLoaded: true
                 });
             }), error => {
@@ -63,45 +123,22 @@ class VideoInfo extends Component {
             });
     }
 
+    static getDerivedStateFromProps(nextProps, prevState) {
+        if(nextProps.videoId !== prevState.videoId)
+            return { videoId: nextProps.videoId };
+        return null;
+    }
+    componentDidMount() {
+        this.getInfoComments();
+    }
+
     componentDidUpdate(prevProps, prevState, snapshot) {
-        if (!(prevState.videoId === this.state.videoId))
+        if(prevState.videoId !== this.state.videoId)
-            axios.all([
+            this.getInfoComments();
-                axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
-                    params: {
-                        'part': 'snippet,contentDetails,statistics,topicDetails',
-                        'id': this.state.videoId,
-                        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-                    }
-                }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
-                    params: {
-                        'part': 'snippet',
-                        'videoId': this.state.videoId,
-                        'order': 'relevance',
-                        'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
-                    }
-                })])
-                .then(axios.spread((videosResponse, commentThreadResponse) => {
-                    this.setState({
-                        VideoDetails: videosResponse.data.items[0],
-                        comments: commentThreadResponse.data.items,
-                        isLoaded: true
-                    });
-                }), error => {
-                    console.error(error);
-                    this.setState({
-                        isLoaded: true,
-                        error
-                    });
-                });
     }
 
-
+    // shouldComponentUpdate(nextProps, nextState) {
-    componentWillReceiveProps(nextProps) {
+    // }
-        console.log(nextProps)
-        if (nextProps.match.params.id && !(nextProps.match.params.id === this.state.videoId)) {
-            this.setState({ videoId: nextProps.match.params.id })
-        } // mindfuck 
-    }
     
     render() {
         const { error, isLoaded, VideoDetails, comments } = this.state;
@@ -110,6 +147,7 @@ class VideoInfo extends Component {
         if (error) {
             return (
                 <span className="text-white">
+                <span>{}</span>
                     Error: {error.message} -- Cannot get {error.config.url}
                 </span>
             );
@@ -127,7 +165,7 @@ class VideoInfo extends Component {
                                 <b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
                                 <b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
                                 <b>Tags: </b>{VideoDetails.snippet.tags ?
-                                    VideoDetails.snippet.tags.map(tag => (<span>{tag}</span>)) : ""}
+                                    VideoDetails.snippet.tags.map(tag => (<span className='d-block'>{tag}</span>)) : ""}
                                 {/* tags should be links  */}
                             </p>
                         </Tab>
@@ -159,10 +197,12 @@ class VideoInfo extends Component {
                                 )
                             })}
                         </Tab>
-                        <Tab eventKey="wikipedia" title="Wikipedia">
+                        <Tab className="text-white" eventKey="wikipedia" title="Wikipedia">
-                            <div>
+                            <Wikipedia 
-
+                            title={this.state.others.title}
-                            </div>
+                            artist={this.state.others.artist}
+                            videoId={this.state.videoId}
+                            />
                         </Tab>
                     </Tabs>
                 </React.Fragment>
@@ -175,4 +215,4 @@ VideoInfo.propTypes = {
 
 };
 
-export default VideoInfo;
+export default withRouter(VideoInfo);

src/VideoPlayer.js

@@ -1,12 +1,11 @@
-import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
+import React from 'react'; // eslint-disable-line no-unused-vars
 import YouTube from 'react-youtube'; // eslint-disable-line no-unused-vars
 import axios from 'axios';
+import { withRouter } from 'react-router-dom';
 /* eslint no-console: ["error", { allow: ["info", "error", "warn"] }] */
 
-class VideoPlayer extends Component {
+class VideoPlayer extends React.Component {
-	constructor(props) {
+	state = {
-		super(props);
-		this.state = {
 			opt: {
 				height: '390',
 				width: '640',
@@ -16,44 +15,17 @@ class VideoPlayer extends Component {
 					modestbranding: 1
 				}
 			},
-			videoId: '0J2QdDbelmY',
 			promise1: null,
 			promise2: null,
 			outsideReject1: null,
 			outsideReject2: null	
 		};
-		this._onPlay = this._onPlay.bind(this);
-		this._onStateChange = this._onStateChange.bind(this);
-		this._onReady = this._onReady.bind(this);
-	}
-	componentWillUpdate(nextProps, nextState) {
-		if (nextProps.match.params.id === this.props.match.params.id) {
-		} else if (nextProps.match.params.id) {
-			this.setState((state, props) => {
-				return { videoId: props.match.params.id };
-			});
-		}
-	}
-
-	componentWillReceiveProps(nextProps) {
-		// if (nextProps.location !== this.props.location) {}
-	}
-
-	componentWillMount() {
-		if (this.props.match.params.id)
-			this.setState((state, props) => {
-				return { videoId: props.match.params.id };
-			});
-	}
-
-	componentWillUnmount() {}
 		
 	render() {
 		return (
-			<React.Fragment>
 				<YouTube
 					opts={this.state.opt}
-					videoId={this.state.videoId}
+					videoId={this.props.videoId}
 					onReady={this._onReady}
 					onPlay={this._onPlay}
 					onError={this._onError}
@@ -61,13 +33,12 @@ class VideoPlayer extends Component {
 					className="embed-responsive-item"
 					containerClassName="embed-responsive embed-responsive-16by9"
 				/>
-			</React.Fragment>
 		);
 	}
 	
 	// access to player in all event handlers via event.target
 	_onError(event) {
-		console.error('Error: ', event);
+		console.error('Player error: ', event);
 	}
 
 	_onPlay(event) {}
@@ -136,6 +107,7 @@ class VideoPlayer extends Component {
 			});
 		}
 	}
+	_onStateChange = this._onStateChange.bind(this);
 }
 
-export default VideoPlayer;
+export default withRouter(VideoPlayer);

src/areainfo/Suggestion.js

@@ -6,38 +6,26 @@ import { Row, Col, Button, Collapse } from 'react-bootstrap';
 // and so on..
 
 class Suggestion extends Component {
-  constructor(props) {
-    super(props);
 
-  }
+  // static getDerivedStateFromProps(nextProps, prevState) {
     
-  componentWillMount() {
+  // }
   
-  }
+  // componentDidMount() {
 
-  componentDidMount() {
+  // }
 
-  }
+  // shouldComponentUpdate(nextProps, nextState) {
 
-  componentWillReceiveProps(nextProps) {
+  // }
 
-  }
+  // componentDidUpdate(prevProps, prevState) {
 
-  shouldComponentUpdate(nextProps, nextState) {
+  // }
 
-  }
+  // componentWillUnmount() {
 
-  componentWillUpdate(nextProps, nextState) {
+  // }
-
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-
-  }
-
-  componentWillUnmount() {
-
-  }
 
   render() {
     let a =['','','','','','','','','','',''];

src/areainfo/Wikipedia.js

@@ -7,22 +7,18 @@ import { Table } from 'react-bootstrap';
 import moment from 'moment';
 
 class Wikipedia extends Component {
-	constructor(props) {
+
-		super(props);
+	state = {
-		this.state = {
 		wikidata: null,
 		wikipedia: null,
 		musicbrainz: null,
-			spareobj: {},
+		props: {},
 		error: null,
 		isWikiLoaded: false,
 		isWDataLoaded: false,
-			isMBLoaded: false
+		isMBLoaded: false,
+		isLoaded: false
 	};
-		this.filterWikipediaRes = this.filterWikipediaRes.bind(this);
-		this.ISO_8601toYYYY = this.ISO_8601toYYYY.bind(this);
-		this.getWikidataPage = this.getWikidataPage.bind(this);
-	}
 
 	ISO_8601toYYYY(a) {
 		return moment(a, [moment.ISO_8601, 'YYYY']).format('YYYY');
@@ -39,6 +35,7 @@ class Wikipedia extends Component {
 				let wikidatatmp = wikidataPage.data.entities[Object.keys(wikidataPage.data.entities)[0]];
 				this.setState({
 					wikidata: wikidatatmp,
+					wikidatakeys: Object.keys(wikidatatmp.claims),
 					isWDataLoaded: true
 				});
 				if (wikidatatmp.sitelinks.enwiki)
@@ -50,54 +47,82 @@ class Wikipedia extends Component {
 								"desc": wikipediaRes[1],
 								"info": wikipediaRes[0].general
 							},
+							wikipediakeys: Object.keys(wikipediaRes[0].general),
 							isWikiLoaded: true
 						}))
 			}, error => console.error(error))
 		// .then(() => {
 		// 	console.log(this.state.wikidata)
-
 		// 		.then(() => console.log(this.state.wikipedia));
 		// });
 	}
 
-	componentWillMount() {
+	wrapper() {
 		const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
-		axios.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property
+		return axios.get(wdk.getReverseClaims('P1651', this.state.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)
+							if (this.state.wikidata.claims.P435) {
 								axios.get(`${musicbrainzBaseUrl}/work/${this.state.wikidata.claims.P435[0].mainsnak.datavalue.value}`, { // get musicbrainz info
 									params: {
 										'inc': 'artist-rels url-rels',
+										'limit': 15,
+										'offset': 0,
+										'fmt': 'json'
+									}
+								}).then(
+									musicbrainzRes1 => 
+										this.setState({ musicbrainz: musicbrainzRes1.data, isMBLoaded: true })
+										);
+							}
+							else {//oof P435 not found in wikidata
+								axios.get(`${musicbrainzBaseUrl}/work`, { // search on mb by wikidata title
+									params: {
+										'query': `work:${this.state.wikidata.labels.en.value}`,
 										'limit': 1,
 										'offset': 0,
 										'fmt': 'json'
 									}
-							}).then(musicbrainzRes1 => this.setState({ musicbrainz: musicbrainzRes1.data, isMBLoaded: true }));
+								}).then(musicbrainzRes2 => {
+									axios.get(`${musicbrainzBaseUrl}/work/${musicbrainzRes2.data.works[0].id}`,
+										{ // get musicbrainz info on track by previous id 
+											params: {
+												'inc': 'artist-rels url-rels',
+												'limit': 15,
+												'fmt': 'json'
+											}
+										})
+										.then(
+											(musicbrainzWorkRes2) =>
+												this.setState({ musicbrainz: musicbrainzWorkRes2.data, isMBLoaded: true })
+												);
 								});
-
+							}
-				} else { //oof
+						});
+				}
+				else { //oof
 					axios.get(`${musicbrainzBaseUrl}/work`, {
 						params: {
-							'query': this.props.title,
+							'query': this.state.props.title.trim(),
 							'limit': 1,
 							'offset': 0,
 							'fmt': 'json'
 						}
 					}).then(musicbrainzRes => {
-						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 
 								params: {
 									'inc': 'artist-rels url-rels',
+									'limit': 15,
 									'fmt': 'json'
 								}
 							})
 						]).then(
 							axios.spread((wikidataP435Res, musicbrainzWorkRes) => {
+								this.setState({ musicbrainz: musicbrainzWorkRes.data, isMBLoaded: true });
 								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
@@ -106,34 +131,46 @@ class Wikipedia extends Component {
 									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
+									wikijs().find(this.state.props.title).then(data => console.log('asd', data)) // find by props.title
 								}
 							})
 						)
 					})
 				}
 			});
-
 	}
 
+	static getDerivedStateFromProps(nextProps, prevState) {
+		if (prevState.props.videoId !== nextProps.videoId)
+			return {
+				props: {
+					videoId: nextProps.videoId,
+					artist: nextProps.artist,
+					title: nextProps.title
+				},
+				isWikiLoaded: false,
+				isWDataLoaded: false,
+				isMBLoaded: false,
+				isLoaded: false
+			};
+		return null
+	}
+
+
+
 	componentDidMount() {
+		this.wrapper().then(()=>this.setState({isLoaded: true}));
 	}
 
-	// componentWillReceiveProps(nextProps) {
-
-	// }
 
 	// shouldComponentUpdate(nextProps, nextState) {
 
 	// }
 
-	// componentWillUpdate(nextProps, nextState) {
+	componentDidUpdate(prevProps, prevState) {
-
+		if (prevState.props.videoId !== this.state.props.videoId)
-	// }
+			this.wrapper().then(()=>this.setState({isLoaded: true}));
-
+	}
-	// componentDidUpdate(prevProps, prevState) {
-
-	// }
 
 	// componentWillUnmount() {
 
@@ -144,26 +181,22 @@ class Wikipedia extends Component {
 		const ISO_8601toYYYY = this.ISO_8601toYYYY;
 		if (error) {
 			return <React.Fragment>Error: {error.message}</React.Fragment>;
-		} else if (!isWikiLoaded || !isWDataLoaded || !isMBLoaded) {
+		} else if (!this.state.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>
-						{
+						{ isWikiLoaded &&
-							keys.wikipedia.map(key => (
+							this.state.wikipediakeys.map(key => (
 								<tr>
 									<td>{key}</td>
 									<td>{wikipedia.info[key].toLocaleString()}</td>
 								</tr>
 							))
 						}
-						{
+						{ isWDataLoaded &&
-							keys.wikidata.map(key => (
+							this.state.wikidatakeys.map(key => (
 								<tr>
 									<td>{`${key} - ${wikidata.claims[key][0].mainsnak.datatype}`}</td>
 									<td>{
@@ -178,7 +211,7 @@ class Wikipedia extends Component {
 								</tr>
 							))
 						}
-						{
+						{ isMBLoaded &&
 							musicbrainz.relations.map(relation => {
 								if (relation["target-type"] === "artist")
 									return (<tr>

src/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
-import { HashRouter, BrowserRouter } from 'react-router-dom';
+import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line 
 
-ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root'));
+ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
 registerServiceWorker();