Add more prettty and human readable artists URLs
This commit is contained in:
parent
85dcf6d271
commit
e232ec8c16
|
@ -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.
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
File diff soppresso perché una o più righe sono troppo lunghe
File diff soppresso perché una o più righe sono troppo lunghe
File diff soppresso perché una o più righe sono troppo lunghe
Caricamento…
Fai riferimento in un nuovo problema