Add more prettty and human readable artists URLs

CONTRIBUTING.md

@@ -46,3 +46,10 @@ homogeneous.
 ## Hooks
 
 Usefuls Git hooks are located in `hooks` folder.
+
+
+## Notes on URLs
+
+Text after any dash in a URL parameter is considered as a comment and
+discarded. In `/artist/1-foobar`, the artist ID is `1` and the `foobar` text
+is simply considered as a comment for human readable URLs.

app/components/Artists.jsx

@@ -26,6 +26,9 @@ export default class Artists extends Component {
             itemsLabel: "app.common.artist",
             subItemsType: "albums",
             subItemsLabel: "app.common.album",
+            buildLinkTo: (itemType, item) => {
+                return "/" + itemType + "/" + item.get("id") + "-" + encodeURIComponent(item.get("name"));
+            },
         };
 
         return (

app/components/elements/Grid.jsx

@@ -64,7 +64,10 @@ class GridItemCSSIntl extends Component {
             { itemCount: nSubItems }
         );
 
-        const to = "/" + this.props.itemsType + "/" + this.props.item.get("id");
+        let to = "/" + this.props.itemsType + "/" + this.props.item.get("id");
+        if (this.props.buildLinkTo) {
+            to = this.props.buildLinkTo(this.props.itemsType, this.props.item);
+        }
         const id = "grid-item-" + this.props.itemsType + "/" + this.props.item.get("id");
         const title = formatMessage(gridMessages["app.grid.goTo" + this.props.itemsType.capitalize() + "Page"]);
 
@@ -85,6 +88,7 @@ GridItemCSSIntl.propTypes = {
     itemsLabel: PropTypes.string.isRequired,
     subItemsType: PropTypes.string.isRequired,
     subItemsLabel: PropTypes.string.isRequired,
+    buildLinkTo: PropTypes.func,
     intl: intlShape.isRequired,
 };
 export let GridItem = injectIntl(CSSModules(GridItemCSSIntl, css));
@@ -237,9 +241,9 @@ export class Grid extends Component {
 
         // Build grid items
         let gridItems = [];
-        const { itemsType, itemsLabel, subItemsType, subItemsLabel } = this.props;
+        const { itemsType, itemsLabel, subItemsType, subItemsLabel, buildLinkTo } = this.props;
         this.props.items.forEach(function (item) {
-            gridItems.push(<GridItem item={item} itemsType={itemsType} itemsLabel={itemsLabel} subItemsType={subItemsType} subItemsLabel={subItemsLabel} key={item.get("id")} />);
+            gridItems.push(<GridItem item={item} itemsType={itemsType} itemsLabel={itemsLabel} subItemsType={subItemsType} subItemsLabel={subItemsLabel} buildLinkTo={buildLinkTo} key={item.get("id")} />);
         });
 
         return (
@@ -264,6 +268,7 @@ Grid.propTypes = {
     itemsLabel: PropTypes.string.isRequired,
     subItemsType: PropTypes.string.isRequired,
     subItemsLabel: PropTypes.string.isRequired,
+    buildLinkTo: PropTypes.func,
     filterText: PropTypes.string,
 };
 

app/views/ArtistPage.jsx

@@ -1,12 +1,12 @@
 // NPM imports
-import React, { Component } from "react";
+import React, { Component, PropTypes } from "react";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 import { defineMessages, injectIntl, intlShape } from "react-intl";
 import Immutable from "immutable";
 
 // Local imports
-import { messagesMap, handleErrorI18nObject } from "../utils";
+import { messagesMap, handleErrorI18nObject, filterInt } from "../utils";
 
 // Actions
 import * as actionCreators from "../actions";
@@ -26,9 +26,16 @@ const artistMessages = defineMessages(messagesMap(Array.concat([], APIMessages))
  */
 class ArtistPageIntl extends Component {
     componentWillMount() {
+        const id = filterInt(this.props.params.id.split("-")[0]);
+        if (isNaN(id)) {
+            // Redirect to homepage
+            this.context.router.replace({
+                pathname: "/",
+            });
+        }
         // Load the data
         this.props.actions.loadArtist({
-            filter: this.props.params.id,
+            filter: id,
             include: ["albums", "songs"],
         });
     }
@@ -53,10 +60,14 @@ class ArtistPageIntl extends Component {
 ArtistPageIntl.propTypes = {
     intl: intlShape.isRequired,
 };
+ArtistPageIntl.contextTypes = {
+    router: PropTypes.object.isRequired,
+};
 
 const mapStateToProps = (state, ownProps) => {
+    const id = ownProps.params.id.split("-")[0];
     // Get artist
-    let artist = state.entities.getIn(["entities", "artist", ownProps.params.id]);
+    let artist = state.entities.getIn(["entities", "artist", id]);
     let albums = new Immutable.List();
     let songs = new Immutable.Map();
     if (artist) {