Add more prettty and human readable artists URLs

This commit is contained in:
Lucas Verney 2016-08-12 13:11:14 +02:00
부모 85dcf6d271
커밋 e232ec8c16
7개의 변경된 파일44개의 추가작업 그리고 18개의 파일을 삭제

파일 보기

@ -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 suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long