Add more prettty and human readable artists URLs
Cette révision appartient à :
Parent
85dcf6d271
révision
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) {
|
||||
|
|
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
Chargement…
Référencer dans un nouveau ticket